First scroll with scrolltrigger and then draggable for other sections

[virtualvinay]

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

[Cassie]

Hi there Vinay,

Your example is very flickery and buggy for me on desktop too.

Maybe this thread will help you with a different approach?
 

 

[virtualvinay]

@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

[Cassie]

Ok - just a few guesses,

You have a var for pageHeight here - maybe that needs to exclude the first section?

var pageHeight = $(window).innerHeight()

 

You're also doing updates onDrag instead of onDragEnd - ondrag fires *loads*, whereas onDragEnd fires at the end of the drag action.

I suggest looking back over the demo I linked to and seeing how Craig is doing it. From a cursory glance he uses onDragEnd and his calculations are different to yours. There will definitely be takeaways that will help you.

[virtualvinay]

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

[Cassie]

In your demo the middle section is using scrollTrigger and also draggable.

Are you saying you just want that section to use draggable, and the previous and subsequent section to use scrollTrigger?

[virtualvinay]

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.

[Cassie]

Yeah, I'm sorry Vinay - I don't really know how to help beyond telling you to look into your logic and the onDrag event.

The thread I provided has really solid working demos in it. I'm afraid we don't have the resources to look through your pen and fix logic issues.

 

Draggable and ScrollTrigger can play nicely together - as demonstrated in that other thread.

 

We offer custom consulting if that's something you're interested in, failing that maybe someone in our freelance forum can help?