Have a look:

https://github.com/devieffe/VisualSelectionLayer

JS that replaces native text selection highlights with smooth,

unified selections featuring rounded corners, customizable padding,

colors, and animation effects.

Supports plain HTML, React, and GSAP with zero dependencies.

You'll want it for your projects.

See the Pen 01a11b28-e88b-74b9-b587-37fc0b64fb94 by editor (@editor) on CodePen.

//photos does not include the first child.
gsap.set(photos, {yPercent: 100})

const animation = gsap.to(photos, {yPercent: 0})

ScrollTrigger.create({animation: animation});

now I recreated it.
it works as it should when tween standalone played without Scroll Trigger

The animation goes like this 
inside the center div (photo frame)
a bunch of div inner elements(photo) is stacked on top of each other because of absolute position.
using gsap, it moves all the elements (except the first child) to yPercent of 100..
then it animates back to yPercent of 0 with stagger. it is simple and pretty much straight forward.

now when I put the animation in scroll trigger the starting point of an animation is set to a different yPercent.
it kind of animate from yPercent of 100 to yPercent of 0 but the first child which is supposed to be y:Percent 0 looks like -100.  the fix that I have right now is to set the to-Tween as yPercent of -100 to stack these photo elements on top of each other again.

I'll put the minimal demo on stackblitz
https://stackblitz.com/edit/stackblitz-starters-z6u7z7rp?file=components%2FSplitScreenPinningDemo.tsx

I'll provide my interpretation as image to elaborte things.

const fishSchoolLeft = container.current?.querySelectorAll(
        "#fish-school-left > *",
      );
      if (!fishSchoolLeft) return; 

//set is used to test if it works
 gsap.set(fishSchoolLeft, { rotateY: 90, transformPerspective: 800 })

so It did not work I even put a perspective on the group #fish-school-left and even added preserve-3d but no luck. 

with some research I found a workaround without the need of 3d, perspective stuff.
this is the one that worked on me:

      gsap.set(fishSchoolLeft, {
        scaleX: -1,
        transformOrigin: "center center",
      });

may I ask why is my first attempt did not work? is there a step I missed? 
for reference this is the group SVG
 

  <g id="fish-school-left">
            <g id="fish-small_18">
              <path
                id="Subtract_18"
                d="M942.336 1333C942.336 1334.33 944.052 1335.4 946.169 1335.4C948.247 1335.4 949.938 1334.36 950 1333.07V1337H927V1333C927 1334.33 928.716 1335.4 930.833 1335.4C932.884 1335.4 934.56 1334.39 934.662 1333.12L934.665 1333.04C934.696 1334.34 936.399 1335.4 938.497 1335.4C940.548 1335.4 942.224 1334.39 942.326 1333.12L942.331 1333H942.336Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_18"
                d="M957.816 1345.51C957.136 1345.15 957.102 1344.19 957.755 1343.78L966.775 1338.15C967.427 1337.74 968.277 1338.19 968.304 1338.96L968.675 1349.59C968.702 1350.36 967.886 1350.87 967.206 1350.51L957.816 1345.51Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_18"
                cx={938}
                cy={1345}
                rx={24}
                ry={10}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_18"
                cx={923}
                cy={1342}
                r={2}
                fill="#747474"
              />
              <path
                id="Rectangle 347_7"
                d="M937.5 1346H942.5L944.232 1354C944.232 1354 940.5 1353.5 939.5 1351.5C938.5 1349.5 937.5 1346 937.5 1346Z"
                fill="#C1D7DB"
              />
            </g>
            <g id="fish-small_19">
              <path
                id="Subtract_19"
                d="M990.652 1367C990.653 1369.23 993.538 1371.04 997.099 1371.04C1000.61 1371.04 1003.46 1369.28 1003.54 1367.09V1373.73H964.859V1367C964.86 1369.23 967.746 1371.04 971.307 1371.04C974.837 1371.04 977.702 1369.26 977.751 1367.06C977.8 1369.26 980.666 1371.04 984.196 1371.04C987.757 1371.04 990.643 1369.23 990.644 1367V1367H990.652V1367Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_19"
                d="M1015.65 1387.49C1014.97 1387.13 1014.93 1386.17 1015.58 1385.76L1032.76 1375.03C1033.41 1374.62 1034.26 1375.07 1034.29 1375.84L1034.99 1396.08C1035.02 1396.85 1034.2 1397.36 1033.52 1397L1015.65 1387.49Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_19"
                cx={983.364}
                cy={1387.19}
                rx={40.3636}
                ry={16.8182}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_19"
                cx={958.137}
                cy={1382.14}
                r={3.36364}
                fill="#747474"
              />
              <path
                id="Rectangle 347_8"
                d="M982.523 1388.87H990.933L993.846 1402.32C993.846 1402.32 987.569 1401.48 985.887 1398.12C984.205 1394.75 982.523 1388.87 982.523 1388.87Z"
                fill="#C1D7DB"
              />
            </g>
            <g id="fish-small_20">
              <path
                id="Subtract_20"
                d="M870.812 1362C870.812 1363.44 872.678 1364.61 874.98 1364.61C877.271 1364.61 879.13 1363.46 879.149 1362.03V1366.35H854.133V1362C854.133 1363.44 855.999 1364.61 858.302 1364.61C860.587 1364.61 862.442 1363.46 862.47 1362.04C862.498 1363.46 864.353 1364.61 866.639 1364.61C868.941 1364.61 870.809 1363.44 870.809 1362V1362H870.812V1362Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_20"
                d="M887.525 1375.54C886.845 1375.18 886.812 1374.22 887.465 1373.81L897.533 1367.52C898.185 1367.11 899.035 1367.56 899.062 1368.33L899.476 1380.2C899.503 1380.97 898.687 1381.48 898.007 1381.12L887.525 1375.54Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_20"
                cx={866.105}
                cy={1375.06}
                rx={26.1046}
                ry={10.8769}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_20"
                cx={849.793}
                cy={1371.79}
                r={2.17538}
                fill="#747474"
              />
              <path
                id="Rectangle 347_9"
                d="M865.562 1376.14H871.001L872.885 1384.84C872.885 1384.84 868.826 1384.3 867.738 1382.12C866.65 1379.95 865.562 1376.14 865.562 1376.14Z"
                fill="#C1D7DB"
              />
            </g>
            <g id="fish-small_21">
              <path
                id="Subtract_21"
                d="M906.022 1407C906.022 1407.84 907.115 1408.53 908.462 1408.53C909.802 1408.53 910.888 1407.85 910.899 1407.01V1409.54H896.266V1407C896.266 1407.84 897.358 1408.53 898.705 1408.53C900.049 1408.53 901.137 1407.85 901.143 1407.01C901.148 1407.85 902.237 1408.53 903.581 1408.53C904.928 1408.53 906.02 1407.84 906.021 1407V1407H906.022Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_21"
                d="M916.434 1415.26C915.755 1414.9 915.721 1413.94 916.374 1413.53L921.044 1410.61C921.697 1410.2 922.546 1410.66 922.573 1411.43L922.766 1416.93C922.792 1417.7 921.976 1418.21 921.297 1417.85L916.434 1415.26Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_21"
                cx={903.27}
                cy={1414.64}
                rx={15.27}
                ry={6.36249}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_21"
                cx={893.726}
                cy={1412.73}
                r={1.2725}
                fill="#747474"
              />
              <path
                id="Rectangle 347_10"
                d="M902.953 1415.27H906.134L907.236 1420.36C907.236 1420.36 904.862 1420.05 904.226 1418.77C903.589 1417.5 902.953 1415.27 902.953 1415.27Z"
                fill="#C1D7DB"
              />
            </g>
            <g id="fish-small_22">
              <path
                id="Subtract_22"
                d="M876.022 1452C876.022 1452.84 877.115 1453.53 878.462 1453.53C879.802 1453.53 880.888 1452.85 880.899 1452.01V1454.54H866.266V1452C866.266 1452.84 867.358 1453.53 868.705 1453.53C870.049 1453.53 871.137 1452.85 871.143 1452.01C871.148 1452.85 872.237 1453.53 873.581 1453.53C874.928 1453.53 876.02 1452.84 876.021 1452V1452H876.022Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_22"
                d="M886.434 1460.26C885.755 1459.9 885.721 1458.94 886.374 1458.53L891.044 1455.61C891.697 1455.2 892.546 1455.66 892.573 1456.43L892.766 1461.93C892.792 1462.7 891.976 1463.21 891.297 1462.85L886.434 1460.26Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_22"
                cx={873.27}
                cy={1459.64}
                rx={15.27}
                ry={6.36249}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_22"
                cx={863.726}
                cy={1457.73}
                r={1.2725}
                fill="#747474"
              />
              <path
                id="Rectangle 347_11"
                d="M872.953 1460.27H876.134L877.236 1465.36C877.236 1465.36 874.862 1465.05 874.226 1463.77C873.589 1462.5 872.953 1460.27 872.953 1460.27Z"
                fill="#C1D7DB"
              />
            </g>
            <g id="fish-small_23">
              <path
                id="Subtract_23"
                d="M995.022 1448C995.022 1448.84 996.115 1449.53 997.462 1449.53C998.802 1449.53 999.888 1448.85 999.899 1448.01V1450.54H985.266V1448C985.266 1448.84 986.358 1449.53 987.705 1449.53C989.049 1449.53 990.137 1448.85 990.143 1448.01C990.148 1448.85 991.237 1449.53 992.581 1449.53C993.928 1449.53 995.02 1448.84 995.021 1448V1448H995.022Z"
                fill="#A8C6DB"
              />
              <path
                id="Polygon 9_23"
                d="M1005.43 1456.26C1004.75 1455.9 1004.72 1454.94 1005.37 1454.53L1010.04 1451.61C1010.7 1451.2 1011.55 1451.66 1011.57 1452.43L1011.77 1457.93C1011.79 1458.7 1010.98 1459.21 1010.3 1458.85L1005.43 1456.26Z"
                fill="#C1D7DB"
              />
              <ellipse
                id="Ellipse 107_23"
                cx={992.27}
                cy={1455.64}
                rx={15.27}
                ry={6.36249}
                fill="#A8C6DB"
              />
              <circle
                id="Ellipse 108_23"
                cx={982.726}
                cy={1453.73}
                r={1.2725}
                fill="#747474"
              />
              <path
                id="Rectangle 347_12"
                d="M991.953 1456.27H995.134L996.236 1461.36C996.236 1461.36 993.862 1461.05 993.226 1459.77C992.589 1458.5 991.953 1456.27 991.953 1456.27Z"
                fill="#C1D7DB"
              />
            </g>
          </g>

