Hi,
I have a page with multiple sections (fullscreen) , each section has text and image animations.
I have managed to get the animations played automatically as soon as the section is triggered. But these timelines cannot have duration to each elements as scrolltrigger then treats them to animate as per user scroll.
Can you please help me, how can i give a duration to the timeline so that the animation is smooth and not fast.
Below is the code snippet of what i am using
gsap.utils.toArray(".panel").forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
snap: "labelsDirectional",
id:"scroll-top"+i,
//markers: true,
start: "top 80%",
onEnter: () => goToSection(i)
});
ScrollTrigger.create({
trigger: panel,
snap: "labelsDirectional",
id: "scroll-bottom" + i,
//markers: true,
end: "center top",
onEnterBack: () => goToSection(i)
});
});
let openingSlide = gsap.timeline({
scrollTrigger: {
trigger: "#start",
start: "top top",
pin: true,
scrub: true
}
});
openingSlide.addLabel("start")
.to(".hmbanner-overlay", { duration: 10, opacity: 0.2 })
.to(".sun-icon", { duration: 5, top: 0 }, "<")
.to(".hmbanner-first-slide", { duration: 10, opacity: 0 }, ">")
.to(".horzline", { duration: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, ">-0.5")
.to(".appear-border", { duration: 10, opacity: 1 }, "<9")
let switchesSlide = gsap.timeline({ // this type of timeline is being created for all other sections.
scrollTrigger: {
trigger: "#switches",
start: "top 5%",
toggleActions: "play none none reverse",
onEnter: () => {
switchesSlide.timeScale(1.2);
},
onEnterBack: () => {
switchesSlide.timeScale(2);
},
}, duration:10
});
switchesSlide.addLabel("switch-blocked")
.from('.switchvdobg', { opacity: 0})
.to('.switchvdobg img', { x: totLength, ease: "steps(38)"})
.from("#switches h2", {opacity: 0, y: 60 })
.from("#switches .borderbtn", {opacity: 0, y: 60 })