diewaves

It worked. I've updated it. Thank you both!

Yeah! @mvaneijgen that could be another solution! I did something like that recently and I didn't thought about that. Thank you!

I'm just thinking. If I do a negative translate of the child with a timeline at the same time? I'll test it.

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.

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?

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.

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! https://codepen.io/Diego-Diewaves/pen/JjzLjzN

Hi guys! I'm totally understand now. Thank so much you two. I'm very close to get the behavior expected using onLeave, onEnterBack parameters. I'm doing it on this website, but there are two things I'm not get to work fine. https://latitude.alvarosancha.com/ Sometimes the cloneNode function doesn't copy well the src of the image. And another is the infinite scroll doesn't work fine on mobile. I think is about the rescaling viewport effect with the browser nav bar. I will work on it to find the problem.

Hi guys! I'm really close now to the behavior I was looking for. The idea is to have a gallery with different images, so I need to clone and append each item of the array. I made it work, but I'm wondering if I can use the scrub thing to trigger the animation scrolling up too. I mean when I scroll up, reversing the animation, like the normal behavior of ScrollTrigger. I think I'am close to get it using onLeave and onEnterBack parameters. https://codepen.io/diewaves/pen/zYJYVpr

Hi Rodrigo! Yes I think I have complicated myself too much. This is very helpful and it is the behavior I was looking for. Thank you so much!

Hi guys! I'm pretty new using gsap, I started a few months ago. I'm trying to make an infinite loop gallery but I'm unable to make it work correctly. I've started with 5 divs into a wrapper. When the trigger reaches 70% of the body, it clones and appends a new container. I've added some scale animations with a timeline, but I really don't understand why it doesn't work on the appended items. I've searched on the forum but I didn't find something similar. Hope you can help me! Thanks!