any insights is appreciated. thank you!

Can anyone tell me whether this approach can explicitly and unreservedly represent the required objective?

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useRef } from "react";

const navItems: string[] = ["Home", "Works", "Profile", "Downloads", "About"];
const sectionBgColor: string[] = [
  "skyblue",
  "green",
  "salmon",
  "violet",
  "pink",
];

const navColor: string[] = [
  "#bae6fd", // Slightly darker skyblue (Tailwind sky-200)
  "#bbf7d0", // Slightly darker green (Tailwind green-200)
  "#ff9e85", // Slightly darker soft salmon pink
  "#e9d5ff", // Slightly darker violet (Tailwind purple-200)
  "#f472b6", // Medium pink (Tailwind pink-400)
];

gsap.registerPlugin(ScrollTrigger);

export default function ColorNav() {
  const container = useRef<HTMLDivElement | null>(null);

  useGSAP(
    () => {
      if (!container.current) return;
      const fullScreenDiv = container.current.querySelectorAll(".fullscreen");

      //sets the color section of div viewport
      gsap.set(fullScreenDiv, {
        backgroundColor: gsap.utils.wrap(sectionBgColor),
      });

      //get the nav height
      const navElem = container.current.querySelector("nav");
      if (!navElem) return;

      let navHeight: number = navElem.offsetHeight;

      // //refresh when value change
      // // ScrollTrigger.addEventListener("refreshInit", () => {
      // //   navHeight = navElem?.offsetHeight ?? 0;
      // // });

      //on each loop create a dedicated scroll trigger to each section
      navItems.forEach((item, index) => {
        ScrollTrigger.create({
          trigger: fullScreenDiv[index],
          animation: gsap.to(navElem, { backgroundColor: navColor[index] }),
          start: () => `top ${navHeight}`,
          end: () => `bottom ${navHeight}`,
          markers: true,
          toggleActions: "restart none none reverse",
          immediateRender: false,
        });
      });

      ScrollTrigger.addEventListener("refreshInit", () => {
        navHeight = navElem.offsetHeight;
      });

      // ScrollTrigger.refresh();
    },
    { scope: container },
  );
  return (
    <div ref={container}>
      <nav className="nav-wrapper bg-amber-200 flex lg:flex-row flex-col justify-center items-center p-10 gap-20 sticky top-0">
        {navItems.map((item, index) => {
          return (
            <div key={index} className="text-2xl">
              <a
                href={`#${item.toLowerCase()}`}
                onClick={() => {
                  console.log("clicked");
                }}
              >
                {item}
              </a>
            </div>
          );
        })}
      </nav>
      {sectionBgColor.map((item, index) => {
        return (
          <div
            id={navItems[index].toLowerCase()}
            key={index}
            className="fullscreen w-full h-dvh bg-gray-400 text-4xl flex flex-col justify-center items-center uppercase"
          >
            {item} - {navItems[index]}
          </div>
        );
      })}
    </div>
  );
}

The animation goes like this:
-the nav bar turns a light version of color when it scroll through the section of viewport divs. if the div is color orange the nav will turn to color light orange.
-the nav is responsive for narrow width the items in nav transform into flex column while on wider screen it transform to flex row. basically the column has higher height value.
-Each div has scroll trigger in it that has a trigger point according to the height of the nav 
so when it is turned to column (for example it turns height to 500px) then the trigger point of animation is after 500px.

