Femil32 Posted January 9 Posted January 9 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.
Cassie Posted January 9 Posted January 9 Sorry! I clicked the link but can't access that project. Maybe your sharing settings are wrong?
Femil32 Posted January 9 Author Posted January 9 1 hour ago, Cassie said: Sorry! I clicked the link but can't access that project. Maybe your sharing settings are wrong? Sorry for broken link Here is new link https://stackblitz.com/edit/vitejs-vite-vxs8dne3?file=tailwind.config.js
Cassie Posted January 9 Posted January 9 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! 1
Femil32 Posted January 10 Author Posted January 10 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
Rodrigo Posted January 10 Posted January 10 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!
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now