Jump to content

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

Applying/removing element class mid-tween

Recommended Posts



So I'm making a revolving kebab sign because... well, I'm making one - let's leave it there.


I'm having trouble with the z-index of the stick element and the revolving text. I would ideally like the text to pass over the stick element at the front of the rotation, and behind it as it goes round the back.

Currently, it sits behind it at both points. I've tried a few things, but my current idea is that I can apply and remove the '.back' class (css line 55) to the stick element as the text goes round. I could use some sort of timer, but guessing gsap would be better. 

Open to any other ides for achieving this too.


See the Pen 7f11f2698f254d9134bb87073eee0aee by petegarvin1 (@petegarvin1) on CodePen

Link to post
Share on other sites

Hi @PG1,


You could use onUpdate to check the tween's progress and apply the front class where needed.


See the Pen xxOBjRz by sgorneau (@sgorneau) on CodePen


Hope this helps! 

  • Like 4
Link to post
Share on other sites

Depending on how you set it up you might be able to instead use transform-style: preserve-3d. It's best to keep elements in the same level of the DOM if you want to do this though. 


Also we recommend the GSAP 3 syntax for duration. More info here:


  • Like 1
Link to post
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.