this animation is starting with a delay on the first time only
you can check it on this website: fotf-frontend.vercel.app.
when a green box appears then there is a lag before the animation starts
const tl1 = gsap.timeline({
paused: true
})
tl1.to(".box", {
rotate: "45deg",
transformOrigin: "center center",
transform: "scale(40)",
duration: .5,
})
.to(".box2-content , .box-2, .shuffle-top", {
y: 0,
duration: .5,
opacity: 1
}, 0)
.to(".layers", {
y: 0,
duration: .5,
}, 0)
ScrollTrigger.create({
trigger: ".box",
start: "center center",
end: "center 49%",
scrub: 1,
onEnter: () => {
tl1.play()
},
onLeaveBack: () => {
tl1.reverse()
}
})