Jake H Posted April 8 Share Posted April 8 I'm trying to get ScrollTrigger to work in my Vue 3 SPA. The page layout is: <body> <div id="#app"> <div class=".scrollable"> <div class=".content"></div> </div> </div> </body> The catch is that #app and .scrollable both have height: 100vh, and .scrollable has overflow: auto. Unfortunately, it looks like ScrollTrigger is only listening for scroll events on body. Here's a minimal example that demonstrates the problem: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-k8qmt8?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A17%2C7 [EDIT: above demo is now working, thanks to the answer below.] Is this a known limitation, or am I missing something? I'm new to GSAP, so probably — hopefully — the latter! Thanks. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 8 Solution Share Posted April 8 Hi @Jake H and welcome to the GSAP Forums! You can tell ScrollTrigger to listen for scroll events in other elements with the scroller config property, no problemo! From the ScrollTrigger Docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. It would be something like this: onMounted(() => { // Slide "Hello #20" rightward when it's centered. const tl = gsap.timeline({ scrollTrigger: { trigger: ".hello-20", start: "top center", end: "+=100", scroller: ".tall-component", markers: true, }, }); tl.to(".hello-20", { x: 30 }); }); Here is a fork of your demo: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-forked-hddg9j?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A20%2C25 Is worth noticing though that the center of your scroller element is waaay below the fold so your animation happens immediately, so I would look into enhancing the styles accordingly to make this work the way you want/need. Hopefully this helps Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Jake H Posted April 8 Author Share Posted April 8 Wow, how did I miss that?? The scroller property is indeed exactly what I needed. Thank you. And yep, you're right that people with taller monitors than my laptop would have the animation happen immediately. I tweaked the demo to fix that. 1 Link to comment Share on other sites More sharing options...
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