now while playing with it I found a problem, from column to row adjusting the width of my browser I noticed that the start:top and end:bottom of the divs goes out of sync, it is really difficult to explain here please bear with me.

I created the project in NextJS so technically I create components that is similar to the lessons I am learning right now.
so on my project I have this  (this might be irrelevant but I want to share it here regardless..)
the container is a locomotive scroll to be applied for the whole project

    <div ref={container}>
      <PinSpacingDemo />
      <BlankDiv />
      <ParallaxDemo />
      <BlankDiv />
      <MultiSectionScroll />
      <LocomotiveScrollDemo />
      <ScrollIntro />
      <BlankDiv />
      <SectionDemo />
      <BlankDiv />
      <ColorNav />
    </div>

 the problem I noticed was when I change the width of the browser back and forth while I am scrolling in the middle (3rd color div) the start and end of the animation goes above my component , for context with markers I can see the first start-end at the div of the SectionDemo making the nav change color out of sync, I attached a photo.

I am not sure why this happens maybe its because I am stacking it with other components? it works well like on the tutorial when I commented the rest of my components. on this scenario.. is it really not advice to stack up components with scroll trigger or at least components that has creating/chainging the config of scroll trigger dynamically?
because I had a problem with some of my scrollTrigger components when it is stacked up to pages.tsx of NextJS. for example the ScrollIntro is a component that plays a timeline before it create a scroll trigger and unhide the div of below it so when I stack it up with other components, the ScrollIntro will by default be scrollable, had this problem where I can't scroll to the bottom maybe because the created scrollTrigger get a new calculation. I gave up on fixing it maybe it just supposed to work when its on the top of the component.

I apologize for the messy post. tldr; it has a problem on scrolling with other stacked components.

I’m currently working on a Roblox scripting resource website that contains documentation and guides covering Fluxus, Lua/Luau scripting, script-editor features, installation information, compatibility, and troubleshooting.

I’m using GSAP to improve the presentation of the documentation rather than relying entirely on static sections. One area I’m experimenting with is an interactive feature section where users can switch between different topics and see the relevant content animate into view.

For example, the interface has sections similar to:

• Script Editor

• Lua/Luau Scripting

• Script Compatibility

• Installation Guides

• Troubleshooting

• Frequently Asked Questions

My current animation is fairly simple:

const panels = gsap.utils.toArray(".feature-panel");

panels.forEach((panel) => {
  gsap.from(panel, {
    opacity: 0,
    y: 25,
    duration: 0.5,
    ease: "power2.out",
    scrollTrigger: {
      trigger: panel,
      start: "top 85%",
      once: true
    }
  });
});

It works nicely with a small amount of content, but the documentation is gradually getting larger. Some sections contain code examples and fairly long text, so I’m trying to avoid adding unnecessary animation that could make the page feel slower.

I’m particularly interested in how other GSAP users approach this type of documentation interface.

Would you recommend using ScrollTrigger for each individual content section, or would a master timeline be more appropriate when there are many sections?

I’m also wondering whether animating the parent containers is preferable to animating individual elements such as headings, paragraphs, buttons, and code blocks.

The goal is to keep the interface visually interesting while making sure the actual documentation remains easy and quick to read.

If anyone has built a documentation or developer-resource website with GSAP, I’d be interested in hearing how you structured the animations and handled performance as the amount of content increased.

Thanks!

I'm trying to recreate a page transition similar to the animation in the attached video.

The effect I'm trying to achieve is not a simple SVG/object movement or a fullscreen wipe. I'm having trouble identifying the correct technique/approach for it.

i tried  it many times but not getting exact approach. it is scroll based also. 

below is the reference video
https://drive.google.com/file/d/1s6IRXoV-O9uzRTncnZ8YocLS9a2duPoJ/view
 

See the Pen gbmLNbm by Bhavin-Raut (@Bhavin-Raut) on CodePen.

See the Pen ZYeKgNY by martin-nikolov (@martin-nikolov) on CodePen.

<!DOCTYPE html>
<html>
<head>

<script src="js/gsap.min.js"></script>

<style>
.box {
	width: 150px;
	height: 150px;
	background-color: green;
	border-radius: 20px;
	border: 5px dotted black;
}
</style>

</head>

<body>

<script>

gsap.to(".box", {
	duration: 2,
	rotation: 360,
	transformOrigin: "50% 50% -400px",
});
	
</script>

<div class="box"></div>

</body>
</html>

so I have this component B. and this component has Parallax effect using ScrollTrigger. 
now, it works like it should. but when I shrink the width of my browser to mimic a mobile I can see this white space by pin-spacer.
It probably appear when I am on full screen it just I cannot see it because the width and height is a view port. the only problem I have is when I scroll on mobile width. 

I can feel the pin on full screen but I can't on small width. it looks like the SVG just move from top to bottom while doing animation.. maybe it just because I can see the scroll area goes shrink. 

also, I would like to ask if there is a way to turn off animation when the it is browse by small screen? 

any help is appreciated. thanks.
 

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import * as React from "react";

gsap.registerPlugin(useGSAP, ScrollTrigger, SplitText);

