PG1 Posted November 16, 2020 Share Posted November 16, 2020 Hi, 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. Cheers See the Pen 7f11f2698f254d9134bb87073eee0aee by petegarvin1 (@petegarvin1) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted November 16, 2020 Share Posted November 16, 2020 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! 4 Link to comment Share on other sites More sharing options...
PG1 Posted November 16, 2020 Author Share Posted November 16, 2020 Perfect! thanks so much Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 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: 1 Link to comment Share on other sites More sharing options...
PG1 Posted November 17, 2020 Author Share Posted November 17, 2020 thanks for this! Link to comment Share on other sites More sharing options...
PG1 Posted November 17, 2020 Author Share Posted November 17, 2020 This is where I got to: See the Pen YzWgrEp by petegarvin1 (@petegarvin1) on CodePen Thanks for the help Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now