Recreate fade-in effect as in iPhone12 Pro landing page

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.

 

First, there is a scrolling trigger that controls the animation. We need to find a way to animate elements on scroll gradually. To do that we’re going to use a very helpful add-on plugin provided by GSAP called ScrollTrigger. It comes in really handy as it allows us to write very small pieces of code. Before we continue with JavaScript let’s sort out the HTML and CSS first.

HTML

For the HTML we add all the necessary links in the <head> and before the closing </body> tag. We use text__inner as the main wrapping element that we use to animate the effect. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Scrolling Effext / Gradient</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,100&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="wrapper">
    <!-- The important part -->
    <div class="text__inner">
      <h2>Best fading heading in the world!</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quos fuga sed temporibus, iure ipsum enim facere quis delectus deserunt voluptatibus dolor eos.</p>
    </div>
  </div>

  <!-- Add your scrips at the end of the body tag -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

  <script src="js/functions.js"></script>
</body>
</html>

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.