const ParallaxDemo = () => {
  const container = React.useRef(null);

  useGSAP(
    () => {
      const setOpacity = gsap.quickSetter(container.current, "opacity");
      setOpacity(1);

      const split = SplitText.create(".greeting-text", { type: "chars" });

      const tl = gsap.timeline({
        defaults: { duration: 1, ease: "power1" },
      });
      tl.from(".tower-layer-1", {
        transformOrigin: "50% 50%",
        y: 500,
      })
        .from(".tower-layer-2", {
          transformOrigin: "50% 50%",
          y: 500,
        })
        .from(".stars > *", {
          transformOrigin: "50% 50%",
          scale: 0,
          ease: "back(2)",
        })
        .from(split.chars, { opacity: 0, stagger: 0.05 })
        .from(".moon-layer", {
          y: -300,
          x: -500,
        })
        .from(
          ".cloud",
          {
            x: -1440,
          },
          "<",
        )
        .from(
          ".lights",
          {
            opacity: 0,
          },
          "-=0.1",
        );

      ScrollTrigger.create({
        trigger: container.current,
        animation: tl,
        markers: true,
        start: "center center",
        end: "bottom center",
        scrub: 0.5,
        // once: true,
        pin: true,
      });
    },
    { scope: container },
  );

  return (
    <div ref={container} className="w-full lg:h-dvh overflow-hidden opacity-0">
      <svg
        viewBox="0 0 1440 730"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="parallax" clipPath="url(#parallax-clip)">
          <rect width={1440} height={730} fill="white" />
          <rect id="sky" width={1440} height={1024} fill="#252528" />
          <foreignObject x={500} y={100} width={500} height={50}>
            <div className="w-full h-full">
              <h3 className="greeting-text text-6xl text-white text-center">
                GOOD EVENING
              </h3>
            </div>
          </foreignObject>
          <g className="stars">
            <path
              id="Star 5"
              d="M205.5 49.6178C205.822 48.7465 207.054 48.7465 207.376 49.6178L213.984 67.5103C214.086 67.7841 214.301 68 214.575 68.1015L232.44 74.7242C233.31 75.0467 233.31 76.277 232.44 76.5995L214.575 83.2222C214.301 83.3237 214.086 83.5396 213.984 83.8134L207.376 101.706C207.054 102.577 205.822 102.577 205.5 101.706L198.891 83.8134C198.79 83.5396 198.574 83.3237 198.3 83.2222L180.436 76.5995C179.566 76.277 179.566 75.0467 180.436 74.7242L198.3 68.1015C198.574 68 198.79 67.7841 198.891 67.5103L205.5 49.6178Z"
              fill="#D9D9D9"
            />
            <path
              id="Star 6"
              d="M924.516 194.54C924.838 193.668 926.07 193.668 926.392 194.54L930.281 205.069C930.382 205.342 930.598 205.558 930.871 205.66L941.386 209.558C942.256 209.88 942.256 211.111 941.386 211.433L930.871 215.331C930.598 215.432 930.382 215.648 930.281 215.922L926.392 226.451C926.07 227.322 924.838 227.322 924.516 226.451L920.627 215.922C920.526 215.648 920.31 215.432 920.036 215.331L909.522 211.433C908.652 211.111 908.652 209.88 909.521 209.558L920.036 205.66C920.31 205.558 920.526 205.342 920.627 205.069L924.516 194.54Z"
              fill="#D9D9D9"
            />
            <path
              id="Star 11"
              d="M1369.88 59.5397C1370.2 58.6683 1371.43 58.6683 1371.76 59.5397L1376.55 72.5231C1376.65 72.7969 1376.87 73.0129 1377.14 73.1143L1390.11 77.9205C1390.98 78.243 1390.98 79.4733 1390.11 79.7958L1377.14 84.602C1376.87 84.7035 1376.65 84.9194 1376.55 85.1932L1371.76 98.1766C1371.43 99.048 1370.2 99.048 1369.88 98.1766L1365.08 85.1932C1364.98 84.9194 1364.77 84.7035 1364.49 84.602L1351.53 79.7958C1350.66 79.4733 1350.66 78.243 1351.53 77.9205L1364.49 73.1143C1364.77 73.0128 1364.98 72.7969 1365.08 72.5231L1369.88 59.5397Z"
              fill="#D9D9D9"
            />
            <path
              id="Star 14"
              d="M806.872 297.54C807.194 296.668 808.427 296.668 808.748 297.54L813.544 310.523C813.645 310.797 813.861 311.013 814.134 311.114L827.099 315.921C827.969 316.243 827.969 317.473 827.099 317.796L814.134 322.602C813.861 322.703 813.645 322.919 813.544 323.193L808.748 336.177C808.427 337.048 807.194 337.048 806.872 336.177L802.077 323.193C801.976 322.919 801.76 322.703 801.486 322.602L788.522 317.796C787.652 317.473 787.652 316.243 788.522 315.921L801.486 311.114C801.76 311.013 801.976 310.797 802.077 310.523L806.872 297.54Z"
              fill="#D9D9D9"
            />
            <path
              id="Star 9"
              d="M659.227 173.816C659.951 173.235 661.007 173.87 660.834 174.783L658.028 189.674C657.974 189.961 658.047 190.257 658.23 190.485L667.688 202.315C668.267 203.04 667.634 204.096 666.723 203.923L651.857 201.111C651.57 201.057 651.274 201.13 651.047 201.313L639.241 210.787C638.517 211.367 637.462 210.732 637.634 209.819L640.441 194.928C640.495 194.641 640.421 194.345 640.239 194.117L630.781 182.287C630.201 181.562 630.834 180.507 631.745 180.679L646.611 183.491C646.898 183.546 647.194 183.472 647.421 183.289L659.227 173.816Z"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 63"
              cx={162.796}
              cy={243.806}
              rx={1.67832}
              ry={1.6814}
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 64"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 73.8359 349.719)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 65"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 1074.12 0)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 66"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 72.3594 98)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 67"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 177.906 430.43)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 68"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 848.352 490)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 69"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 6.71875 561.594)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 70"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 1147.36 394)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 71"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 998.352 204)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 72"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 600.844 477.516)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 73"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 576.352 101)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 74"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 419.57 77.3438)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 75"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 265.172 306.008)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 76"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 379.289 272.398)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 77"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 1100.36 123)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 78"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 1332.36 269)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 79"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 893.352 98)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 80"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 641.125 282.469)"
              fill="#D9D9D9"
            />
            <ellipse
              id="Ellipse 81"
              cx={1.67832}
              cy={1.6814}
              rx={1.67832}
              ry={1.6814}
              transform="matrix(-1 0 0 1 439.703 453.977)"
              fill="#D9D9D9"
            />
          </g>
          <g className="moon-layer">
            <circle id="moon" cx={1272.5} cy={154.5} r={40.5} fill="white" />
            <g id="moon-glow" filter="url(#filter0_f_3758_9879)">
              <circle cx={1273} cy={155} r={45} fill="white" />
            </g>
          </g>
          <g
            className="tower-layer-2"
            filter="url(#tower-layer-2-filter-shadow)"
          >
            <rect
              id="Rectangle 302"
              x={244.797}
              y={386.281}
              width={276.48}
              height={343.72}
              fill="#3A3E4D"
            />
            <rect
              id="Rectangle 305"
              x={1163.52}
              y={386.281}
              width={276.48}
              height={343.72}
              fill="#3A3E4D"
            />
            <rect
              id="Rectangle 306"
              x={1229.76}
              y={330.367}
              width={34.56}
              height={65.7836}
              fill="#3A3E4D"
            />
            <rect
              id="Rectangle 307"
              x={1344.96}
              y={330.367}
              width={34.56}
              height={65.7836}
              fill="#3A3E4D"
            />
            <rect
              id="Rectangle 303"
              y={448.766}
              width={244.8}
              height={281.225}
              fill="#3A3E4D"
            />
            <g id="tower">
              <rect
                id="Rectangle 304"
                x={959.039}
                y={258}
                width={164.16}
                height={471.998}
                fill="#3A3E4D"
              />
              <rect
                className="lights"
                x={984.961}
                y={285.953}
                width={51.84}
                height={29.6026}
                fill="#D9D9AB"
              />
            </g>
            <path
              id="Union"
              d="M715.681 361.602C718.757 361.602 719.993 367.25 720.001 367.287V391.007C770.649 394.94 780.075 449.177 780.192 449.857H875.521V483.044H915.841V729.984H521.281V483.044H552.961V449.857H648.001C648.12 449.162 657.951 392.705 711.361 390.828V367.287C711.369 367.25 712.606 361.602 715.681 361.602Z"
              fill="#3A3E4D"
            />
          </g>
          <g className="tower-layer-1" filter="url(#tower-layer-1-shadow)">
            <g id="tower_2">
              <path
                id="Union_2"
                d="M892.803 729.994H443.523V544.104H668.163V580.932H682.563V505.523H892.803V729.994Z"
                fill="#252A3C"
              />
            </g>
            <g id="tower-twin">
              <path
                id="Union_3"
                fillRule="evenodd"
                clipRule="evenodd"
                d="M1440 730H1232.64V642.316H1131.84V730H907.203V580.938H1232.64V491.5H1440V730ZM1131.84 630.041H1232.64V593.213H1131.84V630.041Z"
                fill="#252A3C"
              />
            </g>
            <g id="tower_3">
              <path
                id="Union_4"
                d="M385.924 444.149H429.124V729.999H204.484V444.149H244.804V421.352H385.924V444.149Z"
                fill="#252A3C"
              />
              <rect
                className="lights"
                x={239.039}
                y={484.484}
                width={51.84}
                height={31.5662}
                fill="#D9D9AB"
              />
            </g>
            <path
              id="Union_5"
              d="M190.08 729.997H0V395.044H146.88V374H190.08V729.997Z"
              fill="#252A3C"
            />
          </g>
          <g className="cloud" filter="url(#filter3_d_3758_9879)">
            <path
              d="M1291.5 180C1296.74 180 1301.22 183.22 1303.08 187.786C1304.87 186.061 1307.31 185 1310 185C1313.67 185 1316.88 186.982 1318.62 189.934C1320.08 185.89 1323.95 183 1328.5 183C1334.3 183 1339 187.701 1339 193.5C1339 194.106 1338.95 194.699 1338.85 195.276C1339.53 195.097 1340.25 195 1341 195C1345.42 195 1349 198.358 1349 202.5C1349 205.554 1347.05 208.179 1344.26 209.349C1344.73 210.307 1345 211.374 1345 212.5C1345 216.642 1341.42 220 1337 220C1335.4 220 1333.91 219.558 1332.66 218.801C1331.6 222.377 1328.13 225 1324 225C1319.96 225 1316.53 222.481 1315.4 219.013C1313.7 222.48 1308.57 225 1302.5 225C1295.04 225 1289 221.194 1289 216.5C1289 216.348 1289.01 216.196 1289.02 216.046C1288.91 216.023 1288.8 216 1288.7 215.977C1287.82 219.463 1285.16 222 1282 222C1278.13 222 1275 218.194 1275 213.5C1275 213.327 1275 213.156 1275.01 212.985C1274.84 212.994 1274.67 213 1274.5 213C1269.25 213 1265 208.747 1265 203.5C1265 198.253 1269.25 194 1274.5 194C1276.26 194 1277.9 194.48 1279.32 195.312C1279.11 194.409 1279 193.467 1279 192.5C1279 185.596 1284.6 180 1291.5 180Z"
              fill="#383838"
            />
          </g>
        </g>
        <defs>
          <filter
            id="filter0_f_3758_9879"
            x={1218.1}
            y={100.1}
            width={109.8}
            height={109.8}
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity={0} result="BackgroundImageFix" />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="BackgroundImageFix"
              result="shape"
            />
            <feGaussianBlur
              stdDeviation={4.95}
              result="effect1_foregroundBlur_3758_9879"
            />
          </filter>
          <filter
            id="tower-layer-2-filter-shadow"
            x={-4.5}
            y={254.5}
            width={1455}
            height={487}
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity={0} result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dx={3} dy={4} />
            <feGaussianBlur stdDeviation={3.75} />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow_3758_9879"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_3758_9879"
              result="shape"
            />
          </filter>
          <filter
            id="tower-layer-1-shadow"
            x={-5.8}
            y={363.2}
            width={1469.6}
            height={385.6}
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity={0} result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dx={9} dy={4} />
            <feGaussianBlur stdDeviation={7.4} />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow_3758_9879"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_3758_9879"
              result="shape"
            />
          </filter>
          <filter
            id="filter3_d_3758_9879"
            x={1261}
            y={180}
            width={92}
            height={53}
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity={0} result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              result="hardAlpha"
            />
            <feOffset dy={4} />
            <feGaussianBlur stdDeviation={2} />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow_3758_9879"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_3758_9879"
              result="shape"
            />
          </filter>
          <clipPath id="parallax-clip">
            <rect width={1440} height={730} fill="white" />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
};
export default ParallaxDemo;

