Animations

Create an animating shimmer effect like the Linear app website without any code

4:52

31K views

Feb 27, 2023

About this lesson

In this video, you’ll learn how to create an animating shimmer effect like on the Linear App website without any code.

Live Demo → https://shimmer.framer.wiki/

Remix Link → https://framer.com/projects/new?duplicate=6hpFcuWSgkAu1OvikiZm

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00hey uh this is Jordan from framer a very 0:03quick tutorial so I was looking at the 0:05linear app website and they have this 0:07cool effect on the on the app window 0:11um where this sort of Shimmer or glimmer 0:13goes across the top of the window and it 0:15repeats itself so it's a sort of looping 0:18animation and I figured this is now very 0:20easy to do with the effects release that 0:22we introduced in framework last week 0:24where you can easily add looping 0:27animations uh also adds a bunch more 0:29like hovers and drag but I thought I'd 0:32show you how to set this up in framer so 0:34I already have my project set up here 0:35with the framer window 0:37similar to the linear website 0:40and I have a sort of a shimmer layer set 0:45up here which is a very simple layers 0:46just one pixel High 100 pixels wide and 0:50it's positioned at the top left of the 0:52framer window using the 0:54absolute positioning type 0:57and it has a fill which is a linear 1:00gradient which goes from White 60 1:03opacity to White zero percent opacity so 1:08it fades out on the left 1:10um and what I can do with this layer is 1:12I can select it and add an effect to it 1:14so over here on the right we can add the 1:18effect and I'm going to select the loop 1:20effect which is going to add a looping 1:22animation to it 1:25um I'm going to leave it on Loop 1:27and I'll add like a three second delay 1:30to it which means it's going to wait 1:31three seconds every time the after the 1:34animation stops playing 1:37um leave scale to one I don't need any 1:39rotation so setting that to zero and I'm 1:42going to move the layer to the right so 1:44I'm going to change the x value 1:46so let's 1:48um click on the arrows here and then 1:50just drag my mouse up and you can see on 1:52the canvas that the layer starts moving 1:54so we can sort of Select preview where 1:58that layer is going 2:00so I'm going to set this to 2:03let's set it to about 2:05800 pixels 2:07which means it's going to move 800 2:08pixels to the right so you can see still 2:10see that the layers over here 2:13um 2:14and I'm going to set the opacity to zero 2:17because I want it to fade out as it 2:19moves to the right which sort of creates 2:21this effect that linear also has 2:23so opacity zero 2:25and then I'm going to change the 2:26transition type from linear to 2:29is out which means it starts very 2:32quickly and then slowly slows down as it 2:35reaches the end of the animation 2:37um and I'm going to set the time of the 2:39animation to about 1.5 seconds which 2:41means the animation takes 1.5 seconds to 2:44play 2:47um so now if I publish my website 2:50and open that in my browser 2:57you can see that the animation plays 3:00every three seconds and takes about 1.5 3:04seconds to animate which sort of creates 3:06this effect that linear also has on 3:07their website 3:09um 3:10now linear also has one on the right 3:12side of the window 3:15so I've also already set up one over 3:17there 3:19same same principles but this time the 3:23layer is one pixel wide instead of high 3:25and it's 100 pixels High instead of wide 3:28I'm going to add the same effect to this 3:32so effect Loop 3:35and 3:37I'll add a different delay to this so 3:39they don't play at the same rate so I'll 3:42do maybe two seconds 3:44and don't need a rotation 3:46this time I'm going to change the Y 3:48value so moving that up so you can see 3:50the layer moving down probably move it 3:52to about 3:54600 3:57um I can make it go a little bit further 3:59Maybe 670.4:01and set the opacity to zero again 4:05changing the transition again from 4:07linear to ease out 4:09and I'll also have this take about 4:121.5 seconds 4:16now updating my website again 4:20preview that in the browser 4:23and now we have both of those shimmers 4:26going uh across the top side of the 4:29the window and also on the right side 4:31but since they both use a different 4:33delay they sort of unsync which is cool 4:36because then you get one at the top and 4:38then one at the left or the right side 4:41so yeah this is a very easy easy way of 4:44adding that effect to your site in 4:46framework without using any code

TeachesLoop Effect

Also coversAbsolute Positioning Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: CSV Import

Framer Update: New Effects ›