Need iOS 26 Clock Text style Anchored Animation on Scroll

[talhaismail22]

Hi everyone,

 

I am new to GSAP and trying to recreate iOS 26 Clock Text style anchored animation for a website on webflow. I have attached a reference video of the kind of text animation I am trying to achieve. I want the text to remain anchored on its position from the top, while it shrinks from the bottom if I scroll down to a certain point of scroll to reach its maximum shrinkage. After that point the text needs to go up as a usual scroll of a page to show the next section. 

 

Screenshot of the settings I am doing is also attached. 

 

I have asked Chatgpt for help also but unable to achieve the same effect, I would really appreciate if anyone can guide me or explain how I can achieve this. 

 

Thanks in Advance

[Rodrigo]

Hi @talhaismail22 and welcome to the GSAP Forums!

 

The simplest way to achieve that is using scale with or without the Flip Plugin:

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

 

Here is a super simple demo using just scale:

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

 

But as you can see a degree of distortion is a bit inevitable, so I could recommend using the MorphSVG Plugin and use an SVG element for that, you'll have far more control over it without any of the visual issues that scaling creates:

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

 

I don't have time now to create a demo using the Plugin but I hope to create a simple one tomorrow of at least the SVG part.

 

Hopefully this helps

Happy Tweening!

[talhaismail22]

20 hours ago, Rodrigo said:

Hi @talhaismail22 and welcome to the GSAP Forums!

 

The simplest way to achieve that is using scale with or without the Flip Plugin:

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

 

Here is a super simple demo using just scale:

 

 

 

But as you can see a degree of distortion is a bit inevitable, so I could recommend using the MorphSVG Plugin and use an SVG element for that, you'll have far more control over it without any of the visual issues that scaling creates:

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

 

I don't have time now to create a demo using the Plugin but I hope to create a simple one tomorrow of at least the SVG part.

 

Hopefully this helps

Happy Tweening!

Hi Rodrigo, You are a real superhero as the picture also shows  

You have made it sound so simple and easily achievable. I have added this on the website and look great so far. I will reach out if any further assistance is needed. I managed to do it using the code you shared not by using the plugins. I might explore those later.