Razor

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 ^^

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

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.

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/

thank you so much , this is what i wanted , sorry for this but i am learning gsap because i found out that its the best library in animations and i wanted to create some website animation so i can master this tool ♥

I want to animate the fashion section so when the user scroll to #fashion it pin the first h1 and then reveal it to the top and then after like 50vh it starts to animate the second h1 and so on until it reveal all text and then stops the pin for the #fashion example can be found in yuga.com its the 2nd section

thank you for the answer , i was learning GSAP and thought that would be easy but yea its too hard to do , i will start smaller with some small svgs and with that book i may use after effect to be able to make it that would be easy , thank you for the suggestion ♥

I got a book from freepik and i want to learn how can i make this book fly like open and close effect butterfly , what do i need to do to make this happen ?