Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Multiple elements Timeline

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

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

Hope this helps :D

  • Thanks 1
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

Thank you very much! All working nice now :D

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?1938689407_Screenshot2019-07-30at22_56_18.thumb.png.913eebe471e0ae7d6b2abc98d5fdedd2.png

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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

img1.thumb.jpg.b0dd118f9b297b611e4d8bdeeb982587.jpg

Link to comment
Share on other sites

Im not allowed to upload anymore media for some reason.

Link to comment
Share on other sites

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

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 1
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.
×