add the class to the element the class is add, but animation don't work

[Talha Meer]

Hi there, I'm facing an issue, when I add the class to the element the class is add, but animation don't work. Please check the CodePen.

Thanks in advance.

See the Pen abYYKEL by talhameer (@talhameer) on CodePen

[Cassie]

Hi Talha,

 

You're creating the GSAP animations first, when there are no icons with the class of animation and then adding a class afterwards so it won't have any effect.

We usually suggest creating an animation and then using GSAP's control methods to play, reverse or pause the animation on interaction. Good luck!

See the Pen PoqRZOB by GreenSock (@GreenSock) on CodePen

[h-amad]

On 8/4/2022 at 6:03 PM, Cassie said:

Hi Talha,

 

You're creating the GSAP animations first, when there are no icons with the class of animation and then adding a class afterwards so it won't have any ef

We usually suggest creating an animation and then using GSAP's control methods to play, reverse or pause the animation on interaction. Good luck!
 

 

 

 

Hi Cassie; I am pretty new to this

do you know if it is possible to use this code but instead of transform animation  (i.e. yPercent) we change Position ? (i.e. position: relative to position:absolute) ? 

basically it will be position absolute when mouse is out, then become position:relative when mouse in hovering on. 

[Rodrigo]

Hi @h-amad and welcome to the GreenSock forums!

 

You can update the position using GSAP, just keep in mind that the position property cannot be animated:

const myElement = document.getElementById("myElement");

myElement.addEventListener("mouseenter", () => {
  gsap.set(myElement, { position: "relative" });
  /* Then create the animation */
});

Hopefully this helps. If you have more questions please remember to include a minimal demo so we can take a better look at what could be the problem.

Happy Tweening!

[h-amad]

Thanks allot @Rodrigo