Scroll Animations

Scroll-based animations add depth and polish to your Webflow site. Here are popular effects you can get with a simple conversation.

Parallax background

You: I want the hero background image to scroll slower than the rest of the page — that parallax effect you see on high-end sites. The image class is .hero_background-image.

Claude: Done! The background image now moves at about half the scroll speed, creating a smooth parallax effect. Check your staging site.

You: Love it. Can you make the effect a bit more subtle?

Claude: Toned it down — the movement is gentler now. Refresh to see.

Section reveal

You: I want each section on the page to fade in from below as it scrolls into view. The sections all have the class .content-section.

Claude: Each .content-section now fades in and slides up smoothly when it enters the viewport. They each trigger independently as you scroll to them.

Number counter

You: The stats section has numbers like “150+” and “12 years”. I want them to count up from 0 when you scroll to that section. The numbers have the class .stat_number.

Claude: To make this work, I’ll need a target number for each counter. Can you add a custom attribute called data-target to each .stat_number in Webflow? Set it to the final number (like 150 or 12).

You: Done!

Claude: The counters now animate from 0 to their target values over 2 seconds when the stats section scrolls into view. Check your staging site.

Horizontal scroll section

You: I want a section that scrolls horizontally as the user scrolls vertically — like a side-scrolling gallery. The track is .horizontal-scroll_track and the panels are .horizontal-scroll_panel.

Claude: The horizontal scroll section is working. As you scroll vertically through that section, the panels move horizontally. The section pins in place while the horizontal scroll plays out, then un-pins when you’ve scrolled through all panels.

Variations you can ask for

“Make the parallax effect stronger / more subtle”

“Have sections reveal from the right instead of below”

“Make the number counter faster / slower”

“Add snap points to the horizontal scroll so it stops on each panel”

Good to know