The Basics

01 Tween Methods

The gsap object contains various methods to animate an element by changing the properties.

gsap.to()

Allows you to define the destination values.

                    
        gsap.to(".blob--to", {
            x: 500,
            y: 250,
            rotation: 360,
            duration: 4,
            repeat: 2,
            yoyo: true,
        });
                    
                

gsap.from()

Same as the .to() method, but backwards.
You define the values at the beginning and then it animates to the current state, which is defined in the CSS file.

Commonly used for animating objects into the screen, because you can set them up the way you want them to look at the end.

                    
        gsap.from(".blob--from", {
            y: -300,
            x: -500,
            scale: 0.3,
            rotation: 360,
            duration: 4,
            repeat: 2,
            yoyo: true,
        });
                    
                

gsap.fromTo()

In this method, the starting and ending values for an animation are defined.

                    
        gsap.fromTo(".blob--fromTo", {
                y: -200,
                x: 590,
                scale: 0.3,
            },
            {
                y: 200,
                x: 200,
                scale: 2.3,
                duration: 4,
                ease: "bounce.out",
                repeat: 2,
                yoyo: true,
            }
        );
                    
                

02 Utility Methods

• Delay

• Repeat

• RepeatDelay

• Yoyo

• Stagger

• ... and much more

03 Keyframes

Very useful to set one step after another.
If you have three .to() methods, they are all fired at the same time, but with keyframes (or also timelines) you can have the three steps in one animation and one step is fired when the step before is finished.

Why use keyframes instead of Timeline?

Convenience, I guess.
It's used to animate an element with a few steps and you don't want to create a timeline for that.

            
        gsap.fromTo(
            ".blob--keys",
            { x: -500, autoAlpha: 0 },
            {
            keyframes: [
                { duration: 1.5, x: 100, autoAlpha: 1 },
                { duration: 0.3, y: 50, scale: 1 },
                { duration: 0.3, x: 200, scale: 1.2 },
                { duration: 0.3, y: 100, scale: 1 },
                { duration: 0.3, x: 300, scale: 1.2 },
                { duration: 0.3, y: 150, scale: 1 },
                { duration: 0.3, x: 400, scale: 1.2 },
                { duration: 0.3, y: 200, scale: 1 },
                { duration: 2.6, x: 1000 },
            ],
            repeat: 2,
            yoyo: true,
            }
        );
            
        

Oh Gosh, Oh Heck!
Where are my keys?!

04 Events

Special Properties to run some code (e.g. callback functions etc) on events.

• onComplete
• onStart
• onUpdate
• onRepeat

                
        gsap.to(".blob", {
            scale: 3,
            onComplete: onComplete,
            onCompleteParams: ["I'm fired on complete"]
        });

        function onComplete(param) {
            console.log(param);
        }
                
            

05 Register an Animation

To create re-usable animation effects.

                
        gsap.registerEffect({
            name: "myAnimation",
            effect: (targets, config) => {
                return gsap.to(targets, {duration: 2, y: 200, scale: 1.4, rotation: 360})
            }
        })

        gsap.effects.myAnimation(img1, {duration: 5})