Nysh Posted January 19, 2021 Share Posted January 19, 2021 Hey guys, Im trying to make an 2 image gallery/accordion in which the the hovered image expands and and the non hovered reduces in width. I've created a minimal demo of my approach, but i'm getting a "jump" when the mouse goes from one image to the other. I'm assuming this is because of the "fromTo". Wasn't sure how to go about it, if i needed to clearProps? Simple Criteria: - When the user mouse leaves completely, both images should return to their initial width (50%). - If the user moves from one image to the other, the widths should adjust smoothly. Sorry if this has already been asked. Any help to smooth out the effect would be greatly appreciated. Thanks a bunch Nish See the Pen WNGmNgZ by Nysh (@Nysh) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 Hey @Nysh, This could be an alternative See the Pen WNGmQvG by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
Nysh Posted January 19, 2021 Author Share Posted January 19, 2021 yooo~ that's so slick~ Thank you @mikel! That approach is so much better and cleaner. I applied it to my original width animation and now it works perfectly. Thanks again legend !! here's the updated codepen~ See the Pen PoGLNWX by Nysh (@Nysh) on CodePen 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