OSUblake

I don't see how animations would affect that unless you're animating properties that affect layout, like width, height, top, left, etc.

Use wrap. https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() .to(".ball02, .text01", { scale: gsap.utils.wrap([2,1]) }, 0.2)

It's easy to do dragging in PixiJS. https://pixijs.io/examples/#/interaction/dragging.js You should be able to use that to do the same as Draggable.

The gsap-bonus.tgz file/package can be hosted anywhere, like a private repo or url, so it can be password protected. See the npm install docs. https://docs.npmjs.com/cli/install

I wouldn't expect it to. The urls are invalid. I don't get codepen projects. You can have multiple pages on stackblitz or codesandbox.

Any valid JavaScript is valid TypeScript. If a library doesn't have types, you can easily ignore it. declare var SomeLibrary: any;

You can hide scrollbars by making the inner container larger than the outer one. https://codepen.io/osublake/pen/1ab3cd4e2e03fc029cdd510b0358d5b4

When you don't want the svg to scale, so it's a fixed size. I think this is a good svg resource. http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

Nope. Not unless you hide them. ScrollTrigger requires a scrolling container. That site you linked is fake scrolling.

Hard to say without seeing the problem. Might need to use a server, and if the image isn't local, you might get cors issues. Sometimes can be fixed doing this. If using img element, add crossorigin. <img id="img" src="https://assets.codepen.io/106114/dog.png" crossorigin="anonymous"> Or. var img = new Image(); img.crossorigin = "anonymous"; img.src = "https://assets.codepen.io/106114/dog.png"; img.onload = init;

Just make sure the images are loaded before trying to draw them. I'm doing that in both of my demos.

drawImage doesn't work with strings. You have to a reference to the actual element if it's in the DOM. https://codepen.io/osublake/pen/e141cef8b49d573cd001ea08c91f026e

The best place to look is MDNs docs. Image can be a bunch of different things. It shows 2 different ways to use an image. There are of course more, as shown above. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage https://codepen.io/osublake/pen/bfbb1a373f41b57879468dd65d889109

Vue is doing FLIP animations.

Hard to say withtout seeing what you're doing. If you need to apply the same animation to a ref, then you should probably make a function to do that.

Not sure what's supposed to happen based on your code, but your timeline keeps getting longer because you keep adding to it everytime that useEffect function gets called. If you plan on reusing your timeline, you should create your animations inside another useEffect. const tl = useRef(null); // don't create timelines inside a ref declaration useEffect(() => { const popContainer = popContainerRef.current; const popTitle = popContainer.children[1]; // create timeline here tl.current = gsap.timeline({ paused: true }) .to(popcontainer, { ... }); // return function to kill timeline on dismount return () => tl.kill(); }, []); useEffect(() => { // If status is TRUE -> play the timeline status && tl.current.play(); }, [status]);

This is the first I've heard of Framer Motion. Looks like Framer acquired Popmotion, which has been around for a while, so nothing really new. Just a slightly different syntax. Writing declarative animation code is fine for simple stuff, but writing complex, sequenced animations in JSX can get messy. Simple examples using react-gsap. I'm not sure this an improvent over imperative code. ?‍♂️ https://bitworking.github.io/react-gsap/src-components-timeline I don't even know if you can do timelines in Framer Motion, but timelines is definitely where gsap beats out other animation libraries. But you should use the right tool for the job. Perhaps Framer Motion is a better fit for the type of stuff you do.

There isn't going to be a lot of material on canvas because GSAP has no concept of canvas. You have to understand what gsap is. At its core, all gsap does is change numbers on objects. Create an object with some properties you want to animate. The names don't matter. Animate that object with gsap. On every animation frame (ticker), redraw the canvas using the updated values from the object. This moves a box back and forth. I'm logging the value out so you can see it change. I'm using that value to control the x position of a box. https://codepen.io/osublake/pen/339b03f5f02b8b39966c92f253e7fad0 It is vector, but you can also use regular images inside. Think of SVG as being like canvas, but on easy mode.

No. There is no DOM with canvas. Everything is done with objects that you have to design yourself. It's explained in all the stuff I've linked to. I think it might be easier if you use SVG for that. https://codepen.io/osublake/pen/91f6f804c78b8d9d012cc5000f347db5

There are no items in a canvas element. It's just pixels. The best way to understand what is going on is to go through that tutorial, and code every example yourself. I think the Intro to JS course on Khan Academy is another good place to start. It uses a canvas library, but the concepts are mostly the same for vanilla canvas. https://www.khanacademy.org/computing/computer-programming/programming After that, check out this thread. It's the closest thing to a guide on canvas and gsap as you're going to get. Be sure to click on all the links too. But those sources barely scratch the surface. Canvas can get complicated, especially when dealing with Hi-DPI monitors/retina displays. That's really beyond the scope of this forum.

There is no guide for gsap. It's just knowing how to use canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial There are no "best/current" methods to animate canvas. Just tween an object, and then draw the changes in a ticker callback. What objects you tween is up to you. The only difference between versions will be minor syntax changes. And yes, there are some canvas demos on this forum that don't use gsap. You have to read why they were posted there. Some people just copy and paste canvas code, asking for general help.

I don't know what you saw, but that will always be the proper way to do canvas with gsap. Those drawing commands are just like the html of a web page. You can't make a web page without html, right? Well you can't do a canvas animation without a bunch of drawing commands.

I didn't see that, but it might be because you are using an image service. Try using a static image.

If your sTo value is 1.00 or the same as the previous one, then there might not be any animation. Again why using toFixed is a bad idea.

First, gsap has built in random support. https://greensock.com/docs/v3/GSAP/UtilityMethods/random() Use delayedCall instead of setTimeout. setTimeout is not synced with gsap. https://greensock.com/docs/v3/GSAP/gsap.delayedCall() Subtracting and adding 0 makes no sense. var x = Math.random() * (maxOffsetX - 0) + 0; // Better var x = Math.random() * maxOffsetX; .toFixed() creates a string. Bad for math. var sTo = (Math.random() * (scaleTo - 1.00) + 1.00).toFixed(2); Easy random sign. function randomSign() { return Math.random() < 0.5 ? 1 : -1; } ... gsap.to($el, { scale: sTo, x: x * randomSign(), y: y * randomSign(), duration: animTime, ease: "power1.inOut", onComplete: start }); I don't know if this fixes your issues, but it's a start. You should also wait for the image to load before storing its width and height. https://codepen.io/osublake/pen/17cbaea5c2ba927d860d74bf6540a042