In this tutorial, we will learn how to create an animating shimmer effect similar to the one found on the Linear app's website using Framer. This effect involves a looping animation across the top of the app window. With the recent effects release in Framer, this has become straightforward to implement.

Setting Up the Project

Start by setting up your project in Framer. The setup should include a Framer window similar to the Linear website. Additionally, create a shimmer layer which will be a simple layer, one pixel high, 100 pixels wide, positioned at the top left of the Framer window. For the shimmer layer's fill, use a linear gradient which transitions from white with 60% opacity to white with 0% opacity, resulting in a fade-out effect on the left.

Adding the Loop Effect

Next, select the shimmer layer and add an effect. Choose the "Loop" effect, which adds a looping animation to the layer. Set a delay of three seconds, meaning the animation will pause for this duration after each loop. Leave the scale set to one and rotation to zero. Now, we will move the layer to the right by adjusting the X value. Set this to around 800 pixels, so the layer moves 800 pixels to the right.

Adjusting Opacity and Transition

As the layer moves, we want it to fade out, simulating the effect seen on the Linear website. Set the layer's opacity to zero to achieve this. Then, change the transition type from "linear" to "ease out". This will make the animation start quickly and then slow down towards the end. Set the duration of the animation to 1.5 seconds.

Adding Additional Shimmers

Linear's website also features a shimmer effect on the right side of the window. To mimic this, set up another shimmer layer on the right side. This time, make the layer one pixel wide and 100 pixels high. Apply the same Loop effect as before, but use a different delay to ensure the animations do not sync exactly. Adjust the Y value to move the layer down, set the opacity to zero, and again change the transition from "linear" to "ease out". Set the animation duration to 1.5 seconds.

Previewing the Effect

After setting up the shimmer effects, publish your website and open it in your browser. The shimmer animation should play every few seconds, creating a similar effect to the one on the Linear website.

This tutorial demonstrates a straightforward way to add a shimmer effect to your website using Framer, all without the need for coding.