GSAP Flashcards
What are the three primary methods of the GSAP object for creating tweens?
gsap.to(), gsap.from(), and gsap.fromTo(). These methods animate properties over time.
What does a tween do in GSAP?
A tween animates a property of an object over time, specifying targets, properties, and optional special properties like duration.
How is the x or y property used in GSAP animations?
It is a shorthand for the CSS translateX or translateY property, used to move elements along the horizontal axis.
What are staggered animations in GSAP?
They animate multiple objects with delayed start times using the stagger property.
What is a GSAP timeline?
A container for multiple tweens, enabling sequencing, overlap, nested timelines, and repeat delays.
What is the basic syntax for a gsap.to() tween?
gsap.to(".fred", { x: 400 });
This animates the element with the class “fred” to an x position of 400.
For best performance, which CSS properties should you animate with GSAP?
- x
- y
- rotation
- rotationX
- rotationY
- skewX and skewY
- scaleX, scaleY, or scale
What does the delay property do in GSAP?
The delay property specifies how much time should transpire before the animation begins.
What does the repeat property do in GSAP?
The repeat property defines how many times the animation should repeat.
What happens if you set repeat: -1 in GSAP?
The animation will repeat indefinitely.
How can you play an animation back and forth in GSAP?
With yoyo set to true:
yoyo: true,
How can you delay, when an animation repeats in GSAP?
The repeatDelay property specifies how much time should transpire between each repeat of the animation.
What does the start property in ScrollTrigger define? (GSAP)
The start property defines when the animation begins relative to the scroll position. Example: “start”: “top 75%”.
What does “start”: “top top” mean in ScrollTrigger? (GSAP)
It means the top of the trigger element matches the top of the viewport (default behavior).
What does the end property in ScrollTrigger do? (GSAP)
The end property defines when the animation ends relative to the scroll position.
How can you set an absolute end value in ScrollTrigger? in GSAP
By using a relative value like “end”: “+=500”, which ends 500px after start.
What does toggleActions control in ScrollTrigger? in GSAP
It controls the behavior when the trigger point is crossed - “onEnter, onLeave, onEnterBack, onLeaveBack”.
Which 8 toggleActions can be used for the scrollTrigger in GSAP?
play, pause, resume, reverse, complete, restart, reset, none
What does scrub do in GSAP?
scrub:true or scrub:1 (eased for mouse scrolling) scroll the element according to the scrolling.
A higher value adds delay to the scrolling.
How can you fix an animated element in gsap while using scrollTrigger, so it does not scroll with the page?
With:
pin:true,
What does pinSpacing do in GSAP’s ScrollTrigger?
pinSpacing controls whether space is added to push content down when an element is pinned.
pinSpacing: true (default)
adds padding/margin to keep the layout intact.
pinSpacing: false
removes this spacing, causing content to overlap the pinned element.
What does the pin property do in GSAP ScrollTrigger?
When pin: true is set, ScrollTrigger wraps the target element in a pin-spacer div to preserve its layout in the document flow while making it fixed. This allows the element to appear stationary while other content scrolls.
What is the purpose of the pin-spacer element in ScrollTrigger?
The pin-spacer is an automatically added wrapper element that maintains the original space occupied by the pinned element. This prevents layout shifts and keeps surrounding content in place while the element is pinned.
What padding adjustments does pin add by default?
By default, the pin-spacer wrapper includes padding to prevent visual layout changes. This padding matches the pinned element’s dimensions and offsets to simulate its original position.
What can you use to simulate vh or % for responsiveness in GSAP?
Use:
height: () => window.innerHeight * 0.7
This equals height: 70% or height: 70vh
What does the stagger property do in GSAP animations?
The stagger property allows you to animate multiple elements in sequence with a delay between each animation, creating a staggered effect.
How do you use stagger to apply a delay between each element?
gsap.to(".box", {
x: 100,
stagger: 0.2, // Delay of 0.2 seconds between each animation
});What does stagger: { each: 0.1 } do in a GSAP animation?
The each property specifies the amount of delay per element, ensuring a consistent delay between each animation.
gsap.to(".box", {
x: 100,
stagger: { each: 0.1 },
});
What is stagger: { amount: 2 } in GSAP, and how does it work?
amount defines the total duration for all the staggered animations combined. GSAP automatically divides the duration among the elements.
gsap.to(".box", {
y: 100,
stagger: { amount: 2 },
});
This animates all elements with a total stagger duration of 2 seconds.
How can you control the direction of staggered animations in GSAP?
Use the from property:
- “start” animates from the first to the last element.
- “center” animates from the middle to the edges.
- “edge” animates from the edges to the middle.
- “end” animates from the last to the first.Example:
gsap.to(".box", {
opacity: 1,
stagger: { each: 0.2, from: "end" },
});
How can you customize the point, where a transformation will happen in GSAP?
With transformOrigin
gsap.to(".truck", {
transformOrigin:"65px 160px",
rotation:-40,
repeat:1,
yoyo:true})
How can you use % values in GSAP?
With xPercent or yPercent**
e.g.
gsap.timeline()
.from("#demo", {xPercent:100})
.from("#demo", {yPercent:-100})
What are the 5 ways to offset the start time of tweens in a GSAP timeline?
var tl = gsap.timeline();
tl.to(object, {y:300}, "+=1") // start 1 second after previous tween ends
tl.to(object, {x:300}, "-=1") // start 1 second before previous tween ends
tl.to(object, {rotation:90}, "<") // start when previous tween begins
tl.to(object, {opacity:0.5}, "<1") // start 1 second after previous tween begins
tl.to(object2, {x:200}, 1) // start exactly at a time of 1How do you create and control a timeline in GSAP?
Create a timeline reference with gsap.timeline(). You can control it using:
- play() – Start or resume the timeline.
- pause() – Pause the timeline.
- restart() – Restart the timeline from the beginning.
- reverse() – Reverse the timeline direction.
var animation = gsap.timeline(); animation.play(); animation.pause();
How do you add a label to a timeline in GSAP?
Use the add() method to add a label.
animation.add("test");
Labels mark specific points in the timeline for precise control.
How do you play a GSAP timeline from a specific label?
Use the play() method with the label name:
animation.play("test");
This starts the timeline from the “test” label.
What is the purpose of using labels in a GSAP timeline?
Labels mark specific points in time within a timeline, making it easier to control or navigate to those points.
How can you set or change default values in GSAP?
With a defaults object:
e.G.
var tl = gsap.timeline({defaults:{ease:"back", opacity:0}})
How can you avoid the flash of unstyled content in GSAP?
To avoid the flash there are a few steps to take:
- Hide the <div> that contains all your elements by giving it a css style of visibility:hidden
.wrapper {
visibility:hidden;
- Wrap your animation code in an init() function.
function init() {
gsap.set(".wrapper", {autoAlpha:1})
}
- Call the init() function after the page loads using a load event listener
window.addEventListener('load', init)
How can you make sure a tween plays right after the tween before?
With ”>:
tl.from(hole, {scale:0, repeat:1, yoyo:true})
.fromTo(herman, {y:110},{y:-175}, 0.7)
.to(herman, {y:0, ease:"power1.in"}, ">")
Otherwise herman would have to wait for the hole to finish.
How can you create a hover effect on multiple items in GSAP?
With a forEach loop:
// select all items
const items = document.querySelectorAll(".item");
items.forEach((item, index) => {
const tl = gsap.timeline({paused:true})
.to(item.querySelector('.dot'), {scale: 1.5, backgroundColor:'red', duration:0.2})
.to(item.querySelector('.text'), {xPercent: 10, scale: 1.1, color:'blue', duration:0.2}, "<")
item.addEventListener('mouseenter', () => {tl.play()});
item.addEventListener('mouseleave', () => {tl.reverse()});
})
Loop through each item and ad another queryselector to get the single item.
When animating a button to scale up, how can you prevent jittering and pixelation?
First of all add
will-change: transform
Second style the element in the size it will have upscaled and scale it down. So reversed scaling.
How can you use a timeline in GSAP with keyframes?
const tl = gsap.timeline()
tl.to('.element', {
keyframes:{
"25%":{y:0},
"50%":{y:-100},
"75%":{y:0},
"100%":{x:320},
},
duration:3
})
So keyframes is an object and inside we use percentages as keys and objects as values.When using Keyframes in GSAP, how can you adjust all steps with an ease, without using it for the entire tween?
Use easeEach instead of ease
How do you select an element or multiple DOM elements using a shorthand function?
let select = e => document.querySelector(e);
or
let selectAll = e => document.querySelectorAll(e);
You than can simply select like this:
let element = select("#element");
Instead of controlling a tween or timeline how can you use your trigger to add and remove a class to the trigger element.
With toggleClass
ScrollTrigger.create({
trigger:"body",
start:"75% bottom",
toggleClass:"active"
})
How do you control a timeline by scrolling?
- create a timeline:
const tl = gsap.timeline()
.to(".elementClass", {
x: 400
}
- create the ScrollTrigger:
ScrollTrigger.create({
trigger:".elementClass",
start:"top top",
end: "bottom top",
animation: tl, // animate the time line
scrub: true, //bind animation to scroll
pin: true, // keep element in view until animation is done,
anticipatePin: 1 // for large pinned elements to make it smoother
)}
})
