Fade-In Animations

One of the most popular requests — smooth, staggered fade-in animations that play when elements scroll into view.

The conversation

You: I want the portfolio items on my homepage to fade in one by one when someone scrolls down to that section. The items have the class .portfolio_item and they’re inside .portfolio_grid.

Claude: I’ll set up a staggered fade-in for your portfolio items. Each one will gently appear from slightly below, one after another, when the grid scrolls into view.

Pushed to your staging site — take a look!

You: Looks great! But they’re fading in a bit too quickly.

Claude: Slowed it down — the animation is more gradual now. Refresh your staging site.

You: Perfect. Can the items also slide in from the left instead of below?

Claude: Updated! They now slide in from the left with the same gentle fade. Check your staging site.

What you get

• Each portfolio item smoothly appears as the section scrolls into view
• Items appear one at a time with a short gap (a “stagger” effect)
• The animation only plays once — it doesn’t re-trigger when you scroll up and back down
• Works with any number of items in your grid

Variations you can ask for

“Make the stagger faster so the items cascade more quickly”

“Fade in the items row by row instead of one at a time”

“Add a slight rotation as they fade in”

“Make the first item appear instantly, then stagger the rest”

Webflow setup

The only thing you need is the class names of the elements you want to animate. Click on an element in the Webflow Designer and check the Selector panel to find the class name.

Tell Claude the class name for both the container (.portfolio_grid) and the items (.portfolio_item), and it handles the rest.