Add your first Webflow interaction (scroll + hover)
Build hover animations and scroll-into-view effects without writing JavaScript.
6 min read intermediateUpdated Apr 8, 2025
BI
Reviewed by the editorial team · Apr 8, 2025
Step by step
- 01
Open the Interactions panel
Right sidebar → lightning bolt icon.
- 02
Element trigger: Hover
Pick an element → On Hover → animate scale or color.
- 03
Page trigger: Scroll Into View
Fade or slide elements as they enter the viewport.
- 04
Easing matters
Use ease-out for entrances, ease-in for exits.
- 05
Test in published preview
Some interactions only work after publishing.
Web Design · Done-for-you
Want us to design and launch your website?
We build sites on Squarespace, Wix, WordPress, Shopify, Webflow and Framer — from blank canvas to live domain.
Book a website call