GSAP's default animation duration value is 0.5
default ease is power1. ease visualizer

• me quedé viendo esto hasta la mitad Learn GSAP for Webflow

resources

• demos & starters
• codepens
• webflow templates
• profesional sites showcase

Core lib

Tween

• gsap.to(".thumbnail", {scale: 2, duration: 1});
  animates from the element's current value to the the passed param
  GSAP can animate any css property. I've seen scale, borderRadius, opacity...

• gsap.from: animates from the passed param value back to whatever the element's value was.

• gsap.fromTo

• gsap.set: set the value immediately without having to animate (like startFrom)

stagger

if your have an animation that is applied across multiple elements (individual list items for example). Instead of having all of them start at the same time you can apply a stagger effect

stagger: {each: 0.5, from: "end"}
applies a delay to trigger the start of each animation. from the last element to the first.

stagger: {amount: 0.5}
evenly distributes the start of all the elements across 0.5 seconds.

easing

timeline

let loopTL = gsap.timeline({repeat: 4, yoyo:false, paused: true})
// repeat: -1 is infinite
// yoyo: true plays the same animations backwards (to get elements back to initial state, otherwise you would have to manually set the values back)

let myTL = gsap.timeline()
myTL.from()
myTL.to() // starts after previous animation is completed
myTL.to(".image", {onComplete: loopTL.play()}, 0.5) 
// onComplete callback to trigger loopTL
//starts 0.5s after the start of the TL
// "<0.5" starts 0.5s after the start of the prev step 
// >-0.5 starts 0.5s before the end of prev step.


myTL.pause() //play(), reverse()
myTL.timeScale(3) // speeds animation up 3x

Plugins

scrollTrigger

starts animation after the elements are in view.

let scrollTl = gsap.timeline({
    scrollTrigger: {
        trigger: ".about-section",
        start: "top center",
        end: "bottom bottom"
        markers: true, // for debugging
        scrub: true
}.

if there are multiple sections that trigger the same scroll trigger timelines, use JQuery selector

$(".about-section").each(function() {
    //timeline here
});

MotionPath

text split

Watch This Before Using GSAP SplitText in Webflow
this vid has some extra code taking into consideration all best practices and edge cases.