diewaves Posted January 31 Share Posted January 31 Hi all! I'm trying to create this reveal image animation on hover of each word. It almost do it but for some reason the rotation only works for the first item. I've tried so many ways. I've lost the count. Event GPT chat isn't fiding the error. There is another problem with the image translateX. I need to translate the inner wrapper, but the image needs to be in the same position, like it was a background. I've tried to make it with timelines, but i didn't get it. Please, I need your wisdom! See the Pen JjzLjzN by Diego-Diewaves (@Diego-Diewaves) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 31 Solution Share Posted January 31 Hi, I'm having some issues following your code. For example why are you adding a mouse move event to the window object for every image? That seems quite wasteful IMHO. Why not just one mousemove event for all the images or a mouse move event listener for every image wrapper, seems a better and more efficient approach TBH 🤷♂️ I think this thread provides a solid starting point for this effect, especially the posts and demos by @nico fonseca and @akapowl Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 Hi Rodrigo! You are right. My intention was to get this animation by myself: https://tympanus.net/Tutorials/RapidImageHoverMenu/ I wanted to do it simpler, without modules or classes, but I've gotten more and more messed and now it has a lot of issues. I'll start from scratch. Thanks for your help. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 2 Share Posted February 2 2 hours ago, diewaves said: I'll start from scratch. Yeah I strongly suggest you to check the demos by @nico fonseca and @akapowl they are a solid starting point. Happy Tweening! Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 Wow! Thank you so much @Rodrigo. I learnt something new and finally I achieved it! It works smooth and it rotates. I've updated the code. I was stubborn and did't realized that it could done without foreach and using the quickTo() function. But I have the last part left. To keep the img in its position when I translate the parent to show the next image. Any ideas? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 2 Share Posted February 2 2 minutes ago, diewaves said: But I have the last part left, making the image not move with respect to its container. Any ideas? Mhhh.. can you elaborate a bit more regarding this? I'm afraid I don't really follow what you mean with that 😞 Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 Sorry about my bad explanation. I was editing the question before your answer. I want to do this. When I'm hovering one of the titles, the wrapper with overflow:hidden translates 100% and shows the image behind like a mask. But I want to keep the image in its position. Not moving with the parent, as if it where a background. I want to achive this with an img element. The same effect occurs on the tympanus link. Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 I'm just thinking. If I do a negative translate of the child with a timeline at the same time? I'll test it. Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 2 Share Posted February 2 You can use a clipPath for that, check out this guide how to setup masking in different ways. 1 Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 Yeah! @mvaneijgen that could be another solution! I did something like that recently and I didn't thought about that. Thank you! Link to comment Share on other sites More sharing options...
diewaves Posted February 2 Author Share Posted February 2 It worked. I've updated it. Thank you both! 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