Multiple elements Timeline

[Daniel Hult 4 Likes (Newbie)]

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  

 

[ZachSaucier 467 Likes (Leader)]

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.

[Daniel Hult 4 Likes (Newbie)]

Hey! Thank you for the reply. I made a Codepen for the problem here:
codepen.io/daniel-hult/pen/qembjY

Hope this helps

[ZachSaucier 467 Likes (Leader)]

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

[Daniel Hult 4 Likes (Newbie)]

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?

[ZachSaucier 467 Likes (Leader)]

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? 

[Daniel Hult 4 Likes (Newbie)]

Sorry, here is the error showing the file. Also just importing it like normal.

[Daniel Hult 4 Likes (Newbie)]

Im not allowed to upload anymore media for some reason.

[GreenSock 8,117 Likes (Superhero)]

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. 

[OSUblake 9,990 Likes (Superhero)]

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.