Mohamedgad Posted May 7, 2021 Share Posted May 7, 2021 Hello, The Animation That I Want To Achieve is Already Work When I Hover On The Top <p> And When The Mouse Leave it ( That's For That First Time Only ), But I Want The Sequence To Start over Everytime I Hover Again And Mouse Leave. I Don't Want To reverse it. Thanks. See the Pen XWMJEoP by Mohamed-Gad (@Mohamed-Gad) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 7, 2021 Share Posted May 7, 2021 You need to toggle the z-index to make sure the right one is on top, and you can't just play() each time because once the playhead reaches the end, play() just makes it keep going forward but there's nowhere for it to go. I assume you meant restart(). Here's a more dynamic way to handle it: See the Pen abJzaxd?editors=0010 by GreenSock (@GreenSock) on CodePen Happy tweening! 1 Link to comment Share on other sites More sharing options...
Mohamedgad Posted May 8, 2021 Author Share Posted May 8, 2021 That's Amazing! the Code is a bit confusing for me but its really what I was looking for, thank you so much for your help. I appreciated. Link to comment Share on other sites More sharing options...
Mohamedgad Posted May 31, 2021 Author Share Posted May 31, 2021 hello again, I have an annoying issue with this topic I was trying to fix it as it looks easy but I tried lot of ways but didn't able to fix it. after the black overlay take higher z-index , the white overlay edges which is below it shown as the example on the attached image. both are 100% width and highest and both took same position: absolute left & bottom: 0, I don't understand why that happen. my page background color is black. can u advice thanks. Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 Hi, could you post a demo? it's very hard to tell what's happening from a screenshot. Thanks. 1 Link to comment Share on other sites More sharing options...
Mohamedgad Posted May 31, 2021 Author Share Posted May 31, 2021 after hover the box as examples posted before the white overlay edges below the black overlay is revealed and give the feel the box have a border which is not what I want. thanks for help in advance. Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2021 Share Posted May 31, 2021 A code demo please - not a video. I can't tell what you're doing with your code just by looking at pictures! Link to comment Share on other sites More sharing options...
Mohamedgad Posted May 31, 2021 Author Share Posted May 31, 2021 Sorry for the inconvenience, I will create it on codepen and post it. thanks again. 1 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