Text ZoomIn Animation while scrolling

[Razor]

I really like lenis animation website and i would like to do something like it but my scaling is not correct , and i am not sure what i do wrong ?

the animation is half of the page where it says enter lenis
 

https://lenis.studiofreight.com/

See the Pen LYMpwJe by razors999 (@razors999) on CodePen

[GSAP Helper]

Hm, we'd love to help with any GSAP-specific questions, but vague details like 'my scaling is not correct' makes it very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo in any browser and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Razor]

Thank you for answer , yea i would like to scale the text until it hit 100% of the width of the screen and then reveal the other section like Lenis project, by doing that i enter the text itself so i can make a smooth effect that let the user actually think that i entered the text and the section got revealed inside the text itself similar to Lenis webpage.

[mvaneijgen]

Hi @Razor I've disabled GSAP and the problem is that you'r text is by far not large enough to fill the whole screen. A scale of 8.5 is just too small, so you need to increase the scale even further. Keep in mind that in the Lenis example the letter "T" is in the middle of the screen and thus that is the part that will fill the screen. In your example "My" is in the middle of the screen and the center of that is white and not black. You can fix this by changing the transformOrigin of the scale to be in a part that is black, but than it will not zoom in to the middle, so you have to figure out what you want to do with that. 

 

Hope it helps and happy tweening!  

 

See the Pen GRPogbz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Razor]

3 hours ago, mvaneijgen said:

Hi @Razor I've disabled GSAP and the problem is that you'r text is by far not large enough to fill the whole screen. A scale of 8.5 is just too small, so you need to increase the scale even further. Keep in mind that in the Lenis example the letter "T" is in the middle of the screen and thus that is the part that will fill the screen. In your example "My" is in the middle of the screen and the center of that is white and not black. You can fix this by changing the transformOrigin of the scale to be in a part that is black, but than it will not zoom in to the middle, so you have to figure out what you want to do with that. 

 

Hope it helps and happy tweening!  

 

 

 

I am still trying , i made it to work but the problem its slower and the letter still not ending on the bottom of the end but it has a 50vh gap between the letter and the end 

.experience .experience-middle{

    transform: scale(calc(var(--progress1) * 57.5)) !important;

    transform-origin: 49%;

    font-size: 15rem;

    font-family: 'bold';

}

this is my new code but its not working as expected , not sure what to edit , maybe i am doing something wrong , its my first time animating a scale

[mvaneijgen]

You're doing nothing wrong, this is just something really hard to wrap your head around and will require some trickery to get it to work. 

 

I've tweaked your pen with the new code and put the ScrollTrigger logic on the timeline, not on the tween. If you have a timeline ScrollTrigger can only control the timeline not individual tweens.

 

I've made it so that the stroke of the letter M zooms in on the middle of the screen, until all other strokes are off screen. Then I've create an extra div called .extraBox which covers the whole screen, this is orange at the moment to show you what is happening, but you would of course make this black for the effect. The problem was with the M that there would be no scale that would zoom that covers every screen, my giving it a max zoom of 30 and filling the rest of the screen with the orange box you can create the same effect without having to recalculate what the zoom would be on every possible screen size. The .extraBox animation happens on -0.4 of the previous tween (which is 0.5 seconds long, the default) with the position parameter and scales only in the X directions. 

 

Maybe you need to remove this orange box for mobile devices, but that you could do with gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Hope it helps and happy tweening! 

 

See the Pen WNLrQWg?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

[Razor]

7 hours ago, mvaneijgen said:

You're doing nothing wrong, this is just something really hard to wrap your head around and will require some trickery to get it to work. 

 

I've tweaked your pen with the new code and put the ScrollTrigger logic on the timeline, not on the tween. If you have a timeline ScrollTrigger can only control the timeline not individual tweens.

 

I've made it so that the stroke of the letter M zooms in on the middle of the screen, until all other strokes are off screen. Then I've create an extra div called .extraBox which covers the whole screen, this is orange at the moment to show you what is happening, but you would of course make this black for the effect. The problem was with the M that there would be no scale that would zoom that covers every screen, my giving it a max zoom of 30 and filling the rest of the screen with the orange box you can create the same effect without having to recalculate what the zoom would be on every possible screen size. The .extraBox animation happens on -0.4 of the previous tween (which is 0.5 seconds long, the default) with the position parameter and scales only in the X directions. 

 

Maybe you need to remove this orange box for mobile devices, but that you could do with gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Hope it helps and happy tweening! 

 

 

 

 

oh i see , i found this useful that i can edit the color as the text and start working on it , so it can match the text itself ,its still tricky on mobile but i will try to manage and solve this but that extra-box is very helpful , also i noticed that i need to animate next section margin top with the same background so it can match the next section because there is an extra text scale after the end , thank you so much for this example i will try to do my best to edit values so it can work well into my website ^^