@aw-webflow/text_reveal_on_scroll

Custom JavaScript for a Webflow page, published to npm and served via jsDelivr.

What it does

Pins the #text_wrapper section to the viewport and fades its words in one by one as you scroll. The reveal is scrubbed, so opacity is tied directly to scroll position.

Required Webflow markup:

<div id="text_wrapper">
  <div class="workforce-display-txt">Your sentence goes here</div>
</div>

Set the resting/dim opacity on .workforce-display-txt in Webflow (e.g. 0.2) — the script reads that value, applies it to each generated word span, and animates each word up to 1.

Dependencies: GSAP core + ScrollTrigger must load before this script.

Tunable constants at the top of script.js: SCROLL_PER_WORD (scroll px per word, lower = faster reveal) and PIN_START (where the section sticks, e.g. "top 30%").

Usage via jsDelivr CDN

Add this to the Webflow page's custom code (before </body>):

<!-- GSAP + ScrollTrigger first -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@aw-webflow/[email protected]/script.min.js"></script>

Replace 1.0.0 with the version you want to pin to:

https://cdn.jsdelivr.net/npm/@aw-webflow/text_reveal_on_scroll@<version>/script.min.js

Deployment Workflow

1. Push your changes to GitHub.
2. Bump the version field in package.json.
3. Publish to npm:

   npm publish --access public

4. Update the <script> tag in Webflow to the new version, then publish the Webflow site.

Local Development

npm install
npm start

npm start runs Parcel against script.js for local development.