This is my first time using the MorphSVG plugin. In the attached CodePen, I’ve reproduced the issue I’m experiencing.

Once you click on “Structural protection”, the morphing animation starts. As you can see, the lines create a sort of trailing or “contrail” effect during the animation.

Ideally, the geometric shape should smoothly reshape into the other shape without leaving these visible trails behind.

The expected behaviour should look more like this:

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen.

thanks guyz!

See the Pen VYpPbvg by Mac-WWD (@Mac-WWD) on CodePen.

Blessings for the new free/commercial license, much appreciated for small agencies and devs like me.

I run a small studio that builds a scroll-following animated character for clients' existing websites. GSAP does the animation, bundled into the script we install on the client's site. I have read the Standard "No Charge" License and I would like to confirm my reading of the Prohibited Uses clause in writing before I take on a paying client, because the FAQ invites exactly this question.

What the product is, described as precisely as I can.

The client already has a website that someone else built. We add one script tag. That script draws a single illustrated character that walks, rides and stops along the page as the visitor scrolls. We have an internal authoring tool where an operator positions that character's stops along the page and adjusts their timing by dragging blocks on a vertical strip.

Three things it deliberately is not:

1. It animates one thing only - the character. It cannot animate arbitrary page elements. There is no way in the tool to select a heading, an image or a navigation bar and give it a motion. The only animatable subject is the character we supply.
2. It does not build pages. It never creates, edits or manages the client's page structure, styles or content. It attaches to a site that already exists, through an install snippet.
3. It is a service, not self-serve software, at this stage. We onboard each client by hand. Longer term we intend to let a client's own staff log in and adjust their character's journey themselves, which is why I would rather have your answer now than after that exists.
   1. I'd appreciate your take on this if I decide on taking this to self-serve software.

My reading.

Prohibited Uses covers tools that let users build visual animations without code where that competes with Webflow's visual animation building capabilities. The first half describes our authoring strip; I do not think the second half applies, because we animate one supplied character on a site we do not build, and the FAQ names niche visual GSAP-driven tools as acceptable. I would like to know whether you agree.

And if you disagree. If you consider what I have described to be a Prohibited Use, then I would like to ask, in the alternative, for the prior written consent that Restriction III.1 provides for. I would rather have a clear answer either way — including a conditional one, such as consent for the service as it works today but not for client self-authoring — than proceed on my own reading of a clause I know is open to more than one.

A second, narrower question, about which version of the terms applies. We ship GSAP 3.15.0, published 2026-04-13. The Standard License posted today is effective 2025-04-30 and last modified 2025-05-30. I read clause VI.2 as meaning that, because no revision has been posted since May 2025, the terms currently posted are the terms that were in force when 3.15.0 was released, and so are the terms that govern our use of it. Could you confirm that reading is right? I would rather have it confirmed once than re-derive it each time we take a version update.

