Recipes

Recipes 20

• Add a staggered reveal to any list with one attribute

  Drop fc-gsap-staggered="list" on the div wrapping your items — or straight onto a Collection List — and the included script builds a staggered slide-and-fade with sensible defaults; every other option is a bare attribute you add only when you want tighter control over timing, motion or order.

• Build a cursor spotlight and an SVG prism hover

  The spotlight is darkness with a hole in it — an oversized radial-gradient overlay moved by a mouse-move interaction — and the prism is an SVG filter that splits the image into R, G and B channels with zero offsets at rest, so a small GSAP timeline animating those offsets pulls the colours apart on hover and focus.

• Build a glass button that refracts the page behind it

  A real SVG displacement-map filter wired to the button through backdrop-filter bends whatever scrolls underneath, and a tiny GSAP timeline hardens it from frosted glass to crisp ice on hover — but SVG filter references in backdrop-filter are Chromium-only, so Safari and Firefox visitors see the plain frosted base and none of the refraction.

• Build a light/dark theme toggle

  Put every themed colour in a variable collection with a second manual variable mode, then the whole theme switch is a GSAP set action toggling one class on the html element; a theme-transition class added for 0.8s smooths the change without colliding with your other animations, and two small scripts make the choice survive a reload.

• Build a scroll-driven 3D cube gallery from CMS data

  This is a build, not a snippet — the value is four ideas rather than a click path: scroll distance becomes animation time via a tall section and a sticky window, each cube face's transform lives in the CMS as numeric fields, the interaction is scrubbed rather than triggered, and real 3D needs perspective on the parent plus preserve-3d on the cube.

• Build a seamless infinite marquee

  Duplicate the content into two identical trail groups side by side and animate them by -100% of their own width on an infinite linear loop, so the second group lands exactly where the first began and the reset is invisible; -100% rather than a measured width is what makes it work for any item count.

• Build a stack of draggable, throwable cards

  GSAP's Draggable plugin powers a photo-stack you can grab, tilt and toss off-screen, driven entirely from Webflow settings by fc-draggable-card attributes; the two structural details that make it feel right are overflow hidden on the section and a pointer-events pairing that lets clicks reach the reset button once the deck is empty.

• Build an accessible dialog or slide-in panel

  A dialog is one GSAP timeline played forward to open and reversed to close, plus four non-negotiable ARIA attributes, real button elements, an outside-click overlay stacked behind the panel, and a scroll lock — and it is not finished until focus is managed.

• Build animated hover buttons — and know when not to use GSAP

  Five button effects share three reusable moves: an overflow-hidden wrapper masking a moving child, animating width from 0 to auto, and pushing an incoming overlay to -101%; the real lesson is the tool boundary — CSS for the element's own properties, GSAP the moment you must reach into a child.

• Cut letters out of a solid block with a normalised clip-path

  This is a build, not a snippet — the transferable technique is cutting a shape out of a solid field with a CSS clip-path built as the negative around the letters in Figma, then normalising the exported path's absolute pixel coordinates into the 0–1 range that objectBoundingBox expects.

• Disintegrate an image into fragments on scroll

  One attribute turns an image into a cloud of canvas fragments that scatter and fade as you scroll — the script snapshots the image with html2canvas, rebuilds it as fragments and animates them with ScrollTrigger; it needs a non-static position on the component and overflow hidden around it, and it is expensive enough that it belongs on a hero, not a grid.

• Draw a border on hover with a conic gradient

  There is no border — a slightly larger wrapper behind the element leaves a visible ring, filled by a conic gradient whose fill percentage is registered with @property so it can actually transition; GSAP's only job is toggling one class on the hovered instance's wrapper.

• Grow CMS images from the centre and scatter them into a grid

  An embed inside the collection item lets CSS read each item's own CMS order, compute how far it sits from the grid centre, and multiply that shift by a move-factor variable — so animating one variable from 1 to 0 releases every card from the centre into its real cell, with the scatter's start time derived arithmetically from the grow stagger.

• Lock page scroll while an overlay is open

  Scroll locking in Webflow is a state change, not an animation, so it belongs in a GSAP set action at the start of the open timeline — either flipping body overflow to hidden via a custom selector, or toggling an overflow-hidden class when the close animation needs to finish first.

• Pin an element and shrink it into the corner on scroll

  A picture-in-picture effect is a discrete state change, not a scrub — trigger actions with leave → play and enter back → reverse, a combo class carrying all three sticky properties, and one number variable multiplied into three calc-based transforms so a single animate-variable action drives the move and the scale together.

• Play an image sequence on a canvas as the page scrolls

  The Apple-style scroll animation is ~150 stills swapped on a canvas — no video, no WebGL, no Lottie; the build splits into an asset pipeline (extract, compress, upload, then fetch the CDN URLs via the Webflow Data API because Webflow renames every file) and a runtime of two attributes on a tall section with a sticky container.

• Reveal a heading word by word or letter by letter on page load

  Enable Split Text on the action so one heading becomes many targets, set the type to from with opacity 0 and move Y 100%, turn the mask on to match the split unit so each piece is clipped, and choose offset time for a fixed rhythm or total time to fit a slot on the timeline.

• Stagger a grid row by row as it scrolls into view

  GSAP's own stagger cannot do this, so invert the responsibility — a set action adds an in-view class to each card as it enters the viewport, CSS transitions do the animation, and a per-card transition-delay computed from sibling-index() and a column-count variable produces a stagger that resets on every row and re-derives itself at every breakpoint.

• Switch between discrete states with jump to and pause

  Treat the timeline as a set of states rather than something you play through — a zero-duration action per state at a fixed time, each trigger jumping the playhead to its own time with control play, and one catch-all event with control pause freezing it there; a CSS transition, not the timeline, does the smooth part.

• Trap keyboard focus inside an open panel

  A GSAP interaction can animate a dialog but cannot manage focus, so a keyboard user Tabs straight out of it into the page behind; this script moves focus in on open, cycles Tab inside the panel, closes on Escape, and returns focus to the control that opened it.