On the current webpage for iPhone 12 Pro, you can witness a beautifully animated presentation. I got inspired to use this on one of the projects I’m working on. I really liked how the fade-in is being animated and is smoothly hiding the text as you scroll. We are going to dive in and see how they achieved this effect and try to recreate it while breaking it into smaller pieces. Gladly, we can inspect the code and understand exactly what properties are being used for the animation.
- You can see simple demo of what we’ll be doing in this page: Our Demo
- You can preview the iPhone12 Pro landing page (Inspiration).
- You can download project files from Github reposirtory
HTML
For the HTML we add all the necessary links in theand before the closing tag. We use text__inner as the main wrapping element that we use to animate the effect.
Text Scrolling Effext / Gradient
Best fading heading in the world!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quos fuga sed temporibus, iure ipsum enim facere quis delectus deserunt voluptatibus dolor eos.
CSS
The CSS properties we animate are the opacity and the gradient. As a default property, we define also “text-fill-color” and “background-clip“. Here is how it looks in the code.
.text__inner {
/* Default starting point */
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 1) -100%, rgba(240, 240, 240, 0) 0%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
JavaScript
GSAP relies mainly on JavaScript to execute animations. We’ve covered GSAP in our previous article. In order to achieve our wanted effect we use an add-on plugin they provide for free called ScrollTrigger. It allows you to execute animations while you scroll.
What we do in the code below is:
- Create the scroll trigger
- Define ‘start’ and ‘end’ points
- Animate the CSS property (in our case the background-image).
//Register the plugin
gsap.registerPlugin(ScrollTrigger);
// Create the trigger
gsap.to('.text__inner', {
scrollTrigger: {
trigger: '.text__inner',
// Remove markers (labels) from below
markers: true,
// Define start and end points
start: '0 100%',
end: '20% top',
scrub: true
},
yoyo: true,
repeat: 1,
// This is the important part
// Animate CSS property
backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 1) 100%, rgba(240, 240, 240, 0) 200%)",
});
What you need to take out of this is that scroll triggered animations are the future. We are not limited anymore to playing animation only once whenever you reach a specific point in the page. Let’s use the tools to our advantage to create the best interactive presentations as Apple did. If they give us a way to inspect the code and figure out how they did it then we should take advantage of that.