dehlix Posted July 13, 2020 Share Posted July 13, 2020 Hello! With VueJs I'm not managing to apply ScrollTrigger animation to the array of posts I’m rendering in the page. However the same GSAP animation is working perfectly if applied to a list of div. Therefore I would assume that I’m not managing to properly get the reference to the v-for. Please any hint? Thank you! <ul> <li v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li> </ul> ... mounted: function() { this.startAnimation(); }, methods: { startAnimation: function() { ScrollTrigger.defaults({ toggleActions: "restart pause resume none", markers: true }); gsap.utils.toArray(".box").forEach((el, i) => { gsap.to(el, { scrollTrigger: { trigger: el, scrub: i * 0.2 }, x: "400px" }); console.log(i, "hello there"); }); } } ... Link to comment Share on other sites More sharing options...
GreenSock Posted July 13, 2020 Share Posted July 13, 2020 This sounds more like a Vue question, and I'm not familiar with it enough to offer advice here. We really try to keep these forums focused on GSAP-specific questions. Did you make sure you loaded ScrollTrigger and registered it like gsap.registerPlugin(ScrollTrigger)? Link to comment Share on other sites More sharing options...
OSUblake Posted July 13, 2020 Share Posted July 13, 2020 Hard to say what your issue is without seeing a demo, but you should not be using selectors. Use refs as they are local to the instance. Using a selector searches the entire DOM. <ul> <li ref="post" v-for="post in posts" :class="box" :key="post._id">{{ post.title }}</li> </ul> mounted() { this.startAnimation(); }, methods: { startAnimation() { ScrollTrigger.defaults({ toggleActions: "restart pause resume none", markers: true }); this.$refs.post.forEach((el, i) => { gsap.to(el, { scrollTrigger: { trigger: el, scrub: i * 0.2 }, x: "400px" }); console.log(i, "hello there"); }); } } 1 Link to comment Share on other sites More sharing options...
dehlix Posted July 13, 2020 Author Share Posted July 13, 2020 ScrollTrigger is registered and loading properly, animations on other elements is working fine! Yes ultimately it's a Vue inherent question. I'll try to follow your suggestion to use refs. thank you! Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 13, 2020 Share Posted July 13, 2020 Seems to work great, it really helps if you get a codepen demo ready See the Pen jOWpLoL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
dehlix Posted July 13, 2020 Author Share Posted July 13, 2020 👍 wonderful. thank you! 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