I am happy to answer anything about how the tool works, or to show it to you.

Thank you,

Amit

Reference animation: Projets — Agence K72

the codepen shows the maximum result i reached but there's still mistake in that

See the Pen 01a0b5a5-a9a9-76fe-9cf2-3d4e22568d57 by Saksham-Tanwar (@Saksham-Tanwar) on CodePen.

I coded something with gsap and the page is snapping to the nearest element when a scroll ends. It works perfectly on Desktop but it is very buggy on my mobile with safari and chrome. The snapping is very laggy, the page jumps a bit up and down and sometimes the snapping won't work at all. 

Is there maybe any common issue with gsap snap on mobiles, which I may have been doing wrong while coding the desktop version?

(In my codepen there is called a background-image change every time a snap is completed, you can ignore that.)

Thank you in advance!

See the Pen NWgMWbK by m44244 (@m44244) on CodePen.

export default function MouseDemo() {
	
	useGsap((
	//workaround: create quickSetter-A
	//I want to use the quickSetter here	

)=>{},{scope: container})

	function handleMouseMove(){
	//I want to use the quickSetter here
	//workaround: create a similar quickSetter-A
    }

}

and here is what I want to achieve:

export default function MouseDemo() {

	//create a const setScaleX = useRef<gsapQuickSetter>(null)	

	useGsap(()=>{
          //set up quickSetter
    //setScaleX = (target , {scaleX});

    },{scope: container})

	function handleMouseMove(){
	
	//invoke setScaleX(value);
    }

}

I can't figure out the exact return type of quickSetter. hovering from the existing quickSetter reveals this paramter and return type
function gsap.quickSetter(targets: gsap.TweenTarget, property: string, unit?: string): Function

that it confirms that it returns a function. my question is what kind of function? what its parameters and return type. I even tried to dig in gsap.core but couldn't find any leads.

here is my current attempt
I created a type alias that accept this kind of pattern type QuickSetterFn = (value: number | string) => void;

then I referenced it to a useRef but still not luck
 

type Coordinates = { x: number; y: number };
type QuickSetterFn = (value: number | string) => void;

