GSAP
Tools for
JavaScript Animation
But for usage like CSS animation, you don't need to calculate timing and movement relationship.
...and easily add momentum effect
Basic usage
gsap.to(targetDOM, {
y: '+=200',
duration: 1, // in 1 seconds
});<div id="targetDOM" style="transform3d(0, 200px, 0)" />Or for entry
gsap.from(targetDOM, {
y: '-=200',
duration: 1, // in 1 seconds
});<div id="targetDOM" style="transform3d(0, -200px, 0)" />
.
.
.
<div id="targetDOM" style="transform3d(0, 0, 0)" />Timeline
var timeline = gsap.timeline({repeat: 2, repeatDelay: 1});
timeline.to('#targetDOM', {x: 100, duration: 0.5});
timeline.to('#targetDOM', {y: 50, duration: 1});
timeline.to('#targetDOM2', {opacity: 0, duration: 0.5});like keyframes, but control multiple elements
0s
1s
2s
3s
DOM1
DOM1
DOM1
DOM1
DOM2
DOM2
DOM2
DOM1
Timeline Control
timeline.pause();
timeline.resume();
timeline.seek(1.5);
timeline.reverse();
// Nesting
timeline.add(timeline2);
// Labeling
timeline.addLabel("spin", 3);
timeline.to(".class", {duration: 2, rotation: "+=360"}, "spin");
timeline.play("spin");
MorphSVG
gsap.to("#circle", {duration: 1, morphSVG: "#hippo"});Physics2D
gsap.to(element, {
duration: 2,
physics2D: {
velocity: 300,
angle: -60,
acceleration: 50,
accelerationAngle: 180,
},
});ScrollTrigger
Combine timeline animation with user's scroller.
const timeline = gsap.timeline({
scrollTrigger: {
trigger: '.container',
pin: true,
start: 'top top',
end: '+=500',
scrub: 1, // momentum
snap: {
snapTo: 'labels',
duration: {
min: 0.2,
max: 3,
},
delay: 0.2,
ease: "power1.inOut",
},
},
});Misunderstand
const timeline = gsap.timeline({
scrollTrigger: {
trigger: '.container',
start: 'top top',
end: '+=500',
},
});Start with "top top" not means x:0, y:0, it says the scroll container relation with targetDOM (trigger).
The "top top" told GSAP, start point at the trigger boundary box's top (first top) touch the scroller's (default is viewport) boundary box's top (second top).
Pinned
const timeline = gsap.timeline({
scrollTrigger: {
trigger: '.container',
pin: true,
start: 'top top',
end: '+=500',
scrub: 1, // momentum
},
});Use the pin option, GSAP will create a virtual box with the total scroll height assigned (500px), and set the trigger element position fixed when scrolling between it.
It's easy usage for scroll animation with canvas.
án-chṳ́-se
GSAP
By Chia Yu Pai
GSAP
- 603
