Share Posted July 30, 2019 Hi! Im building a site with Vue/Nuxt and in one of the components I have an expand effect that reveal some person info below a photo of a person. The persons are inside a loop, so it will output like 4-5 persons on the page. At the moment the timeline I have setup with GSAP works - but it affect ALL the persons at once (it reveal each persons content when the timeline is activated). I want it to only show the current persons info. Just wondering how I play/reverse the same timeline on multiple elements? Attaching some pictures of the Vue loop and the timeline with GSAP. Thank you Link to comment Share on other sites More sharing options...
Share Posted July 30, 2019 Hey Daniel, If you pass a general selector into a GSAP call GSAP will animate everything that you pass into it. You just need to pass in a selector for the specific one you want to affect in the timeline. How you do so depends on your setup. Likely a good way would be to use the element reference of the event to only animate things related to that element. If you'd like more clear instructions, I think it'd be good to create a minimal demo of your issue in a CodePen. See the below post for more information on how to do that. P.S. You don't need to pass in a nodelist (what querySelectorAll gives you) - you can just pass in a string and GSAP will call querySelectorAll on that string if you want to. Link to comment Share on other sites More sharing options...
Author Share Posted July 30, 2019 Hey! Thank you for the reply. I made a Codepen for the problem here: codepen.io/daniel-hult/pen/qembjY Hope this helps 1 Link to comment Share on other sites More sharing options...
Share Posted July 30, 2019 Thanks so much for the demo! It shows your setup very well. I'd do something like this: See the Pen rXmxqY?editors=0010 by GreenSock (@GreenSock) on CodePen The same approach can be used if you need to use a timeline (such as needing to pause/revert the animation or something like that): See the Pen EqmPGL?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 30, 2019 Thank you very much! All working nice now Just one more thing if you can answer this.. As soon as I try to import ScrollToPlugin, my page breaks and throws me an error (image attached). Do you have any idea why this is happening? Link to comment Share on other sites More sharing options...
Share Posted July 30, 2019 3 minutes ago, Daniel Hult said: Do you have any idea why this is happening? None of those files shown show anything related to ScrollToPlugin. Can you provide more details about how you're importing it? 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 30, 2019 Sorry, here is the error showing the file. Also just importing it like normal. Link to comment Share on other sites More sharing options...
Author Share Posted July 30, 2019 Im not allowed to upload anymore media for some reason. Link to comment Share on other sites More sharing options...
Share Posted July 30, 2019 It's super difficult to troubleshoot by just looking at little snippets of code - I wonder if you just need to add type="module" on your <script> tag(?) Typically script tags are NOT treated as modules (thus can't understand imports) in browsers. Link to comment Share on other sites More sharing options...
Share Posted July 30, 2019 2 hours ago, ZachSaucier said: You don't need to pass in a nodelist (what querySelectorAll gives you) - you can just pass in a string and GSAP will call querySelectorAll on that string if you want to. I would highly recommend not doing that for any framework (Vue, React, Angular, etc). querySelector/querySelectorAll can be very problematic with components. Using $refs is the correct approach for selecting elements in Vue. 38 minutes ago, GreenSock said: I wonder if you just need to add type="module" on your <script> tag(?) Typically script tags are NOT treated as modules (thus can't understand imports) in browsers. No, that's a Vue file, and it is not an actual script tag. That's all the support I can offer as I'm on mobile right now. 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