export default function MouseDemo() {
  //useRef
  const container = useRef<HTMLDivElement | null>(null);
  const setScaleX = useRef<QuickSetterFn | null>(null);

  //state
  const [coordinates, setCoordinates] = useState<Coordinates>({ x: 0, y: 0 });

  //useGsap - contextSafe
  const { contextSafe } = useGSAP(
    () => {
      //quickSetter setup
      setScaleX.current = gsap.quickSetter(".box", "scaleX");

here is what I get 
Type 'Function' is not assignable to type 'QuickSetterFn'.
  Type 'Function' provides no match for the signature '(value: string | number): void'.

right now I use the workaround , to create a duplicate quickSetter for the button the the useGsap.

---
 

<DIV>
	<div> h3 - Scroll down

	<div ref={container}>
		<svg>

	<div> h3 - Scroll Up
</DIV>

what I am aiming for is after the first div 
the second div should be scrollable and finish the animation first before I see the 3rd div.

maybe there is a problem with my classes setup or how I the HTML is created.

This is my code.
currently following Scroll-Driven SVG Plant Animation 3: Adding ScrollTrigger lesson from Creative Coding Club. 

PS: The pin kind of works but I just noticed that it expands the height to be "scrollable" but its kind of different to the ScrollTrigger lesson where it stays  the size before it proceed to the bottom element. not sure if I am making sense. I am using Brave browser.

EDIT: I uploaded it on code pen with the help of AI to set it up. Scroll Trigger Demo
any help is appreciated. thank you.

this is the real code as reference:

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";
import { GSDevTools } from "gsap/GSDevTools";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useRef } from "react";

gsap.registerPlugin(useGSAP, GSDevTools, DrawSVGPlugin, ScrollTrigger);

export default function FlowerSVG() {
  const container = useRef(null);

  useGSAP(
    () => {
      gsap.set(".flower", { opacity: 1 });

      const leafL = document.querySelector(".leaf-left");
      const leafR = document.querySelector(".leaf-right");
      const stem = document.querySelectorAll(".leaf-stem > *");
      const face = document.querySelector(".face");
      const eyes = document.querySelectorAll(".eyes");
      const innerPetal = document.querySelector(".inner-petal");
      const outerPetal = document.querySelector(".outer-petal");

      const leafTl = gsap
        .timeline({
          id: "leaf-tl",
          defaults: {
            duration: 0.7,
            scale: 0,
            ease: "sine",
          },
        })
        .from(leafL, {
          transformOrigin: "right bottom",
        })
        .from(leafR, { transformOrigin: "left bottom" }, "<+=0.5");

      const faceTl = gsap
        .timeline({
          id: "face-tl",
          defaults: {
            scale: 0,
            transformOrigin: "center center",
          },
        })
        .from(face, {
          duration: 0.5,
          ease: "power1.inOut",
        })
        .from(
          innerPetal,
          {
            duration: 1,
            ease: "back(-1)",
          },
          "-=0.3",
        )
        .from(
          outerPetal,
          {
            duration: 1,
            ease: "back",
          },
          "<+=0.5",
        );

      //Do not add a tween on a timeline if you are going to use a timeScale
      const flowerTl = gsap.timeline({ id: "flower-master-timeline" });
      // .timeScale(1.8);

      flowerTl.add(leafTl);
      flowerTl.from(
        stem,
        {
          drawSVG: 0,
          ease: "power1.inOut",
          duration: 1,
        },
        "-=0.5",
      );
      flowerTl.add(faceTl);
      flowerTl.from(
        eyes,
        {
          opacity: 0,
          duration: 1,
          transformOrigin: "center center",
        },
        2.7,
      );

      const svg = document.querySelector("svg");

      if (!svg) return;

      ScrollTrigger.create({
        trigger: "svg",
        animation: flowerTl,
        markers: true,
        pin: true,
    
        scrub: true,
        start: "top center",
        end: "center center",
      });
    },
    { scope: container },
  );

  return (
    <div>
      <div className="flower-wrapper w-full min-h-dvh bg-red-200 flex items-center justify-center">
        <h3 className="text-5xl font-bold">Scroll down</h3>
      </div>

      <div
        ref={container}
        className="w-full max-w-md  bg-red-200 flower-wrapper"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
          <defs>
            <filter
              id="leaf-right-filter-shadow"
              colorInterpolationFilters="sRGB"
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
            >
              <feGaussianBlur in="SourceAlpha" stdDeviation={1} />
              <feOffset dx={-2} dy={-1} />
              <feComponentTransfer result="offsetblur">
                <feFuncA id="spread-ctrl" type="linear" slope={0.34} />
              </feComponentTransfer>
              <feFlood floodColor="#000000a0" />
              <feComposite in2="offsetblur" operator="in" />
              <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            <filter
              id="leaf-left-filter-shadow"
              colorInterpolationFilters="sRGB"
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
            >
              <feGaussianBlur in="SourceAlpha" stdDeviation={1} />
              <feOffset dx={-1} dy={1} />
              <feComponentTransfer result="offsetblur">
                <feFuncA id="spread-ctrl" type="linear" slope={1} />
              </feComponentTransfer>
              <feFlood floodColor="rgba(0,0,0,0.3)" />
              <feComposite in2="offsetblur" operator="in" />
              <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            <filter
              id="outer-petal-filter-shadow"
              colorInterpolationFilters="sRGB"
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
            >
              <feGaussianBlur in="SourceAlpha" stdDeviation={1} />
              <feOffset dx={1} dy={4} />
              <feComponentTransfer result="offsetblur">
                <feFuncA id="spread-ctrl" type="linear" slope={1} />
              </feComponentTransfer>
              <feFlood floodColor="rgba(0,0,0,0.3)" />
              <feComposite in2="offsetblur" operator="in" />
              <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          <g
            className="flower"
            transform="matrix(1, 0, 0, 1, 1.154228, -13.751999)"
            opacity={0}
          >
            <g
              className="leaf-stem"
              transform="matrix(1, 0, 0, 1, 1.340151, -14.741662)"
            >
              <path
                style={{
                  fill: "none",
                  strokeLinecap: "round",
                  strokeWidth: 9,
                  stroke: "rgb(148, 184, 107)",
                }}
                d="M 145.661 251.726 C 145.661 251.726 138.755 239.108 144.404 223.159 C 146.938 216.006 154.045 200.291 148.96 188.498 C 133.092 151.697 147.357 152.005 147.357 152.005"
                className="stem-border"
              />
              <path
                style={{
                  fill: "none",
                  strokeWidth: 6,
                  strokeLinecap: "round",
                  stroke: "rgb(162, 206, 105)",
                }}
                d="M 146.608 252.193 C 146.608 252.193 138.993 237.253 144.642 221.859 C 147.176 214.954 154.283 199.786 149.198 188.404 C 133.33 152.883 147.595 153.181 147.595 153.181"
                className="stem"
              />
            </g>
            <g
              className="leaf leaf-right"
              transform="matrix(1, 0, 0, 1, -6.611467, -13.588678)"
            >
              <path
                d="M 207.743 237.29 C 217.251 234.665 227.251 230.355 204.606 226.036 C 181.961 221.718 152.549 235.05 152.549 247.987 C 152.549 254.62 159.498 258.232 161.995 258.706 C 166.238 259.51 171.259 256.138 179.522 250.805 C 196.479 239.859 198.234 239.916 207.743 237.29 Z"
                style={{
                  fill: "rgb(162, 206, 105)",
                  filter: "url(#leaf-right-filter-shadow)",
                  transformBox: "fill-box",
                  transformOrigin: "50% 50%",
                }}
                transform="matrix(-1, 0, 0, -1, 0.000018, -0.000014)"
              />
              <g className="midrib-right">
                <path
                  style={{
                    fill: "none",
                    stroke: "rgb(97, 138, 90)",
                    strokeLinecap: "round",
                  }}
                  d="M 170.503 251.249 C 170.503 251.249 186.697 250.131 194.035 245.929 C 199.214 242.963 206.45 234.4 207.171 233.018 M 198.511 243.168 C 199.957 244.976 207.46 244.524 207.46 244.524 M 191.187 246.965 C 189.379 246.603 193.9 238.557 193.9 238.557"
                />
              </g>
            </g>
            <g
              transform="matrix(1, 0, 0, 1, 0.030157, -16.639734)"
              className="leaf leaf-left"
            >
              <path
                d="M 135.936 248.54 C 145.353 252.786 160.416 266.349 132.83 266.742 C 105.244 267.135 81.016 251.829 81.276 231.238 C 81.412 220.51 88.157 214.666 90.631 213.9 C 94.833 212.599 99.805 218.053 107.988 226.68 C 124.782 244.385 126.52 244.292 135.936 248.54 Z"
                style={{
                  fill: "rgb(162, 206, 105)",
                  filter: "url(#leaf-left-filter-shadow)",
                  transformBox: "fill-box",
                  transformOrigin: "50% 50%",
                }}
                transform="matrix(0.992658, -0.120957, 0.120957, 0.992658, 0, 0)"
              />
              <g
                className="midrib-left"
                transform="matrix(1.067774, -0.018638, 0.01675, 0.959622, 0.763628, 4.391307)"
                style={{
                  transformOrigin: "113.342px 237.775px",
                }}
              >
                <path
                  style={{
                    fill: "none",
                    stroke: "rgb(97, 138, 90)",
                    strokeLinecap: "round",
                  }}
                  d="M 90.889 223.539 C 90.331 227.813 97.917 235.227 107.224 241.381 C 118.748 249.001 127.346 253.522 135.824 251.55 M 98.184 234.335 C 101.437 233.251 100 224.998 100 224.998 M 102.826 238.579 C 102.826 240.438 93.489 239.455 93.489 239.455 M 108.98 242.505 C 109.838 242.505 108.674 234.92 108.105 232.877 M 117.734 248.34 C 115.506 250.477 109.145 249.759 107.23 250.383"
                />
              </g>
            </g>
            <g
              className="leaf-face"
              transform="matrix(1, 0, 0, 1, 1.340151, -14.741662)"
            >
              <ellipse
                style={{
                  strokeWidth: 1,
                  fill: "rgb(245, 101, 52)",
                  filter: "url(#outer-petal-filter-shadow)",
                }}
                cx={151.738}
                cy={139.568}
                rx={66.27}
                ry={51.309}
                className="outer-petal"
              />
              <ellipse
                style={{
                  strokeWidth: 1,
                  fill: "rgb(243, 207, 59)",
                }}
                cx={151.738}
                cy={139.568}
                rx={48.154}
                ry={37.283}
                className="inner-petal"
              />
              <g
                className="leaf-face"
                transform="matrix(1, 0, 0, 1, 9.247013, -3.773018)"
              >
                <ellipse
                  className="face"
                  style={{
                    fill: "rgb(231, 231, 231)",
                  }}
                  cx={142.491}
                  cy={143.341}
                  rx={30.913}
                  ry={23.934}
                />
                <g className="eyes">
                  <ellipse
                    style={{}}
                    cx={130.543}
                    cy={143.341}
                    rx={3.826}
                    ry={9.236}
                    className="left-eye"
                  />
                  <ellipse
                    style={{}}
                    cx={152.839}
                    cy={143.341}
                    rx={3.826}
                    ry={9.236}
                    className="left-eye"
                  />
                </g>
              </g>
            </g>
          </g>
        </svg>
      </div>

      <div className="bg-blue-200 h-dvh w-full flex flex-col justify-center items-center">
        <h3 className="text-[clamp(1.5rem,4vw,3rem)] font-bold bg-amber-600">
          Scroll down
        </h3>
      </div>
    </div>
  );
}

See the Pen EaWKPyd by Zee-CH-ZeeCH (@Zee-CH-ZeeCH) on CodePen.

Having a ScrollTrigger.create() inside gsap.matchMedia() makes the browser jump to the top of the page on window resize when it hits a breakpoint.

I was upgrading GSAP from 3.13 (where this didn't happen) and noticed 3.14 and 3.15 both jump to the top.

Minimal demo: https://jsfiddle.net/s51z4xkd/1/

I used jsfiddle, hope that's okay - no signup needed compared to codepen.

Thanks!

How it works:
• We bring potential clients to you
• You handle the project from start to finish
• You choose your own pricing
• First 3 sales → 0% platform fee
• After 3 sales → 20% fee per sale
• Crypto or Bank Transfer payments
• No joining fee or upfront cost

Requirements

LinkedIn is required. You must have an active LinkedIn profile, as your profile and professional expertise will be used to showcase you to potential clients.

Discord is also required. You’ll receive a dedicated role on our Discord server based on your service. When a client needs your expertise, we’ll open a ticket and mention you directly.

Interested?

contact us on Discord: dashed.io.bluff

Only serious professionals who are ready to take on client projects should reach out.

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { GSDevTools } from "gsap/GSDevTools";
import React, { useRef } from "react";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
import { EasePack } from "gsap/EasePack";

gsap.registerPlugin(useGSAP, DrawSVGPlugin, EasePack, GSDevTools);

export default function JumpingWormSVG() {
  const container = useRef(null);

  useGSAP(
    () => {
      //holes
      gsap.set("#holes", { opacity: 1 });
      gsap.set("#holes ellipse", { scale: 0, transformOrigin: "50% 50%" });
      function openHole(hole: string): gsap.core.Timeline {
        const tl = gsap
          .timeline({ defaults: { duration: 1 } })
          .to(hole, { scale: 1, ease: "back" })
          .to(hole, { scale: 0, duration: 0.5, ease: "power2.in" }, "+=0.1");
        return tl;
      }

      //worm-1 (short)
      const pointsShort = { start: 0, end: 0 };
      const drawShort = gsap.quickSetter("#worm-1", "drawSVG");
      function updateShort(): void {
        drawShort(`${pointsShort.start}% ${pointsShort.end}%`);
      }

      //setup the initial value of start:0 and end:0 to #worm-1
      updateShort();

      const firstJump = gsap
        .timeline({
          onUpdate: updateShort,
          repeat: -1,
          defaults: { duration: 0.8, ease: "slow(0.6, 0.5)" },
        })
        .add(openHole("#hole-1"))
        .to(
          pointsShort,
          {
            end: 100,

            onUpdate: () => console.log(`end: ${pointsShort.end}`),
          },
          0.5,
        )
        .to(pointsShort, { start: 100 }, 0.3);
      // .add(openHole("#hole-2"));

      GSDevTools.create({ animation: firstJump });
    },
    { scope: container },
  );

  return (
    <div ref={container}>
      <svg
        width={1200}
        height={614}
        viewBox="0 0 1200 614"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="jump-hole">
          <rect width={1200} height={614} fill="white" />
          <g id="holes" opacity={0}>
            <ellipse
              id="hole-1"
              cx={100}
              cy={510}
              rx={77}
              ry={28}
              fill="#1F1F1F"
            />
            <ellipse
              id="hole-2"
              cx={500}
              cy={510}
              rx={77}
              ry={28}
              fill="#1F1F1F"
            />
            <ellipse
              id="hole-3"
              cx={800}
              cy={510}
              rx={77}
              ry={28}
              fill="#1F1F1F"
            />
            <ellipse
              id="hole-4"
              cx={1100}
              cy={510}
              rx={77}
              ry={28}
              fill="#1F1F1F"
            />
          </g>
          <g id="first-jump">
            <mask
              id="mask0_3610_9890"
              style={{
                maskType: "alpha",
              }}
              maskUnits="userSpaceOnUse"
              x={70}
              y={257}
              width={456}
              height={268}
            >
              <path
                id="worm-mask"
                d="M100 495C100 495 131.59 286.5 299.5 286.5C467.41 286.5 497 495 497 495"
                stroke="#45DBAC"
                strokeWidth={58}
                strokeLinecap="round"
              />
            </mask>
            <g mask="url(#mask0_3610_9890)">
              <path
                id="worm-1"
                d="M94 545C94 545 123.631 287 297.022 287C470.412 287 502 543.503 502 543.503"
                stroke="#DB4545"
                strokeWidth={38}
                strokeLinecap="round"
              />
            </g>
          </g>
          <g id="second-jump">
            <mask
              id="mask1_3610_9890"
              style={{
                maskType: "alpha",
              }}
              maskUnits="userSpaceOnUse"
              x={751}
              y={16}
              width={389}
              height={509}
            >
              <path
                id="worm-mask_2"
                d="M794.361 483.633C794.361 483.633 759.916 56.5 943.5 56.5C1127.08 56.5 1097.33 475.649 1097.33 475.649"
                stroke="#207D2E"
                strokeWidth={81}
                strokeLinecap="round"
              />
            </mask>
            <g mask="url(#mask1_3610_9890)">
              <path
                id="worm-2"
                d="M801.071 557.996C801.071 557.996 755.893 66.0859 939.477 66.0859C1123.06 66.0859 1096.91 558 1096.91 558"
                stroke="#DB4545"
                strokeWidth={38}
                strokeLinecap="round"
              />
            </g>
          </g>
        </g>
      </svg>
    </div>
  );
}

Vehicle: [car model/trim], rear exterior, as used in prior renders.

Views needed (5 files):

1. Car_Straight — dead-on rear view, camera at bumper height, car pointing straight ahead
2. Car_30_Left — car yawed 30° to the left (as if steering left), viewed from behind/above
3. Car_30_Right — mirror of the above, yawed 30° right
4. Car_60_Left — yawed 60° left, same camera height/distance as the 30° shots
5. Car_60_Right — mirror of the above, yawed 60° right

(Only 3 unique renders are strictly required — Straight, 30°, 60° — since Left/Right can be mirrored. But please render both sides natively if any asymmetric details, like exhaust or badges, should read correctly instead of flipped.)

Critical consistency requirements (this is the part that broke before):

• Same camera distance and focal length across all 5 shots — do not zoom in/out between angles. The car's body should occupy the same proportion of the canvas in every file (target: car fills ~95–98% of canvas width, with a uniform ~2–3% transparent margin on all sides).
• Same camera height/pitch across all shots — top-down angle should not vary between the straight shot and the 30°/60° shots. (Previously the straight view was a flatter rear-on shot while the turn views were steeper top-down angles — that mismatch is the main thing to avoid.)
• Car's ground contact point (wheels/shadow) at the same vertical position in the canvas across all 5 files, so it doesn't appear to jump up/down when swapping images.

File specs:

• Format: PNG, transparent background (alpha channel, no matte/color fringing at edges)
• Resolution: ~1200–1500px on the longest side (will be