Jump to content
Search Community

Multiple scroll trigger start issue

Femil32
Moderator Tag

Recommended Posts

Posted

https://stackblitz.com/edit/vitejs-vite-vxs8dne3?file=tailwind.config.js

I have two section using scrolltrigger in same page. I have wrap the inside .home-wrapper  and the i have two separate components  but second component scrolltrigger start before the first one end.

Actually what i want is this trigger should fire if only that section in view. First section has horizontal scroll and second section with scrolltrigger has progressive tabs which change as per scroll.

See the Pen by (@) on CodePen.

Posted

image.png
Sorry! I clicked the link but can't access that project. Maybe your sharing settings are wrong?

Posted

Heya!

 

just a small thing - but this isn't really a usual thing for me to see. Not sure what you're trying to do here? If you let me know maybe I can help.
 

tl.to({}, {})


In terms of your markers, you have a lot going on here so it's a little tricky for me to edit. But you're using the main wrapper as a trigger in both of these components and pinning it in both of the components, so it's going to conflict.

You likely need to pin each section individually. Something like this.

https://stackblitz.com/edit/vitejs-vite-2nbtyb3v?file=src%2Fcomponents%2Fservices.tsx,src%2Fcomponents%2FProjects.tsx

Hope this helps!

  • Like 1
Posted

Thank you so much it's works but i just have one doubt as you can see in below image in small screen red section commin under the hood, but if i pin both element to `home-wrapper` as i was doing in first place (which is causing bug) then slider only take required hight and red section show under the slider instead scroll from bottom 

image.png

Posted

Hi,

 

I'm not sure I follow 100% what's going on here or what your issue actually is, but your setup is a bit large for a minimal demo and unfortunately we don't have the time resources to go through all that trying to figure out what could be the problem.

 

I made this simple demo in React that seems to work as expected and emulates a bit your setup (if I'm understanding it correctly of course) :

https://stackblitz.com/edit/vitejs-vite-tkchv4ly

 

Hopefully this helps

Happy Tweening!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...