GSAP

Question 1

What are the three primary methods of the GSAP object for creating tweens?

Answer 1

gsap.to(), gsap.from(), and gsap.fromTo(). These methods animate properties over time.

Question 2

What does a tween do in GSAP?

Answer 2

A tween animates a property of an object over time, specifying targets, properties, and optional special properties like duration.

Question 3

How is the x or y property used in GSAP animations?

Answer 3

It is a shorthand for the CSS translateX or translateY property, used to move elements along the horizontal axis.

Question 4

What are staggered animations in GSAP?

Answer 4

They animate multiple objects with delayed start times using the stagger property.

Question 5

What is a GSAP timeline?

Answer 5

A container for multiple tweens, enabling sequencing, overlap, nested timelines, and repeat delays.

Question 6

What is the basic syntax for a gsap.to() tween?

Answer 6

gsap.to(".fred", { x: 400 });

This animates the element with the class “fred” to an x position of 400.

Question 7

For best performance, which CSS properties should you animate with GSAP?

Answer 7

1. x
2. y
3. rotation
4. rotationX
5. rotationY
6. skewX and skewY
7. scaleX, scaleY, or scale

Question 8

What does the delay property do in GSAP?

Answer 8

The delay property specifies how much time should transpire before the animation begins.

Question 9

What does the repeat property do in GSAP?

Answer 9

The repeat property defines how many times the animation should repeat.

Question 10

What happens if you set repeat: -1 in GSAP?

Answer 10

The animation will repeat indefinitely.

Question 11

How can you play an animation back and forth in GSAP?

Answer 11

With yoyo set to true:

yoyo: true,

Question 12

How can you delay, when an animation repeats in GSAP?

Answer 12

The repeatDelay property specifies how much time should transpire between each repeat of the animation.

Question 13

What does the start property in ScrollTrigger define? (GSAP)

Answer 13

The start property defines when the animation begins relative to the scroll position. Example: “start”: “top 75%”.

Question 14

What does “start”: “top top” mean in ScrollTrigger? (GSAP)

Answer 14

It means the top of the trigger element matches the top of the viewport (default behavior).

Question 15

What does the end property in ScrollTrigger do? (GSAP)

Answer 15

The end property defines when the animation ends relative to the scroll position.

Question 16

How can you set an absolute end value in ScrollTrigger? in GSAP

Answer 16

By using a relative value like “end”: “+=500”, which ends 500px after start.

Question 17

What does toggleActions control in ScrollTrigger? in GSAP

Answer 17

It controls the behavior when the trigger point is crossed - “onEnter, onLeave, onEnterBack, onLeaveBack”.

Question 18

Which 8 toggleActions can be used for the scrollTrigger in GSAP?

Answer 18

play, pause, resume, reverse, complete, restart, reset, none

Question 19

What does scrub do in GSAP?

Answer 19

scrub:true or scrub:1 (eased for mouse scrolling) scroll the element according to the scrolling.

A higher value adds delay to the scrolling.

Question 20

How can you fix an animated element in gsap while using scrollTrigger, so it does not scroll with the page?

Answer 20

With:

pin:true,

Question 21

What does pinSpacing do in GSAP’s ScrollTrigger?

Answer 21

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.

Question 22

What does the pin property do in GSAP ScrollTrigger?

Answer 22

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.

Question 23

What is the purpose of the pin-spacer element in ScrollTrigger?

Answer 23

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.

Question 24

What padding adjustments does pin add by default?

Answer 24

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.

Question 26

What can you use to simulate vh or % for responsiveness in GSAP?

Answer 26

Use:

height: () => window.innerHeight * 0.7

This equals height: 70% or height: 70vh

Question 27

What does the stagger property do in GSAP animations?

Answer 27

The stagger property allows you to animate multiple elements in sequence with a delay between each animation, creating a staggered effect.

Question 28

How do you use stagger to apply a delay between each element?

Answer 28

gsap.to(".box", {
  x: 100,
  stagger: 0.2, // Delay of 0.2 seconds between each animation
});

Question 29

What does stagger: { each: 0.1 } do in a GSAP animation?

Answer 29

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 },
});

Question 30

What is stagger: { amount: 2 } in GSAP, and how does it work?

Answer 30

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.

Question 31

How can you control the direction of staggered animations in GSAP?

Answer 31

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" },
});

Question 32

How can you customize the point, where a transformation will happen in GSAP?

Answer 32

With transformOrigin

gsap.to(".truck", {
  transformOrigin:"65px 160px",
rotation:-40,
repeat:1,
yoyo:true})

Question 33

How can you use % values in GSAP?

Answer 33

With xPercent or yPercent**

e.g.

gsap.timeline()
         .from("#demo", {xPercent:100})
         .from("#demo", {yPercent:-100})

Question 34

What are the 5 ways to offset the start time of tweens in a GSAP timeline?

Answer 34

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 1

Question 35

How do you create and control a timeline in GSAP?

Answer 35

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();

Question 36

How do you add a label to a timeline in GSAP?

Answer 36

Use the add() method to add a label.

animation.add("test");

Labels mark specific points in the timeline for precise control.

Question 37

How do you play a GSAP timeline from a specific label?

Answer 37

Use the play() method with the label name:

animation.play("test");

This starts the timeline from the “test” label.

Question 38

What is the purpose of using labels in a GSAP timeline?

Answer 38

Labels mark specific points in time within a timeline, making it easier to control or navigate to those points.