Webflow fade-in animations use Classic Interactions' Scroll Into View and Page Load triggers to reveal elements automatically — no code required. Select your element, open the Interactions panel (H), add an element trigger, set an initial Opacity 0 + Move Y 50px state, and animate to full opacity on scroll. Elements fade in once as visitors scroll down the page.
How to Build Fade-In Animations in Webflow
Fade-in animations are the most common entry effect in Webflow. Using Classic Interactions (Interactions 2.0), you can make any element appear with a smooth fade — triggered either when the page loads or when the element scrolls into the viewport. This tutorial covers both trigger types, plus how to apply a single interaction to an entire class of elements so cards, headings, and list items all fade in together with one setup.
Prerequisites
- A Webflow project open in the Designer
- At least one element on canvas (div block, heading, card, image)
- Interactions panel accessible — press H or click the lightning bolt icon in the right sidebar
Step-by-step guide
Set up your element and give it a class
Set up your element and give it a class
Click the element you want to fade in (e.g., a card div block). In the Style Panel (S), click the selector field at the top and type a class name such as 'fade-item'. Press Enter to apply. Having a class is essential because it lets you apply the interaction to every element sharing this class in one step.
Expected result: Element has a named class visible in the Style Panel selector field.
Set the initial invisible state
Set the initial invisible state
With your element selected, go to the Interactions panel (H) on the right sidebar. Click 'Element triggers' section, then '+ Add trigger'. Select 'Scroll Into View'. The panel will now show 'When scrolled into view' and 'When scrolled out of view' sections. Click 'When scrolled into view' > 'Start an Animation' > '+ New Animation'. Name it 'Fade In'. You are now in the animation timeline. This first action defines where the animation STARTS (the initial invisible state). Click '+' to add an action, choose 'Opacity', set it to 0%, duration 0s (instant). Click '+' again, choose 'Move', set Y to 50px, duration 0s. This makes the element start off-screen and invisible.
Expected result: The element disappears on canvas — it is now at Opacity 0 and shifted 50px down.
Add the fade-in animation keyframe
Add the fade-in animation keyframe
Still inside the same animation timeline ('Fade In'), click '+' to add a second set of actions. Choose 'Opacity', set it to 100%, duration 0.6s, easing 'Ease Out'. Click '+' again, choose 'Move', set Y to 0px, duration 0.6s, easing 'Ease Out'. These two actions at the same time position in the timeline will play simultaneously — the element fades in while rising up, completing the classic reveal effect.
Expected result: When you preview the page and scroll to the element, it fades in from below over 0.6 seconds.
Enable 'Play once' and set trigger scope to Class
Enable 'Play once' and set trigger scope to Class
Back in the Interactions panel trigger settings, find the 'Scroll Into View' trigger options. Enable the 'Play once' toggle — this prevents the element from re-animating every time it enters the viewport. Then look for the 'Trigger scope' dropdown. Change it from 'This element only' to 'Class: fade-item'. Now every element on the page with the 'fade-item' class will use this same interaction without you needing to set it up again.
Expected result: All elements with 'fade-item' class now fade in on scroll. New elements you add with the same class automatically inherit the animation.
Set scroll offset for a better visual trigger point
Set scroll offset for a better visual trigger point
In the Interactions panel with the Scroll Into View trigger selected, find the 'Offset' slider below the trigger settings. Set the offset to 10–15%. This means the animation fires when the element is 10–15% inside the viewport from the bottom edge, rather than the exact moment 1px enters the screen. This makes the reveal feel intentional and gives the user a moment to notice the element before it animates.
Expected result: Elements begin their fade-in animation slightly after entering the bottom of the viewport — the timing feels natural rather than instant.
Add a Page Load fade-in for above-the-fold content
Add a Page Load fade-in for above-the-fold content
For hero headings and above-the-fold content that should animate when the page loads (not on scroll), select the element and go to Interactions panel (H) > 'Page triggers' > '+ Add trigger' > 'Page Load'. Choose 'When page finishes loading'. Click 'Start an Animation' > '+ New Animation', name it 'Hero Fade In'. Add two keyframes: first at 0s — Opacity 0%, Move Y 30px (instant); second at 0.8s — Opacity 100%, Move Y 0px, Ease Out. This creates a smooth hero entrance without requiring the user to scroll.
Expected result: Hero content smoothly fades in from slightly below as soon as the page fully loads.
Create a staggered multi-card entrance
Create a staggered multi-card entrance
For a row of cards that should cascade in one by one, select the first card and apply the 'fade-item' class interaction from Step 4. Select the second card → Interactions panel → Scroll Into View → When scrolled into view → Use the same 'Fade In' animation but click the delay field and add 0.15s. Set the third card to 0.3s delay, fourth to 0.45s. Alternatively, in GSAP Interactions, select the parent container and use the 'Staggered motion' built-in setting with 0.15s between each child — a much faster workflow.
Expected result: Cards fade in one after the other with a visible cascade effect, creating a polished sequential reveal.
Complete working example
1Fade-in animations in Webflow are fully visual. All steps are done in the Interactions panel (H). No Embed element, Page Head Code, or custom JavaScript is needed. For staggered animations on CMS Collection Lists (where each item has the same class), use GSAP Interactions' native Staggered motion setting instead of manual per-element delays.Common mistakes
Why it's a problem: Element stays invisible after the page loads and never fades in
How to avoid: You set the initial Opacity 0 state but the animation never played. Check that you are using 'Scroll Into View' (not a Page Load trigger) for below-the-fold elements, and confirm the 'Play once' setting is ON. Also verify the element is actually below the viewport when the page loads — if it starts visible, Scroll Into View never fires. Preview the page at full browser height to test.
Why it's a problem: Animation plays in Designer canvas but not on the published site
How to avoid: JavaScript interactions do not execute in the Designer canvas (only in Preview mode). Click the eye icon at the top right to enter Preview, or publish to staging/production. The canvas is a design environment, not a live runtime.
Why it's a problem: All elements with the same class fade in simultaneously instead of staggering
How to avoid: Class scope triggers all matching elements at the same time with the same timing. For staggered entrance, either use GSAP Interactions' 'Staggered motion' setting on the parent container, or manually add increasing delays per element in Classic Interactions (0s, 0.15s, 0.3s, etc.).
Why it's a problem: The 'fade-item' class triggers show an orange dot instead of blue in the Style Panel
How to avoid: Orange indicates the style is inherited from a parent breakpoint (e.g., Desktop styles showing on Tablet). This does not affect interactions but confirms you are viewing an inherited breakpoint. Interactions work identically across breakpoints unless you explicitly disable them per device in the interaction's breakpoint checkboxes.
Best practices
- Always set initial states at 0s duration — never animate TO the invisible state, only FROM it
- Use Transform Move Y + Opacity together; Move alone looks mechanical, Opacity alone looks flat
- Enable 'Play once' on Scroll Into View triggers — repeated re-animations are distracting
- Set trigger scope to Class whenever you have multiple matching elements — set up once, applies everywhere
- Keep fade durations between 0.4s and 0.8s. Under 0.4s is too fast to register; over 0.8s feels slow
- Avoid animating Width, Height, or Margin — these trigger layout reflow and cause jank. Stick to Opacity and Transform
- Test on mobile: interactions can lag on low-power devices. Preview on a real phone before publishing
- Use the Interactions panel broom icon periodically to clean unused animations and keep your project tidy
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Webflow site and want to add fade-in scroll animations. I want headings and cards to fade in from below as the user scrolls. Each card should cascade in with a 0.15s stagger. I am using Classic Interactions (not GSAP). Walk me through the exact steps including how to set initial states, add the Scroll Into View trigger, set the offset, and apply the interaction to multiple cards at once using class scope.
Add a scroll-triggered fade-in animation to all elements with the class 'fade-item'. Initial state: Opacity 0, Move Y 50px, instant. Final state: Opacity 100%, Move Y 0px, 0.6s Ease Out. Enable Play Once. Set trigger scope to Class. Also add a Page Load fade-in to the hero heading with 0.8s Ease Out timing.
Frequently asked questions
Can I fade in elements without a paid Webflow plan?
Yes. Interactions 2.0 (Classic) works on the free Starter plan in the Designer — you can build and preview fade-in animations at no cost. However, publishing interactions to a live site requires at least a Basic paid site plan. Custom code (Embed elements) also requires a paid plan.
Why does my element flash visible for a split second before fading in?
This happens when the initial state (Opacity 0) is set with a delay instead of 0s duration. The browser renders the element at full opacity for one frame before the interaction initialises. Fix it by ensuring the first keyframe in your animation timeline is set to 0s duration — it should be an instant snap to invisible, not a timed transition.
How do I make CMS Collection List items fade in with a stagger?
In Classic Interactions, class scope triggers all collection items simultaneously, so manual staggering requires per-element delays which is impractical for CMS. Switch to GSAP Interactions: select the Collection List wrapper, add a Scroll Into View trigger, and use the built-in 'Staggered motion' setting with a 0.15s delay. Each list item will cascade in automatically regardless of how many items the CMS returns.
Should I use Page Load or Scroll Into View for my hero section?
Use Page Load for hero content that is visible without scrolling — heading, subheading, and CTA button. Use Scroll Into View for everything below the fold. Mixing both on the same page is common and recommended: above-the-fold elements greet the user on arrival, while below-the-fold elements reveal progressively as the user explores.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation