Search

Animations

Learn Framer animation tools, then ask the Agent to choose effects, create Component Variants, and apply motion across your site in Framer.

Search all 107 lessons…

Search all 107 lessons…

Search all 107 lessons…

Basics

,

Animations

Create and prompt animations in Framer

4:16

Basics

,

Agents

,

Design Systems

How to use Component Variants in Framer

4:32

All Animations

Search 44 lessons…

Search 44 lessons…

Create and prompt animations in Framer

4:16

Create and prompt animations in Framer

4:16

How to use Component Variants in Framer

4:32

How to use Component Variants in Framer

4:32

Animating Vectors in Framer — lesson cover image

Animate Vectors in Framer

4:25

Animate Vectors in Framer

4:25

Creating a fixed footer reveal in Framer — lesson cover image

Create a fixed footer reveal in Framer

6:25

Create a fixed footer reveal in Framer

6:25

Building an Expanding Article Stack — lesson cover image

Build an expanding article Stack in Framer

13:14

Build an expanding article Stack in Framer

13:14

Fading the edges of a Ticker in Framer — lesson cover image

Fade the edges of a Ticker in Framer

5:09

Fade the edges of a Ticker in Framer

5:09

Scaling a clipped image on hover — lesson cover image

Scale a clipped image on hover in Framer

5:41

Scale a clipped image on hover in Framer

5:41

Making elements revolve in Framer — lesson cover image

Make elements revolve in Framer

3:37

Make elements revolve in Framer

3:37

Triggering video playback on scroll in Framer — lesson cover image

Play a video on scroll in Framer

3:45

Play a video on scroll in Framer

3:45

Animating vector paths in Framer — lesson cover image

Animate vector paths in Framer

14:36

Animate vector paths in Framer

14:36

Animating text in Framer — lesson cover image

Animate text in Framer

8:37

Animate text in Framer

8:37

Setting up custom cursors in Framer — lesson cover image

Set up custom cursors in Framer

12:17

Set up custom cursors in Framer

12:17

Creating persistent animations between pages in Framer — lesson cover image

Create persistent animations between pages in Framer

7:42

Create persistent animations between pages in Framer

7:42

Animating transitions between pages in Framer — lesson cover image

Animate transitions between pages in Framer

8:46

Animate transitions between pages in Framer

8:46

Using Events for nested interactions in Framer — lesson cover image

Use Events for nested interactions in Framer

9:28

Use Events for nested interactions in Framer

9:28

Adding animated effects at the component level in Framer — lesson cover image

Add animated effects at the Component level in Framer

3:11

Add animated effects at the Component level in Framer

3:11

Creating animated component interactions in Framer — lesson cover image

Create animated Component interactions in Framer

10:50

Create animated Component interactions in Framer

10:50

Animating between variants on scroll in Framer — lesson cover image

Animate between Variants on scroll in Framer

10:50

Animate between Variants on scroll in Framer

10:50

Creating parallax with Scroll Speed in Framer — lesson cover image

Create parallax with Scroll Speed in Framer

4:16

Create parallax with Scroll Speed in Framer

4:16

Transforming elements on scroll in Framer — lesson cover image

Animate scroll transforms in Framer

11:57

Animate scroll transforms in Framer

11:57

Triggering animations on scroll in Framer — lesson cover image

Trigger animations on scroll in Framer

14:04

Trigger animations on scroll in Framer

14:04

Using the Appear Effect in Framer — lesson cover image

Use the Appear Effect in Framer

6:30

Use the Appear Effect in Framer

6:30

Using the Drag Effect in Framer — lesson cover image

Use the Drag Effect in Framer

5:34

Use the Drag Effect in Framer

5:34

Using the Loop Effect in Framer — lesson cover image

Use the Loop Effect in Framer

6:55

Use the Loop Effect in Framer

6:55

Mastering transitions and easing in Framer — lesson cover image

Master transitions and easing in Framer

11:01

Master transitions and easing in Framer

11:01

Using Hover and Press Effects in Framer — lesson cover image

Use Hover and Press Effects in Framer

5:42

Use Hover and Press Effects in Framer

5:42

Bringing websites to life with animation in Framer — lesson cover image

Bring websites to life with animation in Framer

2:31

Bring websites to life with animation in Framer

2:31