How to create a handsome animated light effect (like Invision Studio landing page)?

The computer appears progressively

First of all, this article has been written for pedagogical purposes so if you are waiting for the result only, do no hesitate to follow directly these links:

Demo: https://friedrith.github.io/animated-light-effect/
Github: https://github.com/friedrith/animated-light-effect

As explained in the title, in this tutorial I will explain to you how I got a handsome light effect based on a scrolling gradient animation. To be more accurate, I want that the laptop appears gradually from the top right to the bottom left as if the lighting was expanding. And the animation is synchronized with scrollbar movement:

I recognize that it is totally inspired by Invision studio landing page. If you are interested in web design and you have not seen it, I can only recommend you to follow the link as soon as possible. It will blow your mind. Even if the message may not be very clear, the Invision team has raised web technologies as a masterpiece.

Whatever, I have decided to use this example because it gathers two new technologies I wanted to discover and share:

1. SVG: svg technology is increasingly used in web development and may be very powerful to manage gradient and animation on images.
2. animation based on scroll: a lot of landing pages are using animations following scroll movement to catch the reader's look.

The example we will build in this tutorial is available here. I propose you take a look to better understand what we are talking about.

Project initialization: Webpack 3.x + sass + babel

I suggest you to use:

• npm to manage dependencies
• webpack 3.0 to manage files: one of the most powerful module bundler of the moment
• sass for the style
• babel for javascript with ECMAScript 2017
• normalize.css to clear all exotic browser styles

This is the basic architecture now:

src/
  style/
    _colors.scss       # to store all colors variables
    _fonts.scss        # to store all fonts mixins
    style.scss         # global style
  index.html
  index.js
.babelrc               # to store babel config
package.json
webpack.config.js      # webpack config

At this stage, the main files are index.html

index.html

index.js with only … 2 lines:

index.js

and style.scss:

style.scss

I assume that you already have a setup for babel, webpack, etc… For more information about this initialization, see the files webpack.config.js, package.json, .babelrc, and of course README.md.

Basic background

If you decompose the landing page of Studio, you can see that the main effect is the laptop appearing progressively. However, another discrete effect is present to support the apparition: a smooth linear gradient background. It is not obvious but this color transition improves the light effect.

discrete linear gradient background from the top right to the bottom left

Notice you could use a radial gradient but after trying, I think that linear gradient gives a better result.

To reproduce Studio landing page, I chose the color #000000 and #151a22 and added them to the file _colors.scss:

$blue: #151a22;
$black: #000000;

In the main style file, style.scss:

If you are very careful about the orientation of the linear gradient, you can analyze that this orientation doesn’t depend on the size screen. So the gradient background is not adjusted from the top right corner to the bottom left corner, it is adjusted by a specific angle:

Wonderful SVG

After creating the smooth gradient background, we need to manage the hard stuff: the laptop appearing progressively. For now, we are going to focus on a static version: the laptop top right corner visible.

Only the top right corner of the laptop is visible

If you know a little about image processing, the best way to create this kind of effect is using a mask with the raw image and a radial gradient:

Using mask with a radial gradient

At this stage, there are 2 ways to use a mask:

• using an image preprocessed with an image processing software like GIMP or Photoshop then displaying it with<img /> tag
• using SVG technology
• using canvas technology

The inconvenient with using a preprocessed image is that you will have to create an image for each step of the animation and load it at a good time: it is boring to create, hard to maintain, and more significant: the loading process may slow your browser and so your animation. So SVG is clearly our best option.

Canvas technology could work but it will be part of another tutorial.

Using SVG in web technologies is very easy when you use the good library. I suggest SVG.js which is quite clear and efficient:

$ npm install --save svg.js

Next, add a new div with id drawing in index.html to include SVG:

<div class="main">
  <div class="drawing" id="drawing"></div>
</div>

And in file style.scss, add

.main {
  .drawing {
    width: 800px;
    height: 600px;
  }
}

Notice that in this example, I used hard-coded width and height to simplify the code but in real situation, I suggest you to adjust the size of the SVG workspace to the screen size with javascript.

And finally we:

1. import an image in the SVG (in the following, I import 2 images grouped together: one for the computer border and one for the screen content)
2. create a circle and color it with a radial gradient background
3. create a mask from the circle
4. apply the mask on the images grouped

The result in file index.js is:

I advise you to use an image with :

• a good resolution
• a transparent background
• a static light effect as if the laptop was enlightened from the top right. So when the laptop will be completely visible, the laptop will be in harmony with the gradient background. It may be generated with a filter from an image manipulating program like Gimp or Photoshop.

So at this moment, you should have this result:

Animation at scroll

The last thing you need to do is to synchronize the circle radius of the light effect with the scrollbar movement. To be more accurate, we want that:

• when the user begins to scroll: the laptop stays fixed in the center of the screen and appears progressively
• when the laptop is totally visible: it stops being fixed and lets the place of the content below (in my case, a simple white centered title “Handsome animation finished” ).

In order to create this animation, I suggest you to use the library ScrollMagic.

To be totally honest, I didn’t try other libraries to manage scroll animations. ScrollMagic does the job, it was the only thing that matters for me.

$ npm install --save scrollmagic

So we include ScrollMagic on the top of our index.js:

import ScrollMagic from 'scrollmagic'

ScrollMagic works with a controller and a scene to define the scroll duration while the laptop must be fixed and animated. And at line 34, we insert:

We use the setPin to force the scene to be fixed during 3000px and the event progress to manage custom animation, the circle radius in this case.

I wanted that the circle radius goes from 100px to 2600px to be sure that the circle would so I used the following formula:

100 + e.progress * 2500 
// e.progress goes from 0 (the begin) to 1 (the end)

Now you should have this result and pay attention to the small right grey scrollbar:

Your result after the tutorial

Conclusion

With this short example, you have got the first taste:

• how to manipulate images directly in the browser with SVG and create a radial smooth light effect with SVG.js
• how to create an animation based on scrollbar movement with ScrollMagic

With these two technologies, you should be able to create handsome landing pages and catch user look as never before.

This tutorial is my first one so do not hesitate to propose improvements to make it more understandable.

And if this tutorial helped you, remember to click on the clap button to make this post more visible on medium.