OSUblake

Ha... noted. I def don't care about any version IE. Do you have a demo of that? I'm genuinely interested in seeing the difference.

Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! ? Yes, that changed with v3.... You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function. https://greensock.com/docs/v3/GSAP/gsap.getProperty() And check out the Reusable getter function at the bottom. It will cache the target to improve performance. var getter = gsap.getProperty(inputHandle); var x = getter("x"); var y = getter("y") If you need more help, just let me know.

I just copied and pasted that part from CSS tricks... the box sizing part. https://css-tricks.com/box-sizing/ But serious question. What's the difference? I don't think I truly understand the difference. How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times. Just kidding. I honestly don't know how many times, but it hasn't been a lot. I like using relative for all elements because, well basically that's what you really want. Without it, you have to debug why setting left, top, and z-index don't work. It gets even crazier when you throw in stacking contexts. I learned about this relative tip from David Khourshid. He does some pretty amazing work. https://codepen.io/davidkpiano/pens/popular

Can you make a demo of that? I'm thinking that for this to work, you would need to animate a "container" element with a motion path, and then influence the position of a child element with your mouse movement logic.

I feel your pain! I've been stumped by that problem more times than I can count, but I've learned my lesson. Whenever I start on a project, the first thing I do is add this to my CSS. *, *:before, *:after { box-sizing: border-box; position: relative; } Trust me, it's a lifesaver.

I don't see any problems, but if you need to do a hard refresh to see the problem, that probably means you need to wait for images and other assets to load.

Another bad thing about CSS is that it's hard control with transforms. Take a polygon clip-path and try to scale and rotate it from the center. It's doable, but it won't be fun.

Looks pretty good to me. It's supported in all modern browsers. But what about IE? IE usage is skewed because of a South Korean law.

CSS support for clip-path is meh. It really needs support for path(). https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility I think CSS will be better option in the future. With SVG, you have to create an new <clip-path> element for each instance. Meaning, if you want to apply the same clip path animation to 4 different elements, but at different times, then you will need to create 4 <clip-path> elements.

That's not valid JavaScript. You can use backticks for multi-line strings. const shadow = `0 1px 0 hsl(43, 35%, 47%), 0 2px 0 hsl(43, 35%, 40%), 0 3px 0 hsl(44, 35%, 35%), 0 4px 0 hsl(44, 35%, 30%), 0 5px 0 hsl(44, 35%, 27%), 0 6px 0 hsl(43, 35%, 25%), 0 7px 0 hsl(42, 35%, 23%), 0 8px 0 hsl(42, 35%, 21%), 0 0 1px rgba(162, 138, 78, 0.05), 0 1px 3px rgba(162, 138, 78, 0.2), 0 3px 4px rgba(162, 138, 78, 0.2), 0 5px 5px rgba(162, 138, 78, 0.2), 0 10px 6px rgba(162, 138, 78, 0.2), 0 20px 7px rgba(162, 138, 78, 0.3)`;

You should be able to do something similar to that using a combination of toLocal and toGlobal methods. It's been a while since I've done it, but I know it is possible.

Forgot to mention that if the page is scrolled, you may need to add the scroll position. timeline.to("#content", { y: 0.2 * window.innerHeight - (bounds.top + window.scrollY), duration: 2 });

y isn't an absolute coordinate. You would need to calculate from where it's sitting. https://codepen.io/osublake/pen/f86b3f65f51ef2f625455fb7680d84db

That's a problem with how typescript looks for definitions. When you use "gsap/all", it looks for a package named gsap/all, which of course doesn't exist. So you either have to import from "gsap" in at least 1 file, or tell the compiler where the definitions are in a tsconfig. See the FAQ. https://greensock.com/docs/v3/Installation { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] }

In the future, please provide a demo instead of posting code. Animating state. https://codepen.io/osublake/pen/7c49fd566c08b586659aae3987b5d59d Directly animating text inside an element. Should you do it this way? Depends. Animating state can be slow. https://codepen.io/osublake/pen/fdadebde8f35d6d113683dfb94569a1a

TweenLite, TweenMax, TimelineLite, and TimelineMax is the old syntax. gsap is the new syntax, so use that instead.

How would you reverse it outside the function? With hooks, everything goes bye-bye on every render if you don't store it the "React way". And you don't need to use state. A ref is fine, but it adds more noise to your code because you have to use .current. https://codesandbox.io/s/react-hover-forward-ref-pthnx

I have no idea. ?‍♂️

<g> elements support transforms. You need to calculate the difference between the position of a <g> element and the point you want. Something like this. var parts = document.querySelectorAll('#CarParts > g:not(#FordLogo)'); gsap.killTweensOf(parts); gsap.to(parts, { y: (index, element) => { var box = element.getBBox(); return 300 - box.y - box.height; } }); Also, you're creating a ton of <use> elements because you're calling the fordLogoClicked function for every part.

Not really. I locked that thread because I don't feel like answering anymore scroll related questions. At least not for free. However, that code is free for anyone to use and modify. All I can say is that the problem is most likely related to the fact that you are creating the scroller when the body height is different because of your intro animations. It should be created when the page is ready for scrolling, and everything is in place. And if needed, I think you can force it to reset by doing something like this. scroller.scrollItems = []; scroller.addItems(); scroller._update();

Maybe try changing the fromTo animations to just to animations? https://codesandbox.io/s/ecstatic-lehmann-znx1x

There's a new documentation page for staggers. Check out the Repeat / Yoyo / Callbacks section. https://greensock.com/docs/v3/Staggers

You can put callbacks inside the stagger object. gsap.to(elements, { x: 100, repeat: -1, stagger: { each: 0.1, onComplete() { console.log(this.targets()[0]); // <= the current target } } })

You're importing gsap twice. Either use the import syntax in every file that uses gsap, or add the script to your angular.json file, but not both. When using the import syntax, you only need to import gsap though. There is no need to import TweenLite/Max, TimelineLite/Max, or any of the eases. import { gsap } from "gsap"; https://greensock.com/docs/v3/Installation Eases can be done with strings. gsap.to(element, { duration: 2.5, ease: "bounce.out", y: -500 }); https://greensock.com/docs/v3/Eases And you most certainly don't need jQuery. import { gsap } from "gsap"; gsap.fromTo(".mobile-screen", { marginLeft: "20vw" }, { duration: 0.3, marginLeft: "100vw" }); ? animating margins is slow. It would be much better to animate x. And with angular, you really should be using refs instead selector strings. https://www.techiediaries.com/angular-elementref/

SplitText is kind of pointless for canvas. Just use text metrics to get the position of a letter. https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics