OSUblake

Good article on why you should use refs, The Reusability Problem. It uses React, but the same issue will happen in other component libraries like Vue. https://www.javascriptstuff.com/use-refs-not-ids/

There is no gsap file. You should import the index.js file. //import { gsap } from "./plug/gsap.js"; import { gsap } from "./plug/index.js"; Don't use TweenMax or TimelineMax. //const tl = new gsap.TweenMax(); const tl = gsap.timeline();

And you don't need to import the css plugin. https://greensock.com/docs/v3/Installation?checked=core

You can use a mixin. https://vuejs.org/v2/guide/mixins.html

There are no shapes in this demo. It's all images. https://codepen.io/osublake/pen/c70ff0dcd68fc1581dbf8b335fb60c3b If you have more than 1 sprite, you should put them in an array just like the demo above. function render() { context.clearRect(0, 0, canvas.width, canvas.height); for (var i; i < sprites.length; i++) { var sprite = sprites[i]; context.save(); context.translate(+sprite.x + sprite.offsetX, +sprite.y + sprite.offsetY); context.rotate(sprite.rotation * toRad); context.drawImage(sprite.texture, -sprite.offsetX, -sprite.offsetY); context.restore(); } }

Follow the code. translate is used to move the x and y.

I've provided numerous demos, on how to do that. This is basically copypasta. https://codepen.io/osublake/pen/770020227bacc02ea19bcbb796b25ef9 @GreenSock is random supposed to be returning strings? That messed me up for a second.

He meant that gsap won't do the draw calls. What videos? If someone isn't animating rotation, there's no point in putting in on the object. Or perhaps they named it something different. If you're using images, then you need to wait for the images to load. If you're just drawing shapes, then no, you really don't need to wait. Look at how I'm using window.addEventListener in the demo I posted. I think that is the easiest way. It's not a hack. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations The browser has do the exact same thing when you rotate an html element. It happens automagically, so you don't notice it, but it's the exact same calculations. Just think of canvas a piece of graph paper, but you can only draw stuff at 0, 0, so you need to move (transform) the paper around.

You have to make sure you use ctx.save() and ctx.restore() when doing transforms, or it will keep adding on the last transform, messing everything up.

You don't tween the image. The image is data. It's nothing more than an array of pixel color values.

Again, you can do rotation. It's just a value. https://codepen.io/osublake/pen/a6df91724b67db6b62dfe15c76b4c433 Not using gsap, it would look nearly identical, except you have less control. https://codepen.io/osublake/pen/ab9579dcaece080b8be502ce34d8fc82

All the matrix/transform stuff is the same for an image. Just replace the fillStyle/fillRect calls with drawImage.

Don't know why someone would recommend that. I would only recommend canvas if you are having performance issues, like if you're trying to animate hundreds of items, or doing some kind of special effect/image processing. It will. You're still having a disconnect between gsap and canvas. You're getting bad information from somewhere. Rotation (transforms) is an integral part of canvas.

To further illustrate how this is canvas related code. You don't need to use gsap's ticker. You can do the rAF calls yourself, and it will work the same, although it's recommended to use gsap's ticker. requestAnimationFrame(draw); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(sub.x, sub.y, 100, 100); requestAnimationFrame(draw); }

https://greensock.com/forums/topic/16501-how-can-i-improve-this-gsap-particle-animation-code/?tab=comments#comment-73821 Updated that post with v3 syntax. Note that the image has be loaded before creating that object.

My post is about how you keep asking general JavaScript and canvas questions. This is gsap related code. gsap.to(obj, { x: 100 }) This is canvas related code. The code inside the ticker function is going to be unique for almost every animation. gsap.ticker.add(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(sub.x, sub.y, 100, 100); }); I'm willing to help you out, but you have to meet me halfway. Look at everything in this thread. It literally has the answers for you on how to do rotation and other transforms. https://greensock.com/forums/topic/16501-how-can-i-improve-this-gsap-particle-animation-code/?tab=comments#comment-73821 So does the demo I posted above. If you need help understanding my code, just ask which part you don't understand. Take it one step at time.

@GreenSock is this a bug? Horizontal scrollbar showing when using pin.

Lots of transforms going on here. https://codepen.io/osublake/pen/c70ff0dcd68fc1581dbf8b335fb60c3b

I've gone over this before. GSAP is not animating canvas. GSAP is animating/updating an object. You take the values of that object and apply to your canvas via draw commands. Canvas draw commands have nothing to do with gsap. Your ticker/draw method should not have anything related to gsap in it. Just vanilla JavaScript. I've already linked to this. Lots of canvas tips.

You're slides are at 100vw. That'd push it 17px into overflow.

Windows is fine. People just incorrectly use 100vw. vw does NOT include scrollbars. Better to use 100%.

I don't have any examples on hand. All I can remember is that you have to set uvs to true on the particle container. http://pixijs.download/release/docs/PIXI.ParticleContainer.html But this question is more about PixiJS. Try searching their forums. I know it's come up before. https://www.html5gamedevs.com/forum/15-pixijs/

Yeah, I think that problem only happens when you view the asset and then try to use it with canvas. It will be cached with the wrong headers.

If you need more than 1 image, you would need to use a sprite sheet so there is only 1 baseTexture. Sometimes codepen sends the wrong headers. Just need to clear the cache by adding something like ?v=1 to the end of the image url.

Quick fix would be to add this to a .d.ts file. interface Draggable { readonly startX: number; readonly startY: number; } cc @ZachSaucier