OSUblake

You can install from a private repo. https://dotlayer.com/how-to-use-a-private-github-repo-as-a-dependency-with-yarn-npm/

I used a ParticleContainer for each firework, which improved performance, but it has a couple limitations. The most performant option would be to use a shader. Lots of examples here. https://www.shadertoy.com/results?query=fireworks

A better view.

Ha. I'm working on kind of the same thing... firework/explosion. See the video in the tweet below. I can't share the code, but I found it easier to use tweens for almost everything. I calculate everything up front so there's no slow down when it explodes. It was a little tricky because I needed the first explosion to happen at an exact spot. The particles are animated with the Physics2D plugin.

That's not all what I meant. const agency = React.createRef(); useEffect(() => { sl.current = ScrollTrigger.batch(agency.current.children, { ... }); <div ref={agency} className="layerfour"> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> <div className="box" /> </div>

Nah. It's not strict at all. Most people just aren't using React the way it's documented.

No, don't do that. If you're using regular variables inside React Hooks, you're probably doing it wrong. And don't do this. // BAD const tl = useRef(gsap.timeline({ paused: false })); const sl = useRef(gsap.timeline()); // GOOD const tl = useRef(); const sl = useRef(); You can do this to get the agencyReveal elments. agency.current.children

Side effects are usually for global stuff, and gsap modules aren't global. They might seem global during development, but tree shaking usually drops all the gsap globals for production builds. But I don't know anything about parcel or how you are consuming gsap.

Where's your webcomponent demo? You also need to make sure you compile your js to es5 and use the es5 adapter for ie.

I wouldn't expect importing as a side effect to work once you do a production build... but maybe parcel does something different. ?‍♂️ What's it do... add the imports to the window or something?

Yeah, I wasn't suggesting using it for that. My point is that it doesn't destroy the actual animation.

You can reuse anything that gets killed. It doesn't destroy the animation. It just stops it from playing and frees it up for garbage collection inside gsap's internal cache. It doesn't free it up for garbage collection if you still have a reference to it i.e. storing it in a variable. https://codepen.io/osublake/pen/5da1e4c25397934adc50b5a567620896

You can use an animation after kill. kill frees the animation up garbage collection. If you still have a reference to the timeline, then it obviously can't be freed for garbage collection, and you can play it again.

Think so. https://codepen.io/osublake/pen/4f25577f52ec84936d6724e07375b50d

Coordinates are scaled inside your svg. Here's a way to do it with vanilla js. There's a way to do that way with MotionPathPlugin, but I forgot how. cc @GreenSock https://codepen.io/osublake/pen/3e6057d297caff7067faea27ab4acfcf And notice the mousearea-2 element I added to the end of the svg. Using the red rectangle for mouse events is problematic because it's behind other elements, which will block mouse events.

Just use a function based value. You don't need to use the pixiPlugin for x and y. gsap.to(shipSprites, { x: i => shipsArray[i].destX, y: i => shipsArray[i].destY, duration: 10, stagger: 0.3 });

Simple test to demonstrate this. Every time you press click, it logs of the onStart callback of a brand new timeline instance. The useEffect references the first created timeline i.e. the timeline with an id of 1. https://codepen.io/osublake/pen/3bbae75f7703220dd24b29658592e923

I think you should always create the timeline inside the useEffect, otherwise you'll be creating a new timeline that's get thrown away on every update. const tl = useRef(); // Then in the initial render useEffect() useEffect(() => { gsap.set(sceneRef.current, { perspective: 0 }); tl.current = gsap.timeline({ paused: true, repeat: 3 }) .to(cubeRef.current, 1, { rotationY: 360, rotationX: 360 }, '-=1') .to(sceneRef.current, 1, { scale: 0.2 }, '-=1') .to(cubeRef.current, 1, { x: 500 }, '-=1') .timeScale(1); return () => { tl.current.kill(); }; }, []);

If you think it's a gsap issue, then comment out all the gsap code, and see if it works without it. You should be able to test stuff with no animations. Replace animation code with setting the style directly. cubeRef.current.style.transform = 'rotateY(' + i + 'deg)';

Is that related to gsap?

what's not loading

Yes. You should always clean up after yourself on unmount. const tl = useRef(); useEffect(() => { // correct way to declare animations tl.current = gsap.timeline() ... // unmount function return () => { tl.current.kill(); }; }, []);

You shouldn't be doing that. Choose 1 way of loading gsap. And you probably shouldn't be mixing transform with rotation, rotationX, and rotationY. Check out this guide. Linear is "none". https://greensock.com/docs/v3/Eases

I don't see that. Sounds like a GPU issue. Try on another computer.

Yeah, it's just part of Nuxt, and you only need those checks if mode in your nuxt.config is set to universal. In spa mode is doesn't matter.