Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

Is it possible tore-use timelines for elements with the same classes

Recommended Posts

This is a general GSAP/JS question.

 

In this example, when the user hovers over each image, a short gsap timeline is played. Because there are 4 separate images there are 4 separate timelines/event listeners calling elements' specific id's.

 

Because all 4 elements have a same class property is it possible to create one timeline and one event listener for all elements with this class. (So when slight adjustments to timeline are made, I don't need to copy and past for every element that uses the same animation?) When I try this only the first one works. Hopefully this makes sense, I can explain in a different way. Thanks! 

See the Pen QWpgNrP by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

Ah, yeah, this is a hurdle everyone hits - it's even in the 'most common GSAP mistakes'
 



See the Pen mdVPOQV?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

aaa yes thanks for pointing me to this, looping i imagine would achieve this as well

Link to comment
Share on other sites

forEach is just a fancy for loop really ☺️

  • Like 2
Link to comment
Share on other sites

giphy.gif

  • Like 1
  • Haha 2
Link to comment
Share on other sites

Hey it's me. *sips tea*

  • Haha 3
Link to comment
Share on other sites

i prefer the fancy version ;)

  • Haha 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.

×