OSUblake

That's called vintage, and it's very popular.

You can manually calculate the length, but this is much easier. https://codepen.io/osublake/pen/GjYpPr

You don't do it once. You create a new animation every time.

In the first demo I posted, I used this function to get the position with scroll. var root = document.documentElement; var body = document.body; ... function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; }

Do you have a GSAP question? It doesn't look like you're using GSAP. This type of question is beyond the scope of the forum. Having a wave rebound off a wall is incredibly difficult to do. You would most likely need some type of physics engine. http://google.github.io/liquidfun/ https://codepen.io/ste-vg/pen/XRvBNg

That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97

I think you posted the wrong demo. https://codepen.io/GreenSock/pen/WNezBRq

That's not how .reverse() works. https://greensock.com/docs/TimelineMax/reverse() Posting code snippets isn't helpful. Fork your previous demo, and show us that it's not working. Also, I saw your demo on mobile, and I think you're going to have problems when the page has been scrolled. This might be helpful to look at. https://codepen.io/osublake/pen/WwgQEV Here's another good demo to learn from. https://codepen.io/osublake/pen/zMqevJ That demo is from this thread.

This too, I was looking at your import problem, which you didn't clearly illustrate. Export a function to create the animation.

You are exporting a default here. export default intro But not importing a default here. import {Grid, Animations} from "./components" Check out the docs on import and export. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export I would skip exporting a default. export { intro };

I see. Your build is probably is probably dropping the import. See the section on Tree Shaking here. https://greensock.com/docs/NPMUsage So you would probably need to do this. import MorphSVGPlugin from "gsap/src/uncompressed/plugins/MorphSVGPlugin"; // You need to reference the plugin somewhere in your code const plugins = [MorphSVGPlugin];

Nice one!

And this one. https://codepen.io/MAW/pen/KdmwMb

How about this? It's much simpler. https://codepen.io/MAW/pen/wBGvgW

Saying you ran "npm run build" means nothing to us because that is based on your how your project is setup. Did you try putting the actual plugin in the gsap folder in node_modules?