Need to increase duration of timeline autoplayed by scrolltrigger

[virtualvinay]

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

 

 

Edited August 11, 2021 by Vinay Acharya

[virtualvinay]

I have managed to increase the duration by reducing the timescale. But how can i overlap each element animation using the same setting?

[Cassie]

 

Hey there Vinay,
 

Would you be able to put together a minimal demo on codepen for us?

It's hard to debug or advise on animation without seeing what's happening visually.

For overlapping animation - maybe you're looking for the position parameter?

 

 

 

 

 

[virtualvinay]

Thank you for the prompt reply. Yeah it was the position parameter. I completely missed out the fact that by default the timeline duration is 1 and i was giving < 3 or <5 for each timeline. Thank you @Cassie

[Cassie]

Glad you got it sorted