Apple Website Text Zoom-In Scroll Animation

Step-by-step guide: Create a perfect zoom-in typo animation — In this video, I'll show you how to create an impressive zoom-in-typo animation like on apple.com. It looks simple, but I actually spent two hours trying to figure out how to make this animation perfect. The effect also works really well on smartphones.

If you watch the tutorial, you'll notice that the sharpest lettering and the best performance can only be achieved with an SVG. That is actually the way Apple is using. The disadvantage is that you have to export an SVG image separately for your own lettering. Animating text elements with scale larger does not work, as Chrome then renders the font blurry.

Video timestamps

00:00 — What we are going to build
01:08 — Design/structure in Webflow
03:43 — Problem Approach 1
06:43 — Problem Approach 2
09:45 — Solution with SVG lettering
16:48 — Score

Step-by-step guide: Create perfect zoom-in typo animation

Welcome to my new tutorial, where I'll show you how to create an impressive zoom-in typo animation with Webflow. Inspired by the apple.com website, you'll learn how to bring this impressive visual element to your own website. Let's get started right away!

Inspiration on apple.com

In my search for inspiring animation techniques, I came across the MacBook Air page on apple.com. I was immediately fascinated by the zoom-in typo animation there and I knew that I had to share it in a tutorial. It may look simple, but getting the perfect result requires some work.

The challenge

I decided to demonstrate this zoom-in animation in a 3-minute tutorial. But I actually spent 2 hours trying to figure out how it worked and how I could implement it perfectly. The precise timing and sharp effect were a real challenge.

The structure of the animation

Let's start by building the animation in Webflow. First, we'll add a section that takes up the entire width of the screen. This section also defines the scroll length, i.e. the duration of the zoom-in animation. You can adjust the scroll length to get the effect you want.

The sticky element

Next, we'll add a sticky element that also takes up the full width. This element will remain in the viewport while scrolling. We define the starting point of the sticky element and ensure that it is always visible while the rest of the page scrolls.

The correct size of text elements

Now we come to the actual text elements. We'll create an element within the sticky element and adjust the size and style of the text. We can set the font size based on the width of the browser window and, depending on your purpose, you can make further adjustments to adjust the size correctly.

The scrolling animation

Now it's getting exciting! We'll create a scrolling animation that enlarges our text and creates the zoom-in effect. We use the trigger element and set that the animation should play when scrolling in the view. I'll show you the exact settings and steps in my tutorial video.

Conclusion and resources

Use this animation technique to improve your website with dynamic and appealing elements. Be creative and experiment with different text elements and sizes.

You can find the link to the cloneable project linked here in the post so that you can open the tutorial directly in Webflow Designer and copy it for your own project.