Every box starts out with opacity:0 and fades in one after the other using a basic stagger.
const fadeInAll = gsap.from(".fadeInAll .box", { opacity: 0, stagger: 0.5 });
Every box fades in and then fades out one after the other.
This technique uses a single fromTo() tween that has its repeat set in the stagger object.
const tween = gsap.fromTo(".box", {opacity:0},
{opacity: 1,
stagger: {
each: 1,
repeat: 1,
yoyo: true
}
}
);
Every box fades in and then fades out one after the other.
This technique uses a timeline with 2 overlapping stagger tweens.
const tl = gsap.timeline()
.from(".box", {opacity:0, stagger:1})
.to(".box", {opacity:0, stagger:1}, 0.5)
Every box fades in and then fades out one after the other.
This technique uses a loop to add 2 tweens to a timeline for each box.
const tl = gsap.timeline()
const boxes = gsap.utils.toArray(".box")
boxes.forEach((box, index) => {
tl.from(box, {opacity:0})
.to(box, {opacity:0})
})
Every box fades in and then fades out but the last box does not fade out.
This technique uses a loop with a condition that checks for the last box. The last box will not have a fade out animation applied.
const tl = gsap.timeline()
const boxes = gsap.utils.toArray(".box")
boxes.forEach((box, index) => {
tl.from(box, {opacity:0})
//don't fade out last box
if(index < boxes.length-1) {
tl.to(box, {opacity:0})
}
})
Every box fades in and then fades out but the last box does not fade out.
This technique builds a timeline with 2 stagger tweens. The fade out stagger uses a fancy css selector to not select the last box.
const tl = gsap.timeline()
.from(".box", {opacity:0, stagger:1})
.to(".box:not(:last-of-type)", {opacity:0, stagger:1}, 0.5)
The first box starts fully visible and fades out. The last box does not fade out.
This technique uses a loop with conditions that check for the first and last box. The first box skips the fade in and the last box skips the fade out animation.
const tl = gsap.timeline()
const boxes = gsap.utils.toArray(".box")
boxes.forEach((box, index) => {
//don't fade in first
if(index != 0) {
tl.from(box, {opacity:0})
}
//don't fade out last box
if(index < loopBoxes.length-1){
tl.to(box, {opacity:0})
}
})
A timeline is built that fades in and out every box
A separate tween is created using tweenFromTo() that scrubs the timeline's playhead from a time of 0.5 to 0.5 seconds from the end.
0.5 seconds is the time the first box is fully visible
0.5 seconds from the end (tl.duration() - 0.5) is the time that the last box is fully faded in.
const tl = gsap.timeline()
.from(".box", {opacity:0, stagger:1})
.to(".box", {opacity:0, stagger:1}, 0.5)
const scrub = tl.tweenFromTo(0.5, tl.duration() - 0.5)