Clicking a card's title shows that sample's code in the left panel. It stays there after you move away from the card, so you can compare several samples before choosing one.
Changing the accent and sub colors updates the live demo immediately. It reaches the copied code too, though the
<style> block there is trimmed to the structural rules, so samples that declare no colors of
their own stay unchanged. Your choice is
stored in the browser and restored on your next visit; “↺ Reset colors” puts the defaults back.
Cards labelled “↓ Scroll inside” have their own scrollable area. You can check the scroll-linked behaviour in place, without moving the whole page.
The format of start and end is the first thing that trips people up. Each value is two
space-separated tokens: the left one is a position on the trigger element, the right one a position in
the viewport.
"top 88%" … when the element's top reaches 88% down the viewport"top top" … when the element's top meets the top of the viewport (common for pinned scenes)"bottom bottom" … when the element's bottom meets the bottom of the viewport"center center" … when the element's center meets the center of the viewport
If the timing is not what you expected, add markers: true to draw the start and end lines on
screen. The “Debug with markers” card in the gallery shows what that looks like.
Yes. When Webflow acquired GSAP in 2025, every plugin — including the ones previously reserved for Club GreenSock members — became free to use, commercial projects included. Licensing terms can still differ by distribution method, so check the official GSAP site for the current wording.
Usually it is script order. GSAP code needs the target elements to already exist, so place the
<script> just before </body> or add the defer attribute. The
next most common cause is a selector mismatch: rename the classes in the snippet to match your own markup. For
ScrollTrigger samples you need both the ScrollTrigger.min.js file and the
gsap.registerPlugin(ScrollTrigger) line.
So that several scroll effects can sit side by side on one screen, each card has its own scrollable area and
ScrollTrigger's scroller option points at it. The copied code contains no scroller
option and uses the normal setup where the page itself scrolls, so it works as-is on a real page.
Not for this gallery. Character splitting is done with plain JavaScript span elements, SVG line
drawing with stroke-dasharray and stroke-dashoffset, and shape morphing by
interpolating the points attribute of polygons with matching vertex counts. The only files loaded
are gsap.min.js plus ScrollTrigger.min.js or Draggable.min.js where
needed.
Yes, but because the code touches the DOM directly, initialise it inside useEffect or
useLayoutEffect (a client component when using the Next.js App Router). Tweens and ScrollTriggers
left behind on unmount cause duplicate animations, so clean them up together with gsap.context()
and its revert() method, or with the useGSAP hook.
On mobile the viewport height changes as the address bar shows and hides, which shifts your start
and end positions. Three fixes cover most cases: use 100svh or dvh
instead of 100vh, set invalidateOnRefresh to true, and call
ScrollTrigger.refresh() once images have loaded. Passing a number to scrub also lowers
rendering cost and reads as smoother.
Yes. When prefers-reduced-motion is set to reduce, stop the animation or switch to a
calmer version. GSAP provides gsap.matchMedia(), which lets you register different animations per
media query and swaps them automatically.
If you would rather stay in CSS without JavaScript, see the CSS Animation Gallery; for link and navigation styling there is the CSS Hover Effects Gallery, and for a GSAP-powered 3D carousel the 3D Carousel Generator.