Responsive Scroll Animation

[Ewnias]

Hello,

 

I created an animation where the image shrinks and text comes in from the left, right, and bottom. However, when the text length changes, they don’t come in from the left and right at the same time. I have to manually adjust the left/right values.

 

Is there a way to make the text come in from all sides simultaneously regardless of its length? Also, how can I make this animation responsive? Right now, when the text scales down, there are some issues like elements overlapping.
 

 

Image

 

See the Pen ZYBYwRj by ijgxmufp-the-sans (@ijgxmufp-the-sans) on CodePen.

[Rodrigo]

Hi,

 

Maybe something like this using Flip and GSAP Context:

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

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

 

See the Pen qEqdWwW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Ewnias]

22 hours ago, Rodrigo said:

Hi,

 

Maybe something like this using Flip and GSAP Context:

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

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

 

 

 

 

Hopefully this helps

Happy Tweening!

Thank you, that really helped