Guide
Instructions
This page explains how to customize every animation and interactive element in this template. Each feature is labeled with where to find it and what you can change — no coding experience required.
Custom Attribute
Controlled via data attributes you add to elements
Class Structure
Requires specific class names on elements
Interactions Panel
Editable in Webflow's Interactions panel
Part 1
Custom Code
These animations are powered by JavaScript in your Site Settings. You control them by adding custom attributes to elements — the code reads those attributes automatically.
01
How to Add Custom Attributes
Custom attributes are the main way you control animations in this template. Here's how to add them to any element in the Webflow Designer.
Where
Site Settings → Custom Code → Before </body> tag
1
Select the element you want to animate in the Webflow Designer
2
Open the Settings panel by clicking the gear icon in the right sidebar
3
Scroll down to the Custom Attributes section
4
Click the + button to add a new attribute
5
Enter the attribute name (e.g. data-animate) and the value (e.g. fade-up) as described in each section below
The custom code lives in Site Settings and runs on every page. You never need to edit the code itself — just add or change the attributes on your elements.
02
Custom Attribute
Scroll Reveal
Animate elements when they scroll into view. The element starts invisible and smoothly appears as the user scrolls down. Triggers once per element.
Where
Element → Settings panel (gear icon) → Custom Attributes → +
Attribute
data-animate = fade-up
Available values
fade-up
Fades in while sliding upward
fade-down
Fades in while sliding downward
fade-left
Fades in while sliding from right to left
fade-right
Fades in while sliding from left to right
scale-up
Fades in while scaling up slightly
Optional controls
Add these extra attributes alongside data-animate to fine-tune the animation.
data-delay
Default: 0
Delay before the animation starts, in seconds
data-duration
Default: 0.8
How long the animation takes, in seconds
Example
Fade up with a slight delay and a longer duration:
data-animate = fade-up
data-delay = 0.2
data-duration = 1
03
Custom Attribute
Counter
Animate a number counting up from zero to your target when the element scrolls into view. Ideal for statistics, awards, or any numeric data you want to highlight.
Where
Element → Settings panel (gear icon) → Custom Attributes → +
Attribute
data-count = 150
Optional controls
data-count-duration
Default: 2
How long the counting animation takes, in seconds
data-count-prefix
Default: none
Text displayed before the number (e.g. "$" or "#")
data-count-suffix
Default: none
Text displayed after the number (e.g. "+" or "%")
Example
Display "$1,250+" with a 3-second animation:
data-count = 1250
data-count-duration = 3
data-count-prefix = $
data-count-suffix = +
04
Class Structure
Button Hover
Buttons feature a slide-up hover animation. The main text slides out, hover text slides in, and a background color is revealed. This animation requires a specific class structure.
Where
Maintain the class names below on the button and its children. The animation runs automatically.
Required classes
button
The parent link or button element
button_text
Span with the default visible text (slides up and out on hover)
button_text-hover
Span with the hover text (slides in from below). Optional — omit if you only want the background to animate.
button_bg
Div that reveals the background color on hover (slides up from below)
Do not rename the child elements. The custom code finds them by these exact class names to animate each part of the button.
05
Custom Attribute
Testimonials Slider
The testimonials section on the About page features a custom slider that transitions between quotes with a smooth animation. Each slide carries its own company and role attribution.
Where
About page → Testimonials section → Select slide elements → Settings panel → Custom Attributes
Slide attributes
Each slide element uses these attributes to store its content:
data-testimonials-slide
Marks the element as a slide. Add this to each testimonial container.
data-company
The company name for this testimonial (e.g. "Google")
data-role
The person's role or title (e.g. "Creative Director")
Navigation & display
These attributes power the navigation buttons and the counter display:
data-testimonials-prev
Previous slide button
data-testimonials-next
Next slide button
data-testimonials-current
Displays the current slide number (updates automatically)
data-testimonials-total
Displays the total number of slides (updates automatically)
data-testimonials-company
Element where the current slide's company name is shown
data-testimonials-role
Element where the current slide's role is shown
Editing slides
Only the first slide is visible in the Designer — the others are hidden with display: none. To edit a hidden slide, select it from the Navigator panel (left sidebar). Webflow will reveal it temporarily while selected.
To add a new testimonial: duplicate an existing slide, update the quote text and the data-company and data-role attribute values. Make sure the new slide does NOT have the is--active class (only the first slide keeps it). The counter and navigation update automatically.
06
Custom Attribute
Theme Toggle
The home page has a light/dark mode toggle that switches the color palette with a smooth animation. The toggle reads its colors from Webflow Variables, so you can customize the palette without editing any code.
Toggle attribute
data-theme-toggle
This attribute is already applied to the toggle button in the header. No value needed.
How to change theme colors
1
Open the Variables panel in the Webflow Designer (V icon in the left sidebar)
2
Find the Theme group — it contains 14 color variables (7 for light mode, 7 for dark mode)
3
Edit any variable value to change the color for that mode. The toggle animation picks up the new colors automatically.
4
Publish and test — the toggle will use your updated colors on the live site
Variable reference
Important: Do not rename these variables. The custom code reads them by name. You can only change the color values.
theme-light-bg
Background color in light mode (default: #F4F4F2)
theme-light-primary
Primary text color in light mode — headings, nav links, name, clock (default: #1A1A18)
theme-light-secondary
Secondary text color in light mode — description, location, work meta (default: #8A8A88)
theme-light-muted
Muted color in light mode — divider, keyword borders, inactive label (default: #B3B3B1)
theme-dark-bg
Background color in dark mode (default: #000000)
theme-dark-primary
Primary text color in dark mode (default: #F4F4F2)
theme-dark-secondary
Secondary text color in dark mode (default: #8A8A88)
theme-dark-muted
Muted color in dark mode (default: #555555)
The tooltip variables (theme-light-tooltip-bg, theme-light-tooltip-dark, theme-light-tooltip-dark-text, and their dark counterparts) are also available but rarely need changing — they follow the primary and bg colors.
Part 2
Webflow Interactions
These animations are built with Webflow's native Interactions system. They are fully editable in the Webflow Designer — no code involved.
07
How to Edit Interactions
Webflow Interactions are animations you can edit visually in the Designer without touching any code. Here's how to find and modify them.
1
Select the animated element on the canvas
2
Click the lightning bolt icon in the right sidebar to open the Interactions panel
3
Click on the animation name to expand its timeline
4
Modify values like timing, easing, distances, or scale — changes are reflected live in the Preview mode
Use Webflow's Preview mode (the eye icon) to test your changes in real-time before publishing.
08
Interactions Panel
Scroll Animations
These animations are triggered by scrolling and are editable in the Interactions panel on each element.
Where
Select element → Interactions panel (lightning bolt icon) → Click animation name
Scroll Move (Footer Image)
The footer image moves vertically as you scroll, creating a parallax reveal effect. It travels from -25vh to 0vh as the footer section enters the viewport.
What to change
Adjust the "Move" Y values in the Interactions panel to change travel distance. Increase the range for more dramatic movement.
Find it on
The footer image wrapper (footer_image-wrap) on any page with a footer.
Scroll Scale In
Elements scale up from a smaller size as they scroll into view, creating a gentle zoom-in effect.
What to change
Modify the starting Scale values and the duration. A starting scale of 0.9 is subtle; 0.7 is more dramatic.
Find it on
Image wrappers in portfolio/work sections.
Scroll Fade Up
Elements fade in and slide upward as they scroll into view. Similar to the custom code scroll reveal, but handled natively by Webflow.
What to change
Adjust the Move Y distance (default ~20px), opacity start value, and delay. Add or reduce delay for staggered reveals.
Find it on
Text blocks and info elements in portfolio/work sections.
09
Interactions Panel
Hover Animations
These animations are triggered when the user hovers over an element and are editable in the Interactions panel.
Where
Select element → Interactions panel (lightning bolt icon) → Click animation name
Hover Scale X
A horizontal line that shrinks along the X-axis on hover, then returns to full width when the cursor leaves. Used on CTA underlines and decorative elements.
What to change
Modify the from/to Scale X values (default: from 1 to 0) and the transform origin point (default: left center). Try "right center" for a different reveal direction.
Find it on
CTA underlines and decorative line elements throughout the template.
All Webflow Interactions are non-destructive — you can always undo changes or reset to the original values. Use Preview mode to test before publishing.
