Jump to content
Search Community

Using the same animation in two differents elements without JQuery

atcel test
Moderator Tag

Recommended Posts

In my codePen I have two icons with the same hover animation and it works independenly but altought I´m using the same class, I have the animation code twice in my Js.

I tried to use a loop but I couldn’t make it works. There is a way to use a loop without the needing of JQuery?

See the Pen NWxNrML by Atcel (@Atcel) on CodePen

Link to comment
Share on other sites

Hey atcel and welcome to the GreenSock forums.

 

7 minutes ago, atcel said:

I tried to use a loop but I couldn’t make it works. There is a way to use a loop without the needing of JQuery?

There's literally always a way to do something without jQuery :) There are lots of ways to do loops in JavaScript: for loops, while loops, .forEach, etc.

 

I would iterate through each .logotype and set things up as necessary. That way you can use the element as the scope for other selectors that you have.

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

 

For more details, I highly recommend my article on animating efficiently that goes into more detail about how to do this sort of thing, I highly recommend it.

 

Some side notes:

  • I cleaned up your HTML and CSS as I don't really understand your previous approach.
  • You're using the old formatting for GSAP. We highly recommend using the newer (and better) GSAP 3 formatting.
  • There's no point in putting the conditional reverse logic in both the mouseenter and mouseleave events. You always want it to play if it enters and always want it to reverse if it leaves.
  • Like 1
  • Thanks 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.
×
×
  • Create New...