Create a folder on your desktop. Open your terminal.

Type CD and drag your folder. That way you don’t need to type your path.

Build

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

Run

./woff2_compress path_to_font/myfont.ttf;

You will get converted .woff2 file next to your file.

We are pushing animations even more. We are moving to the blog page & we are animating a post list with a staggering effect.

Come to our Facebook group: https://www.facebook.com/groups/dplugins

JavaScript

gsap.to(".oxy-post", {
    duration: 1,
    scale: 1,
    opacity: 1,
    y: 40,
    stagger: {
        grid: "auto",
        from: "start",
        axis: "y",
        amount: 1.5
    }
});

CSS

.oxy-post{
    opacity: 0;
    transform: scale(0);
}

🙉 Advanced tutorials for GSAP (affiliate)

🙊 Purchase GSAP (affiliate)

Learn how to register, enqueue, and trigger GSap Script inside Oxygen Builder.

The video is also covering how to set up Scripts Organizer and Scripts Manager feature.
We will explain the best practice about playing with element opacity is shared by my tutor from snorkl.tv

JavaScript

function init(){
    gsap.from("#headline-346-4", {
        duration: 2, 
        y: 100,
        autoAlpha: 0,
    });
}

window.addEventListener("load", init)

CSS

#headline-346-4{
    visibility: hidden;
}

🙉 Advanced tutorials for GSAP (affiliate)

🙊 Purchase GSAP (affiliate)

Code to toggle navigation

(function($){

    $(function() {

		$( ".trigger" ).click(function() {
			$( ".toggled-object" ).slideToggle(300);
		});
		
    });

})(jQuery);

Discuss about this tutorial on our Facebook Group