Using Hover and Press Effects in Framer (Animation Lesson 2)

Let’s start with the basics — how to make things feel alive when visitors interact with them. Hover and press effects are small touches that make a big difference — by giving visitors tangible feedback that makes it super clear if something is clickable in the first place — and if they’ve clicked it successful. In this lesson, we’ll walk through how to create these two effects in Framer in just a couple of clicks.

Grab the remix link here: https://www.framer.com/academy..../lessons/framer-anim

00:00 Intro
00:05 Why hover and press effects matter
00:19 Jumping into the Framer project file
00:43 Starting with the hover effect
01:02 Choosing and previewing hover settings
01:36 Adjusting transition with spring physics
02:30 Finalizing hover effect settings
02:54 Previewing the hover effect
03:15 Introducing press effects
03:39 Adding a press effect in Framer
03:55 Scaling for a pressed state
04:15 Matching spring settings to hover
04:26 Previewing the press effect
04:39 Adding rotation to the press effect
05:01 Final preview with rotation and scale
05:56 Wrap-up

Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
Learn: https://framer.link/yt-academy