Scroll trigger is not working when body overflow is hidden

[deepdas]

Hey there, 
Scroll trigger is not working when body overflow is hidden. I want the circle  to move from top to bottom following the svg motionPath on mouse wheel. Is there any way to make this work?

See the Pen OJdxREP by prosun05 (@prosun05) on CodePen

[Rodrigo]

Hi @deepdas and welcome to the GSAP forums!

 

Maybe the Observer Plugin is what you're looking for:

https://gsap.com/docs/v3/Plugins/Observer/

 

It has to be expected that ScrollTrigger is not going to do much in this case. ScrollTrigger doesn't watch the specific wheel/touch event but the scroll position in order to update the progress of a Tween/Timeline according to the start and end points you feed to it.

 

Observer on the other hand seems a perfect fit if you remove the overflow of the body tag and want to trigger animations based on specific events.

 

Hopefully this helps.

Happy Tweening!

[deepdas]

Hi @Rodrigo

 

Thank you for the suggestion.
 

The overflow hidden is required here as no scroll bar is needed on the page.

 

I am new to GSAP so can you please provide us an example for the implementation of  the observer plugin?

 

It will be really helpful for me.

 

Thanks in Advance.

[Rodrigo]

In the link I provided in the previous post there is an example of how Observer works.

 

Also we have a getting started guide that you should read since you're new to GSAP:

https://gsap.com/resources/get-started

 

Happy Tweening!

[Rodrigo]

Also take a look at the demos in this codepen collection

 

https://codepen.io/collection/KpNYOd

 

Happy Tweening!

[deepdas]

Hi, 

if you remove this code 
 

scrollTrigger: {
        trigger: '.wrapper',
        start: 'top top',
        end: "bottom top",
        scrub: 1
    } 

 

svg motionPath works fine  but i need this on mouse wheel.

When i move the mouse wheel,  the blue circle movement depends on mouse wheel and the blue ball will stop movement when i stop scrolling the mouse wheel.

After the blue ball reaches the right bottom area of the page then the blue ball starts again on the top left.

Can you please create a demo for me it will be very help full for me.

 

 

 

 

 

Thank You 

[GreenSock]

We don't normally create all the logic for you and implement the solution, but here you go: 

See the Pen LYqePzq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?