FX-012 · Scroll Scenes
Scroll animations as attributes.
Webflow-style interactions, written in the markup. Describe where an element comes from and it animates in as it arrives. Add scrub and it follows the scroll both ways, or give it a parallax rate, a number to count up to, or a line to draw.
- Weight2.1 KB
- LibraryGSAP
- PhonesWorks
- Licence€39
Live · Reveal
One attribute.Staggered.
Say where it comes from, and it animates in as it slides into view.
Live · Count
1200 sites
Count up to any number in the text.
Live · Draw
Draw any SVG line as it arrives.
Live · Parallax
Drift.
Give it a rate, and it drifts across the scroll.
01 — Details
What it does.
Say where it comes from
Describe the start in the markup, such as y:80; opacity:0, and it animates in as it arrives.
Scrub both ways
Add scrub and the animation follows the scroll forwards and back.
Count, draw, parallax
Count up to a number, draw SVG strokes, or drift across the scroll, each from one attribute.
Follows the track
Inside a horizontal track, everything measures sideways.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build an attribute-driven scroll animation system for this website with GSAP and ScrollTrigger. Behaviour - Any element can declare where it comes from in its markup, such as data-from="y:80; opacity:0", and animate to its natural state as it arrives. - Optional modes: scrub (follows the scroll both ways), children (animates each child, staggered), parallax (drifts across the scroll), count (counts up to the number in the text) and draw (draws the SVG strokes inside). Build - Parse the attribute into a GSAP vars object: split on semicolons, then on the first colon, and turn numeric strings into numbers. - Create one gsap.from per element, with ScrollTrigger at "top 85%", once, ease expo.out and about 1s. For scrub, use a fromTo with a start and an end. - For count, tween a plain number and write rounded text. For draw, set stroke-dasharray and stroke-dashoffset from getTotalLength(). Must hold - Hide elements only once JavaScript is running, so content never disappears if the script fails. - A trigger created after the page has scrolled past it must play at once, or that content stays hidden. - Inside a horizontal track, pass containerAnimation and measure from "left". - A rebuild must read the real final number, not a 0 left by a half-finished count. - With prefers-reduced-motion, show every element in its final state. - Revert with gsap.context on teardown. Done when a page works with the script blocked, a jump to the bottom shows everything, and a resize keeps triggers in the right place.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script>
<h2 data-fx="scene" data-fx-scene-from="y:60; opacity:0">
Arrives
</h2>
<ul data-fx="scene" data-fx-scene-from="y:30; opacity:0"
data-fx-scene-children>…</ul>
<strong data-fx="scene" data-fx-scene-count>1200</strong>
| Option | Default | What it does |
|---|---|---|
| data-fx-scene-from | — | Where it comes from, as y:80; opacity:0 |
| data-fx-scene-to | — | With scrub: where it ends up |
| data-fx-scene-scrub | — | Follow the scroll |
| data-fx-scene-children | — | Animate the children, staggered |
| data-fx-scene-stagger | 0.08 | Seconds between children |
| data-fx-scene-duration | 1 | Seconds |
| data-fx-scene-ease | expo.out | Any GSAP ease |
| data-fx-scene-parallax | — | Drift, in % of its size |
| data-fx-scene-count | — | Count up to the number in the text |
| data-fx-scene-draw | — | Draw the SVG strokes inside |
04 — FAQ
Questions.
Do I need to write JavaScript?
No. Every animation is a set of attributes in your HTML, and the small runtime does the rest.
Does it replace Webflow interactions?
It covers the same ground in plain HTML: reveals, scroll-linked movement, parallax, count-ups and line draws. It works on any stack.
What if the script is blocked?
Your content stays visible, because elements are only hidden once the script is running.
What about reduced motion?
Every element sits in its final state, with nothing moving.
Licence
Scroll Scenes · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.