Apple.com Zoom In Typo Scroll Animation

[Vineeth Achari 3 Likes (Newbie)]

Hello,

 

"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.

 

Thanks,

Vineeth Achari

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

Edited September 4 by Vineeth Achari

[GSAP Helper 122 Likes (Specialist)]

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. 

[Trapti 211 Likes (Specialist)]

Hi, 

 

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. 

 

See the Pen QWJvxRE by tripti1410 (@tripti1410) on CodePen

[Vineeth Achari 3 Likes (Newbie)]

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%"}) 

to

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

 

 

 

 

 

 

 

 

 

 

 

 

 

Hi, 

 

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. 

 

 

 

 

[GreenSock 18,876 Likes (Superhero)]

Just increase the "end" on the ScrollTrigger. 

 

Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

[Vineeth Achari 3 Likes (Newbie)]

Not working at all.

[GreenSock 18,876 Likes (Superhero)]

If you need some help, @Vineeth Achari, please make sure you provide a minimal demo (like a CodePen) that clearly illustrates the problem and tell us exactly how to reproduce the issue and we'd be happy to take a look and answer any GSAP-specific questions. 

[Vineeth Achari 3 Likes (Newbie)]

Hello,

 

I'm attempting to achieve the same results using my own text, colors etc with the code, but it's not working as expected. Could you please take a look at it? ==> 

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

[GreenSock 18,876 Likes (Superhero)]

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