[Anim not randomizing when put on canvas]

17 minutes ago, ladlon said:

That's odd, as I would have thought you just do the regular GSAP rotation tween on the image

 

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

[Anim not randomizing when put on canvas]

11 minutes ago, ladlon said:

I still need to figure out how to then use that with some form of tweening... apparently Canvas-based, since I found out today that GSAP cannot (apparently) address rotation with Canvas-based scenarios.  That's odd, as I would have thought you just do the regular GSAP rotation tween on the image, then stamp it down on the canvas (as you do with GSAP positional tweens).  So, now I'm trying to sort out non-GSAP assisted Canvas rotation tweening.

 

Again, you can do rotation. It's just a value.

 

See the Pen a6df91724b67db6b62dfe15c76b4c433 by osublake (@osublake) on CodePen

 

 

Not using gsap, it would look nearly identical, except you have less control.

 

See the Pen ab9579dcaece080b8be502ce34d8fc82 by osublake (@osublake) on CodePen

 

[Anim not randomizing when put on canvas]

2 minutes ago, ladlon said:

 

 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Non-rotated rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// Rotated rectangle
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);

 

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

 

[Anim not randomizing when put on canvas]

1 minute ago, ladlon said:

Worked, but I kept getting told I should use Canvas, so I wanted to try that out, since it would provide a more stable/predictable structure, not requiring hacks and compromises.

 

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.

 

2 minutes ago, ladlon said:

but then found out that GSAP won't be able to help me with the random rotation aspect of it. 

 

It will. You're still having a disconnect between gsap and canvas.

 

9 minutes ago, ladlon said:

So, then I pursued the Canvas (non-GSAP) method of doing rotations, but then found out that (apparently) you can only rotate the entire canvas

 

You're getting bad information from somewhere. Rotation (transforms) is an integral part of canvas. 

 

 

 

 

[Anim not randomizing when put on canvas]

25 minutes ago, OSUblake said:

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);
});

 

 

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);
}

 

[Anim not randomizing when put on canvas]

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.

 

 

 

[Anim not randomizing when put on canvas]

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.

 

 

 

[ScrollTrigger adds undesired scroll]

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

[Anim not randomizing when put on canvas]

Lots of transforms going on here.

 

See the Pen c70ff0dcd68fc1581dbf8b335fb60c3b by osublake (@osublake) on CodePen

 

 

[Anim not randomizing when put on canvas]

59 minutes ago, ladlon said:

So, does that mean GSAP cannot be used to rotate an item on Canvas?

 

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.

 

 

 

[ScrollTrigger adds undesired scroll]

2 minutes ago, IvanBell said:

I tried changing 100vw to 100% before creating this topic, it didn't help

 

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

 

[ScrollTrigger adds undesired scroll]

2 minutes ago, ZachSaucier said:

It might have to do with how Windows reports their width calculations

 

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

 

 

[pixi ParticleContainer]

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/

 

 

[pixi ParticleContainer]

Just now, PointC said:

ahh... good to know. I just had that happen the other day with that little dog image I use in all my Pixi tests.

 

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.

 

 

 

[pixi ParticleContainer]

1 hour ago, benoit said:

Really easy to use PixiJS with TL, but do you know if I can use ParticleContainer with more image (png/svg/…) or I just need to create another ParticleContainer ?

 

If you need more than 1 image, you would need to use a sprite sheet so there is only 1 baseTexture.

 

22 minutes ago, PointC said:

If you're asking why your sprites aren't showing, you have a cross-origin problem.

 

 

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.

 

[Draggable startX, startY not in .ts types]

Quick fix would be to add this to a .d.ts file.

 

interface Draggable {
  readonly startX: number;
  readonly startY: number;
}

 

cc @ZachSaucier

 

[GSAP and Google Core Web Vitals]

10 minutes ago, MindGamer said:

It seems that an animated DOM element is an "unfinished layout" from Google's perspective.

 

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

 

 

 

[gsap.to array]

Use wrap.

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

.to(".ball02, .text01", {
  scale: gsap.utils.wrap([2,1])
}, 0.2)

 

[How to create a sortable list with Draggable]

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.

[Bonus Plugins problem on netlify]

7 hours ago, Alexandra Spalato said:

as if the file is not on github, it cannot be deployed...

 

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

 

 

[Barba.js Page Transition whith GSAP animation, but GSAP Animation is Not Working]

19 minutes ago, Shrug ¯\_(ツ)_/¯ said:

I may be completely wrong (someone correct me) but does Barba.js work correctly in regular Codepens I can't recall seeing it?

 

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.

 

[Drawing an animated line from Div to Div]

Any valid JavaScript is valid TypeScript. If a library doesn't have types, you can easily ignore it.

 

declare var SomeLibrary: any;

 

[Smooth Scrolling (Not Anchor-Jumping!)]

You can hide scrollbars by making the inner container larger than the outer one.

 

See the Pen 1ab3cd4e2e03fc029cdd510b0358d5b4 by osublake (@osublake) on CodePen

 

 

[TransformOrigin on SVG rect clipPath]

4 minutes ago, cottoncreative said:

Are there cases when viewBox isn't recommended and what's a good resource for all these intricacies?

 

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

 

[Smooth Scrolling (Not Anchor-Jumping!)]

21 minutes ago, achtzigundsieben said:

Hope this (smooth scroll without any Scrollbars) is possible with ScrollTrigger?!

 

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