Jump to content
Search Community

Multiple elements Timeline

Daniel Hult test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :D 

 

Screenshot 2019-07-30 at 20.29.47.png

Screenshot 2019-07-30 at 20.32.46.png

Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...