Jump to content
Search Community

Apple.com Zoom In Typo Scroll Animation

Vineeth Achari test
Moderator Tag

Go to solution Solved by Trapti,

Recommended Posts



"I'm searching for something closely resembling this: https://zoom-in-typo-animation.webflow.io/".

Could you please take a look at the CodePen, It's not displaying correctly.


I greatly appreciate your assistance.



Vineeth Achari

See the Pen BavLJRR by vineethachari (@vineethachari) on CodePen

Edited by Vineeth Achari
Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 


You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 


Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

19 hours ago, Trapti said:

How can I slow down the text scaling speed? I have attempted the following step.


tl.to("#text-svg", {scale: 100, xPercent: -300 ,  transformOrigin: "50% 50%"}) 


tl.to("#text-svg", {scale: 0.1, xPercent: -300 ,  transformOrigin: "50% 50%"}) 
















Here is pen I created some time back for the same effect. This might not be the perfect one, but you will get some idea. 





Link to comment
Share on other sites

I noticed several problems: 

  1. You're scaling WAAAAY too much. First, you're scaling it to literally 100 times the normal size, and then you're scaling it another 30 times bigger. I'm not sure why you're also animating xPercent 
  2. You're creating a single timeline and then looping through every panel and creating a new ScrollTrigger that's using that same timeline animation. That's logically funky. I'm sure you don't want multiple panels scrolling into view and re-scrubbing the exact same timeline instance. In your demo, you can just create a single timeline and attach a ScrollTrigger to that (just one). 

Is this more like what you want? If you want the zoom to happen slower, simply adjust your "end" value to be further down. 


See the Pen zYyKVPP?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...