Juan98

My bad! Thanks a lot, this is more than enough! If you have PayPal or something like that I would love to send you a tip. Saved me a lot of time, thanks!

I think I found a bug, you can see that in this fork, if we resize the window, the element doesn't get repositioned properly, a quick solution i found was to set a slightly different height on the #ghost-div or the #element-container (something like height: 180.1px solves the issue when resizing the window). I also have been experimenting with the gsap timeline and the flip plugin to create the more complex animation where it first translates to the target with the same starting size of the element, and then it grows to a bigger size. Here's the forked codepen: https://codepen.io/juancruz98/pen/XWyBYpd Any tips to help me create that two step animation would be appreciated. Thank you! @mvaneijgen @Rodrigo

Oh ok! I was thinking something like this but I didn't know if it was the optimal way, thanks! Will try and post the update

Awesome, but is it possibile to use the Flip plugin to just animate the translation and not width and height of the element even if the starting target is smaller than the destination target? Thank you

Ok so here's the first update, I was able to solve the issue with the Flip Plugin, thank you! https://codepen.io/juancruz98/pen/WNYypxK Now I'm trying to handle the animation in two steps, it should translate from the first smaller element to the target destination and then grow to the full size. Will post any updates.

Right, I will try to find a solution and post here a new codepen. Thanks! I was think about creating a timeline and then use scrolltrigger to animate it on scroll but yeah I will do some experimenting and post here the result!

Awesome Rodrigo, thank you! I will edit the code and post it here later! Another question, would it be possible to translate the element to the destination and only when it reaches the position scale it back to 100%? The effect I'd like to recreate is like the one in the gif. Thanks!

Hi, so it's been a few hours and I haven't been able to solve this issue yet. (I'm new to GSAP) Basically, I'd like to scale down and place an element (#animated-element) into a starting translated position and when the user scrolls down, it animates back to the original element position. As you can see in the codepen it seems to work well, the problem is that when i resize the window, the translated position is not correct and it should be recalculated as when the page loads. Any help would be appreciated, thank you!