How to recreate a GSAP or ScrollTrigger animation you saw on another website

October 18, 2026

3 min readWorked example included

You find a site where the headline slides in word by word, or a section scrubs as you scroll, and you want to know how it is done. The GSAP forum will not help much: its staff say they do not offer free consulting or tutorials on recreating effects from other sites. The method is short. Confirm it is GSAP, read each effect’s properties, easing and trigger, rebuild it, then check it against the original.

Step 1: Confirm the library

Type window.gsap in the browser console. An object means GSAP; undefined does not rule it out, because bundled sites often keep GSAP out of the global scope. A more reliable check is to watch the page run. Paste the URL into the free animation library checker, or read five ways to find out what animation library a website uses. If the site also scrolls smoothly, check for Lenis too (how to tell).

Step 2: Read what each effect does

For every effect you want, write down four things: which properties change (opacity, y, scale, rotation), the duration, the easing, and the trigger (a scroll range, a hover, or page load). You can do it by hand with the browser’s animation panel and a lot of patience, or have a capture tool read the tweens. Here is what a capture reported for the homepage of enrichr.dev itself, which uses GSAP, ScrollTrigger and Lenis:

The same capture listed 284 GSAP animation entries in total, many of them repeats of these few patterns across different elements. That is normal: a site rarely has 284 different ideas, it has a handful of patterns applied to many targets.

Step 3: Rebuild it

With the four facts for an effect, the code is short. An entrance reveal, triggered when an element is 85% of the way down the screen:

gsap.registerPlugin(ScrollTrigger);

gsap.fromTo(".reveal",
  { opacity: 0, y: 40 },
  { opacity: 1, y: 0, duration: 0.5, ease: "power1.out",
    scrollTrigger: { trigger: ".reveal", start: "top 85%" } });

A section whose animation follows the scrollbar:

gsap.to("#how .layer", {
  yPercent: -20, ease: "none",
  scrollTrigger: { trigger: "#how", start: "top bottom", end: "bottom top", scrub: 0.2 }
});

If the original also uses Lenis, connect it to ScrollTrigger so they share one clock. Per Lenis’s own documentation, update ScrollTrigger on Lenis’s scroll event, drive Lenis from GSAP’s ticker, and turn lag smoothing off:

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

These are starting points built from the measured values, not the other site’s code. Selectors, targets and exact numbers will differ in your project.

Step 4: Verify against the original

A tween that appears in a capture is evidence that it exists, not that it fires where you think. A site can ship an animation for a route, a state or a feature flag you never saw. Before you commit to a rebuild, scroll the live page and watch the effect, then put your version next to it at the same window size and scroll the same way. If the two disagree, trust what you see on the original. When you use a capture tool through Claude, ask it to check the live page in a browser before it writes the code.

What you can reuse

Durations, easings and scroll ranges are numbers, and writing your own code that produces the same feel is ordinary front-end work. Copying someone’s source, text, images or brand is different. If you are rebuilding a particular site closely, read is it legal to copy a website design? and how to rebuild an Awwwards Site of the Day, legally.

FAQ