GSAP Flashcards

Question

Answer 1

Use: ``` height: () => window.innerHeight * 0.7 ``` This equals **height: 70%** or **height: 70vh**

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

**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.

Answer 6

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

Answer 7

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

Answer 8

With **xPercent** or yPercent** e.g. ``` gsap.timeline() .from("#demo", {xPercent:100}) .from("#demo", {yPercent:-100}) ```

Answer 9

``` 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 ```

Answer 10

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

Answer 11

Use the **add()** method to add a label. ``` animation.add("test"); ``` Labels mark specific points in the timeline for precise control.

Answer 12

Use the play() method with the label name: ``` animation.play("test"); ``` This starts the timeline from the "test" label.

Answer 13

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

Answer 14

With a **defaults** object: e.G. ``` var tl = gsap.timeline({defaults:{ease:"back", opacity:0}}) ```

Answer 15

To avoid the flash there are a few steps to take: 1. Hide the

that contains all your elements by giving it a css style of **visibility:hidden** ``` .wrapper { visibility:hidden; ``` 2. Wrap your animation code in an **init()** function. ``` function init() { gsap.set(".wrapper", {autoAlpha:1}) } ``` 3. Call the **init()** function after the page loads using a load event listener ``` window.addEventListener('load', init) ```

Answer 16

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.

Answer 17

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.

Answer 18

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.

Answer 19

``` 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. ```

Answer 20

Use **easeEach** instead of **ease**

Answer 21

``` let select = e => document.querySelector(e); ``` or ``` let selectAll = e => document.querySelectorAll(e); ``` You than can simply select like this: ``` let element = select("#element"); ```

Answer 22

With **toggleClass** ``` ScrollTrigger.create({ trigger:"body", start:"75% bottom", toggleClass:"active" }) ```

Answer 23

1. create a timeline: ``` const tl = gsap.timeline() .to(".elementClass", { x: 400 } ``` 2. 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 )} }) ```