OSUblake

Another one I can't take credit for. This is the original. I made that version to show how to use SVG filters inside canvas. Unfortunately, Safari still doesn't support canvas filters. https://codepen.io/mattpopovich/pen/zzENQQ

Ah, nice! I used to use his hyperHTML library before lit-html came out. Didn't know he came out with another one.

More like copy and paste the source code. That is a definitely an expert level tutorial if I've ever seen one. I doubt 0.01% of web developers can even write a shader.

Let's go all in and do Canvas + SVG. Just paint the heat on. ??? https://codepen.io/osublake/pen/aLrXzw

I'm pretty sure people will start using it once it starts showing up in demos. It will probably also be a good learning experience for some as I don't think a lot of people know you can do element.querySelectorAll. But I think the biggest usage will be with React and Angular. I've shown some React examples, but Angular is probably worse. Ex HTML: <div #heading class="heading">Lorem Ipsum</div> <div> <div #img class="img"></div> <div #img class="img"></div> <div #img class="img"></div> </div> Ex TS: @component() class MyComponent implements AfterViewInit { @ViewChild("heading") heading: ElementRef; @ViewChildren("img") images: QueryList<ElementRef>; ngAfterViewInit(): void { const imageElements = this.images.map(img => img.nativeElement); gsap.to(this.heading.nativeElement, { y: 100 }); gsap.to(imageElements, { autoAlpha: 1, stagger: 0.1 }); } } With context... @component() class MyComponent implements AfterViewInit { constructor(el: ElementRef) { this.el = el.nativeElement; } ngAfterViewInit(): void { const $ = gsap.context(this.el); gsap.to($(".heading"), { y: 100 }); gsap.to($(".img"), { autoAlpha: 1, stagger: 0.1 }); } }

Right, I get all that. I was just trying to understand your workflow. Like are you cloning a template, creating elements dynamically and then appending them, appending already existing elements, using innerHTML, etc?

Any reason against in the vars? But that's probably the most versatile. For the people who miss jQuery... const $ = gsap.context(); // document And for Angular, it might be ".nativeElement".

Maybe like this? const interp = interpolate([q1, q2, q3], (start, end, progress) => { // custom interpolation return ...; });

Probably antialiasing. The stroke might not lie perfectly in the pixel grid. Kind of like here. The top box looks lighter with a thicker stroke. That's just nature of how graphics are displayed on a monitor. https://codepen.io/osublake/pen/03a55f0e37f66d5c9c85ef7a91e28705 If you click the translate 1/2 pixel checkbox here, you should see the line go from gray to black. https://codepen.io/osublake/pen/08be2488622766dc922010a69c5b40c8 The only way to really fix that is to move anything that has an odd stroke width 1, 3, 5, etc over 1/2 a pixel. It's probably not worth it if you're animating it as it won't look smooth. So I'm not exactly sure what the end result is supposed to be, but I think a good first step would be to reorganize your code. Everything should be controlled by a single render/update function, and that function could draw stuff based on a simple scene graph like so... https://codepen.io/osublake/pen/f5b7c30693a9555cbc598e56388b4b3c And with canvas, you can draw other canvases onto a canvas. This is useful if you want to combine different rendering techniques. const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const canvas2 = document.createElement("canvas"); const ctx2 = canvas2.getContext("2d"); ... // draw canvas2 on canvas ctx.drawImage(canvas2); That's how I do the filter effects in this. https://codepen.io/osublake/pen/RLOzxo

If it's not smooth, maybe make a simple demo so we can mess around and tweak it.

Yep. That's not a bad idea. Any thoughts on this @GreenSock?

So using three.js's slerp is fine, you just need to interpolate an array of them? Would something like this work? const interp = interpolate([q1, q2, q3]); let qx = interp(0.3); function interpolate(targets) { const interpolators = []; let len = targets.length; const iLen = len - 2; const q = new THREE.Quaternion(); for (let i = 1; i < len; i++) { interpolators.push(slerp(targets[i - 1], targets[i], q)); } len--; return p => { p *= len; let i = Math.min(iLen, ~~p); return interpolators[i](p - i); } } function slerp(a, b, q) { return p => { // three.js slerp return q.slerpQuaternions(a, b, p); } }

Definitely not easy. Something like this is definitely a good use case for some gsap utils like interpolate and mapRange. An example of how the points could be setup and then modified in the update function. https://codepen.io/osublake/pen/2ed6786c0e21107ed101211053db81df

What properties are you trying to animate? Do you have some psuedo code?

I know, that's why I tagged someone else ?

@GreenSock do you have some code for this? I can't find my demos that show this.

That's from the flash days. You should be able to just use onUpdate kind of like what shown here... although they are using Tween.js https://discourse.threejs.org/t/animating-quaternion-rotation/8015/12

Well, I would still consider that part of the web components API. So if you do that way, then how to do you add elements to the shadow root?

Using lineTo definitely requires a lot more work. https://codepen.io/osublake/pen/9ecbcd3e4f22a6187f53de90474083e2

With lineTo, you would need to draw each line of the square. But it's easier to just to use strokeRect or fillRect for a square. https://codepen.io/osublake/pen/b9683e34dff19d85dba7ae6f8015820f

You're right about it being no better/different. Would that API work if you like create an animation after calling context? gsap.context(svgRef.current, () => { gsap.to("circle", { x: 100, onComplete() { gsap.to("rect", { ... }); } }); });

I'll check your demo out in a bit, but this is what I meant scaling. It can be used to change the position of something.

The reason for using refs is to get the correct element. You really don't need refs if you are 100% sure that the document.querySelectorAll will get the correct element, but that's unlikely if a component is used more than once, which is basically the whole point of using components.

I think there's been a lot of confusion over the years, especially with people throwing out terms like virtual DOM. Elements just don't get trashed or recreated. Once it's in the DOM, it's stays in there until you tell React to remove it. Re-rendering basically just means applying changes made within React, or whatever component framework you're using, to the DOM. In this demo, React is re-rendering the cx attribute, which is being changed within React. GSAP is animating the cy attribute. There would only be an issue if gsap tries to change what React is trying to change. https://codepen.io/osublake/pen/bd15dbff73a59bd52de033864b2559d8

And this doesn't apply to just React. Vue and Angular behave the same way with refs.