Instructions
How to Edit GSAP Animations
Every animation in this template is a Webflow Interaction: open the Interactions panel and everything below is listed there by name.
Where the animations live
In the Designer, open the Interactions panel. The interactions are site wide, so they work on every page, including new ones you build: an element joins an animation by carrying the class or the custom attribute named below. For a visitor who asks for reduced motion, every interaction that moves content either plays to its end at once or does not run, so nothing waits hidden for an animation that will not come.
1. Element map
Twenty interactions, the trigger each one listens to, and what it does. An element with none of these classes or attributes is not animated at all.
01
Headings arrive line by line
Scroll, on any element with data-anim="lines"
The heading is split into lines, and each line rises from under its own mask as the heading reaches 88 per cent down the screen.
02
One paragraph is read word by word
Scroll, on data-anim="read"
The words brighten from 68 to 100 per cent opacity in reading order, tied to the scrollbar. Meant for a single sentence that carries the page.
03
Blocks rise on scroll
Scroll, on data-anim="rise"
A block arrives from 22px below with a short fade.
04
Rows of cells arrive in turn
Scroll, on data-anim="stagger"
The direct children of the block arrive one after another, left to right, from 24px below. Put the attribute on the wrapper, never on the cells: the cells are what moves. The case file strips use it too.
05
Figures settle digit by digit
Scroll, on data-count-from
Each digit of a figure rises from under its own mask, one after another. The value of the attribute is not read; the attribute only marks the figure.
06
Pictures develop in place
Scroll, on .reveal_mask
The frame rises while the photograph inside it settles, moving 4 per cent of its height and scaling from 110 to 100 per cent, tied to the scrollbar. The shift always stays inside the room the scale leaves, so no edge of the frame opens. Any image wrapped in this class gets it.
07
Plates hold their picture back
Scroll, on .plate_component
The full bleed photograph behind a plate drifts against the scroll, 12 per cent of its own height across the whole pass.
08
Chapter rail fills as the section is read
Scroll, on .method_rail
The accent line inside the sticky rail grows from top to bottom while its section crosses the middle of the screen.
09
Header rule shows how far the page is read
Scroll, on .main-wrapper
The accent rule under the navigation fills from left to right over the whole page.
10
Header takes the ground of the section under it
Scroll, on every .section-style-ink section
While an ink section sits under the navigation, the navigation takes the same ink ground and the logo turns to paper.
11
Header takes the ink ground over the footer
Scroll, on .footer_component
The same change over the footer, which sits outside the main content. A scroll trigger is the only trigger an interaction can have, so the footer has its own.
12
Links are pulled out of their line
Hover, on .navbar_link and .footer_link
On mouse devices a navigation or footer link slides 4px to the right while its line takes the accent colour. The line itself is the link's own bottom border; its colour is a hover state of the class.
13
Text links are pulled out of their line
Hover, on .button.is-link
The same 4px slide for a text link, so every link on the page answers in one way.
14
Buttons come forward
Hover, on .button (every variant except the text link and the disabled button)
The button lifts 2px; its fill and text colour change in the hover state of the class.
15
The mark steps forward
Hover, on .navbar_brand
The logo slides 4px to the right.
16
The menu label steps forward
Hover, on .navbar_toggle
Below 992px the word Menu slides 3px to the right inside its button.
17
Register rows open
Hover, on every linked .index_row
The number slides 4px and the text 10px, so the gap between them opens; the line over the row takes the accent colour. A row that is not a link carries is-static and does not move.
18
Case files come forward
Hover, on every linked .card_component
The picture grows to 105 per cent inside its mask, the title slides 6px to the right and the line over the card takes the accent colour.
19
Linked rows open
Hover, on every linked .rows_item
The title column slides 8px to the right.
20
Choices swell
Hover, on .form_check
The checkbox or radio mark grows to 115 per cent and its text slides 3px to the right.
2. Customising the key variables
Every value you are likely to change sits in the interaction itself: select it in the Interactions panel, then the action in its timeline. Slower and softer is usually the right direction: doubling a duration is safe, halving it rarely is.
Speed of the heading arrival
In «Headings arrive line by line» the action lasts 0.7 seconds per line with a 0.07 second stagger between lines. To slow the whole arrival down, raise the duration to 1.2 and the stagger to 0.12.
How dim the unread words start
In «One paragraph is read word by word» the words start at 68 per cent opacity. That is a floor, not a taste: below it the dimmed word drops under the 4.5:1 contrast the rest of the template holds. Raise it towards 100 for a quieter effect. Do not lower it.
How far the photographs travel
In «Plates hold their picture back» the photograph moves from minus 6 to plus 6 per cent of its own height. The image is deliberately 116 per cent of the frame so no edge ever shows. If you raise the travel past 8, raise the height too.
When an animation starts and ends
Each scroll trigger has a start and an end. top 88% means the animation begins when the top of the element reaches 88 per cent down the screen; lower the number to make it start later. Scrub ties the animation to the scrollbar, and its number is the time in seconds it takes to catch up. Switch scrub off and the animation plays once at its own speed.
3. Removing an animation
Three ways, depending on how much you want gone.
One element. Remove the attribute or the class from that element in the Designer. For a heading, delete data-anim="lines" from its custom attributes. The heading then appears with the page, in place, with no other change to the layout.
One whole animation, everywhere. Delete that interaction in the Interactions panel. Nothing in the layout depends on it: every element is styled into its final position by its class, and the interaction only changes how it arrives.
All of it. Delete every interaction in the panel. The navigation below 992px keeps working: the header is Webflow's own Navbar, and the menu opens with the Navbar's own animation.
What you will see afterwards: headings, paragraphs, figures and images appear immediately instead of arriving; the photographs sit still instead of drifting; hovering a link, a row or a case file no longer moves it, only the colours still change; the rail keeps its labels but loses the filling line; the rule under the navigation stays empty; the navigation keeps its paper ground over ink sections.