Instructions
Everything is already wired up. This page shows how to tweak each animation directly from the Webflow Designer — no code changes required.
Every animation is controlled by an HTML attribute (or a specific class name, for hover effects). Add the attribute to enable, remove it to disable, change the value to tweak behavior. All defaults are sensible — you only need to touch the optional modifiers when you want a different feel.
How to Add or Remove an Attribute
All animations on this template are triggered by custom attributes placed on elements. You can add, edit, or remove them directly inside the Webflow Designer without touching any code.
Select the element you want to animate in the Webflow Designer canvas.
Open the Settings panel (gear icon in the top-right, or press D).
Scroll down to Custom Attributes and click the + button.
Type the attribute Name (for example, data-reveal) and, if needed, the Value. Some attributes are toggle-only and don't need a value.
To remove an attribute, hover over the row and click the trash icon. Publish the site to see the change live.
Scroll Reveal
Fades an element up into view as it enters the viewport. Add this attribute to any element you want to animate in on scroll. Remove it to disable.
1<h2 data-reveal data-reveal-delay="0.2">Heading fades up</h2> 2 3<div data-reveal-stagger="0.1"> 4 <div>Child 1</div> 5 <div>Child 2</div> 6 <div>Child 3</div> 7</div>
Text Highlight
Reveals a heading line by line with a sweep effect when it enters the viewport. Used on display headings across the template — add it to any heading you want to get the same treatment.
1<h1 data-text-highlight>Your heading goes here</h1>
Text Fade
Word-by-word opacity reveal that follows the user's scroll position. Best for long statement paragraphs where you want the words to appear one after the other as the user scrolls through.
1<p data-text-fade> 2 Long paragraph that reveals word by word as you scroll. 3</p>
Fade Stagger
Cascading fade for a group of child elements — each child animates in sequence when the parent scrolls into view. Works for grids, feature lists, image rows, and similar collections.
1<div data-fade-stagger="0.08"> 2 <div>Item 1</div> 3 <div>Item 2</div> 4 <div>Item 3</div> 5</div>
Arc Marquee
Infinite-loop marquee used for image strips or logo rows. To change the items inside, just edit the children normally in the Designer — the loop keeps working.
1<div data-arc-marquee data-arc-marquee-speed="40"> 2 <div data-arc-marquee-track> 3 <div data-arc-marquee-item>Item A</div> 4 <div data-arc-marquee-item>Item B</div> 5 <div data-arc-marquee-item>Item C</div> 6 </div> 7</div>
Works Stack
Scroll-driven stack of project cards — each card peels back revealing the next. Use it to showcase a CMS collection. Two variants are available depending on whether you want the section to stay pinned during the sequence.
1<div data-works-stack> 2 <a data-works-card data-works-name="Project A">...</a> 3 <a data-works-card data-works-name="Project B">...</a> 4 <div data-works-cursor> 5 <div data-works-cursor-label></div> 6 </div> 7</div>
Class-Based Hovers
Hover effects that run automatically wherever the matching class appears. No attributes required — the class names are the trigger. To keep these animations working, don't rename the class or its inner structure.
1<a class="button">
2 <div class="button_bg"></div>
3 <div class="button_text">
4 <div class="button_text_main">Label</div>
5 <div class="button_text_hover">Label</div>
6 </div>
7</a>Frequently asked questions about working with us.
We start with a discovery call to understand your goals, then move into strategy, design, and development. Most projects include brand direction, UI/UX design, motion, and production-ready code — delivered in focused sprints with regular check-ins.
Timelines depend on scope. A single-page site can ship in 2–3 weeks, while a full multi-page project typically takes 4–8 weeks. We set clear milestones upfront so you always know where things stand.
The subscription gives you unlimited design and development requests, handled one at a time in priority order. You get async updates, bi-weekly strategy syncs, and the flexibility to adjust priorities as your product evolves.
Yes. The subscription plan is fully flexible — pause when you don't have work queued up, and resume when you're ready. No long-term contracts, no cancellation fees. You're in control.
