Problem: GSAP ScrollTrigger, recalculate x and y position of element on windows resize

[Juan98]

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!

See the Pen LYXmyaq by juancruz98 (@juancruz98) on CodePen

[Rodrigo]

Hi @Juan98 and welcome to the GreenSock forums!

 

Maybe you'd like to give the Flip Plugin a try:

https://greensock.com/docs/v3/Plugins/Flip

 

In this thread you'll find an example that seems to be doing exactly what you're trying to do:

 

Hopefully this helps.

Happy Tweening!

[Juan98]

10 hours ago, Rodrigo said:

Hi @Juan98 and welcome to the GreenSock forums!

 

Maybe you'd like to give the Flip Plugin a try:

https://greensock.com/docs/v3/Plugins/Flip

 

In this thread you'll find an example that seems to be doing exactly what you're trying to do:

 

Hopefully this helps.

Happy Tweening!

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!

[mvaneijgen]

Hi @Juan98 what have you tried already? We love to see a minimal demo with what you can come up with, this way we can better understand you thought process and thus better help you! 

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

[Juan98]

1 minute ago, mvaneijgen said:

Hi @Juan98 what have you tried already? We love to see a minimal demo with what you can come up with, this way we can better understand you thought process and thus better help you! 

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

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!

[Juan98]

On 7/18/2023 at 10:22 PM, Rodrigo said:

Hi @Juan98 and welcome to the GreenSock forums!

 

Maybe you'd like to give the Flip Plugin a try:

https://greensock.com/docs/v3/Plugins/Flip

 

In this thread you'll find an example that seems to be doing exactly what you're trying to do:

 

Hopefully this helps.

Happy Tweening!

Ok so here's the first update, I was able to solve the issue with the Flip Plugin, thank you!

See the Pen WNYypxK by juancruz98 (@juancruz98) on CodePen

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.

[Rodrigo]

Hi,

 

Keep in mind that a Flip.from() instance returns a GSAP Timeline, so you can add that timeline to another timeline (let's call it master timeline) and add to the master timeline an instance that tweens the scale of the target element.

 

Timelines are super flexible and useful for creating complex animations and sequences:

https://greensock.com/docs/v3/GSAP/Timeline

 

Hopefully this helps.

Happy Tweening!

[Juan98]

22 minutes ago, Rodrigo said:

Hi,

 

Keep in mind that a Flip.from() instance returns a GSAP Timeline, so you can add that timeline to another timeline (let's call it master timeline) and add to the master timeline an instance that tweens the scale of the target element.

 

Timelines are super flexible and useful for creating complex animations and sequences:

https://greensock.com/docs/v3/GSAP/Timeline

 

Hopefully this helps.

Happy Tweening!

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

[Rodrigo]

You could setup the final parent element to have the same dimensions as the original and then make the scale animation, that way the Flip Plugin would take care only the position of the element.

 

Here is a fork of your example:

See the Pen RwqJBEa by GreenSock (@GreenSock) on CodePen

 

Hopefully this  helps.

Happy Tweening!

[Juan98]

18 hours ago, Rodrigo said:

You could setup the final parent element to have the same dimensions as the original and then make the scale animation, that way the Flip Plugin would take care only the position of the element.

 

Here is a fork of your example:

 

 

 

Hopefully this  helps.

Happy Tweening!

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

[Juan98]

On 7/20/2023 at 9:58 PM, Rodrigo said:

You could setup the final parent element to have the same dimensions as the original and then make the scale animation, that way the Flip Plugin would take care only the position of the element.

 

Here is a fork of your example:

 

 

 

Hopefully this  helps.

Happy Tweening!

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: 

See the Pen XWyBYpd by juancruz98 (@juancruz98) on CodePen

Any tips to help me create that two step animation would be appreciated. Thank you!

 

@mvaneijgen @Rodrigo

[Rodrigo]

Hi,

 

I've been fiddling with this for a bit and I think having two Flip instances that somehow affect the same element is not helping. On top of that you are just copy pasting code without fully understanding how that code works. You have this:

flipCtx && flipCtx.revert();

But nowhere in your code you are creating the GSAP Context instance. I'd suggest you to read and learn about GSAP Context in order to properly grasp what it does and how is useful in this case:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This is the closest I can get to a working solution without investing a lot of time:

See the Pen abQaZRa by GreenSock (@GreenSock) on CodePen

 

Unfortunately we don't have the time resources to provide custom solutions to our users especially in complex scenarios like this. If you want you can contact us for a paid consulting job or post in the Jobs & Freelance forums to get help there.

 

The final advice I can give you is to not use the Flip plugin for the second animation. You have elements with fixed heights so you should use Flip only for the translation (first part). For growing the element just get the ratios and scale the element or animate it's width/height using a regular to() instance.

 

If I have more time I'll try to circle back to this and try the approach I suggested you at the end.

 

Hopefully this helps.

Happy Tweening!

[Juan98]

21 hours ago, Rodrigo said:

Hi,

 

I've been fiddling with this for a bit and I think having two Flip instances that somehow affect the same element is not helping. On top of that you are just copy pasting code without fully understanding how that code works. You have this:

flipCtx && flipCtx.revert();

But nowhere in your code you are creating the GSAP Context instance. I'd suggest you to read and learn about GSAP Context in order to properly grasp what it does and how is useful in this case:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This is the closest I can get to a working solution without investing a lot of time:

 

 

 

Unfortunately we don't have the time resources to provide custom solutions to our users especially in complex scenarios like this. If you want you can contact us for a paid consulting job or post in the Jobs & Freelance forums to get help there.

 

The final advice I can give you is to not use the Flip plugin for the second animation. You have elements with fixed heights so you should use Flip only for the translation (first part). For growing the element just get the ratios and scale the element or animate it's width/height using a regular to() instance.

 

If I have more time I'll try to circle back to this and try the approach I suggested you at the end.

 

Hopefully this helps.

Happy Tweening!

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!

[Rodrigo]

2 hours ago, Juan98 said:

If you have PayPal or something like that I would love to send you a tip.

Nah don't worry about it. Maybe find an animal shelter close to you and help them, I can guarantee that the little ones need it more than I do 🐶😺

 

Happy Tweening!