[First scroll with scrolltrigger and then draggable for other sections]

No in my demo the scroll (native scroll) and draggable is used. On scroll, It checks the current and the next/prev page and accordingly snaps to the viewport. I am using ScrollTrigger specifically only on the first section in this demo.

[First scroll with scrolltrigger and then draggable for other sections]

Hi @Cassie

Thanks for the reply, but as i said this is working fine when there is no scrolltrigger. But i guess i couldn't explain my requirement, my bad. Will try again.  As in the codepen i want to use both scrolltrigger and draggable plugins. I had done the same template using scrolltrigger, which jitters badly on mobile when a section is being snapped and swiped too fast. so i thought of mixing scrolltrigger and draggable, which is where i am stuck, how to implement both in different sections. For example the first section animations are done using scrolltrigger and then rest of the sections are dragged and on DragEnd the animations happen. then the bottom sections again scrolltrigger has to be called.

Hope i am clear on my query.

 

Thanks

[First scroll with scrolltrigger and then draggable for other sections]

@Cassie yeah thats because i have added scrolltrigger to it. I have used the same example for my project.

If i remove the section that has scrollbased animations, my example also runs as smooth as the one you had pointed out.

My issue is to run both scrolltrigger and draggble plugin on sections. first section animation is loaded on scrollrigger and rest of the section's animations are loaded using draggable plugin

[First scroll with scrolltrigger and then draggable for other sections]

Hi,

 

I have a page with multiple sections, all the sections have inner animations, but the first section has to be scrolled to view the animations and then each sections are snapped and the animations would happen automatically. This code works fine on desktop when i scroll using mousewheel though there is a flicker while going in and out of the first section. But on mobile when i swipe it flickers a lot and doesnot snap properly.

 

Can anyone help me on this.

See the Pen MWmNVdq by vinayvasu (@vinayvasu) on CodePen

[Need to increase duration of timeline autoplayed by scrolltrigger]

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

[Need to increase duration of timeline autoplayed by scrolltrigger]

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

[Need to increase duration of timeline autoplayed by scrolltrigger]

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

 

 

[ScrollTrigger and smooth-scrollbar jumps to first slide]

Thank you @akapowl that worked, since i have many animations in each slides, i would need to give snap as a an array. Which i did and it worked.

Thank you very much again.

[ScrollTrigger and smooth-scrollbar jumps to first slide]

Hi,

There seems to be an issue with my scrolltrigger or timelines, the moment i stop scrolling the page and i am in the middle of the slide, it jumps to the first slide. Quite weird as this doesn't happen in example is saw on codepen : 

See the Pen oNLqgBm by GreenSock (@GreenSock) on CodePen

 

As i see the difference in the example, is the scrolltrigger is being called in the tweens (to/from) whereas in mine i am putting it in the timeline and the tweens are kept separate as i have multiple animations in each of my slides.

 

Can anyone help me figure out whats going wrong with my code.

 

Thanks in advance.

 

See the Pen WNjgMNW by vinayvasu (@vinayvasu) on CodePen

[How to migrate this parallax example to GSAP3]

Thanks @OSUblake for the quick reply.

I will definitely go through the migration guide.

[How to migrate this parallax example to GSAP3]

Hi,

I am new to GSAP and wants to create this type of animation for one of my project.

I am using this example in a section of my page which is triggered using scrollTrigger.

Can you pls help me?

See the Pen BayZGMq by jenya (@jenya) on CodePen