OSUblake

With a pro account, you get a token to access a private npm package. https://blog.fontawesome.com/locking-the-vault-on-font-awesome-npm-tokens-2/ https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro

I'm not seeing an issue on Windows.

I would use latest, but they should work for any 3.* version.

I'm not sure if we can fix it without rewriting a bunch of stuff. It looks like this might be an old problem. https://github.com/microsoft/TypeScript/issues/15972 Is there any reason you can't upgrade to a new version?

Hm... it looks like unknown was added in TypeScript 3.0. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type Curious, if you find and replace all the unknown with any, does it compile?

Is that pointing to this the gsap-utils.d.ts file? It's seem weird that in would complain about that when there are rest params before it.

... because I think you have to make a PR, and you or Jack should be the owner.

I didn't try. You ran that command with the repo?

That's not where they sit. The center of it would be the x + width / 2 and y + height / 2. And you only need to set the svgOrigin one time, not in every tween. gsap.set(eye1, { svgOrigin: '65.66 89.79', // does not work }) You're power3 ease in incorrect, and you don't need to put numbers in a string. rotateLeft.to(eye1, { rotation: 180, duration: 0.75, ease: 'rough' }) .to(eye1, {x: -20.19, duration: .25, ease: "power3.in" }, '+=1');

I think you might be able to get those removed so people will stop trying to install them. https://github.com/DefinitelyTyped/DefinitelyTyped#removing-a-package

I think import { gsap } from 'gsap' gets the umd version in nextjs based on the main field in the package.json.

@GreenSock does ScrollTrigger listen for the load event? I guess even if it did, if someone adds window.onload = function() {}, then it screws it up.

Unless I'm missing something here, the window load event will fire when all the images have been loaded.

I think @Carl is.

Can we get that fixed? Someone else asked me about this last night.

Sorry, but I really don't have a lot of experience with ScrollTrigger. Try asking your question in a new topic.

There is no reason to... unless you really want to make gsap global. gsap.install(window) But if you're trying to make it global, then you should probably just go ahead and use a CDN for better caching. https://cdnjs.com/libraries/gsap

That's the correct way. Gsap isn't global, so you have to import it in every file where you use it.

Hard to say what if any performance problems there might be without seeing a demo. The quickSetter just set values, so maybe you are mistaking that for performance problems. ?‍♂️ If you need a smooth transition, then you can interpolate changes like in this demo. https://codepen.io/GreenSock/pen/WNNNBpo And the most performant way to use quickSetter is to specify the property. this.hillsXSetter = gsap.quickSetter(this.hills, 'x', 'px') this.hillsXSetter(s / 5) Also, setting will-change: transform in your css for the images can improve performance.

Just a little tip. You don't need to wrap the animation in a promise as gsap animations are promisified, i.e. returning the animation is the same as returning a promise that will resolve on complete. return gsap.to(this.speed, { duration: this.spinConfig.startTime, ease: Back.easeOut, value: this.config.speed, delay: this.config.startDelay, onUpdate: () => console.log(this.speed.value) }); https://greensock.com/docs/v3/GSAP/Tween/then() https://greensock.com/docs/v3/GSAP/Timeline/then()

Here's a good article that explains how some of the stuff is calculated. https://css-tricks.com/svg-animation-on-css-transforms/ What's the desired outcome? Don't look at the matrix. What do you want it to do visually?

Probably has to do with you dynamically changing the location. You might need to use cache busting url. https://stackoverflow.com/a/14197329/2760155 Or force it to reload. https://stackoverflow.com/a/14197317/2760155 But I would probably start with calling the animation on load, or maybe using barba to do the route changes. https://barba.js.org/

Do you have a demo of that? I've never seen anything like that happen before.

I have no idea why you would even need to use unload for an animation as it won't wait for it to finish without some hacks.

Here's how you can do the zooming. https://codepen.io/osublake/pen/MErWRb