GSAP Animation

A GSAP concepts lab: tweens, easing curves, Timeline, stagger, ScrollTrigger and scrub, replayed by a hand-written tween engine alongside the matching GSAP code.

Tech: tween / ease, Timeline, stagger, ScrollTrigger 原理, Canvas 2D

• Timeline — Multiple patches are organized in a time-axis format, and the overlap is followed by the yoyo reverse.
• ScrollTrigger — When blocks roll over the trigger line, the card slides Widening Progress, Dilution.
• Staggered Text — Split word for word + stagger heading.
• Bounce In — Bounce into the field: Once a small ball hits the ground, press bource.out and bounces back several times, each time lower than last time.
• Staggered Cards — Cross-entry: a group of cards do the same animation, but starts a little later than the previous one (stagger interval).
• Path Following — Let objects move along a pre-drawn route.
• Spin Out — Shrink while spinning the squares, make it transparent until it disappears ease: power3.in，Turn faster) and use it from a very small state bac…
• Elastic Scale — It's like pulling out the rubber band and letting go. The elements go past the target size when they zoom in, We'll just hang around and stop.
• Color Flash — GSAP can fix the color directly -- it will tear it apart. Red, Green, Blue, smooth transition from old to new.
• Flip Cards — Turn the cards around the vertical middle line at 180 degrees, turn at 90 degrees and side to us, and then see the back.
• Progress Ring — The arc length of the circle has increased from 0 to the target percentage, like the "ring" that loads progress or moves App.
• Typewriter — "Show one more word every fixed time on the axis." It looks like someone's typing; it's all done. Stop 1 Authorities, one word at a time and one word at a time.
• Parallax Layers — The nearby trees retreated while the distant mountains moved slowly, and the brain was so close by the speed difference.
• Grid Stagger — Stagger's grid and from options allow delay to be calculated by "range from the start" and animate from point one like a wave
• Timeline Scrub — Scrub Time axis: Animation progress is no longer played by itself, but drags with it / Scroll where you want to drag it to the animation.