OSUblake

You might find some useful stuff in this thread. I use a 2d array to keep track of where everything is in a grid. https://codepen.io/osublake/pen/NrRJwm

Cool! Former Army here. I was a 13M, multiple launch rocket systems (MLRS), but the only deployment I ever did was stateside to the Marine Corps base in 29 Palms, California.

snap will just "snap" it into a position. If you want to tween it into a position, then you would probably need to create a tween in the onDrag callback.

Ha, yeah! A good thread would have like 3 or 4 people coming up with unique and better solutions.

It seems like the number of good/interesting questions has dried up lately, so most of my good posts are several years old. Nowadays most questions are about scrolling, which don't interest me.

That might be a good enough solution. The only problem with that is that you might not be able to get objects butting up against each other. For example, if you're dragging something that is 10px away from hitting another object, and then on the next drag it's hitting that object, you will end up moving it back 10px back, leaving a little gap between them. If you can live with that, then go for it. And if you are using circles, then using circle collision detection will work better than Draggable's hit test. https://codepen.io/osublake/pen/YXpdYN

Pretty sure I used the word "complicated" in both of those threads. ?

Hm. Sounds like you might need the @babel/plugin-proposal-class-properties plugin to get the class fields to work.

It's a scope issue from your requestAnimationFrame calls. Take your pick. I like using class fields for events. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields // function as class field class MyClass { update = () => { console.log(this.foo); } constructor() { this.foo = "FOO" requestAnimationFrame(this.update) } } // function inside constructor class MyClass { constructor() { this.foo = "FOO" this.update = () => { console.log(this.foo); } requestAnimationFrame(this.update); } } // use a function to call it class MyClass { constructor() { this.foo = "FOO" requestAnimationFrame(() => this.update()) } update() { console.log(this.foo); } }

Leave the gsap-bonus.tgz file in your project so you can do npm update for other packages. If you need to update gsap, you will need to download the new version from your gsap account, and repeat the process. You never needed the zip in your project. The gsap-bonus.tgz file is the only file you need. A .tgz is a gzipped file. That's what every package you download from npm is.

Sure. When you click on the path, you can drag it around. Once your path is in position, right-click on the element, select inspect, and look for the transform attribute. It will look something like this. <path transform="matrix(1 0 0 1 17.5 -27.5)"></path> You just need to add that transform attribute to your path element.

In some cases, vector rendering in canvas can be improved by using Path2D. It caches paths, reducing the number of draw calls you need to make. Still not as fast as using drawImage, but it can definitely speed up vectoring rendering for shapes that don't change a lot. It can be polyfilled for older browser, and has some limitations in legacy Edge. https://developer.mozilla.org/en-US/docs/Web/API/Path2D

Hi @Saurabh Nandwana That's quite an ambitious task! Performant vector rendering is a problem that people have been working on for years. Have you checked out bodymovin/lottie? It's a vector player, but it's not a perfect solution, nor is it always performant. https://github.com/airbnb/lottie-web https://codepen.io/collection/nVYWZR There's even a nice web component for it so you can use it just like a <video> element. https://codepen.io/fernandocomet/pen/JLrbYB Having too many canvas layers can slow stuff down. I remember the developer of bodymovin/lottie saying that it uses a dirty rectangle algorithm to limit redrawing to parts of the screen that have changed instead of the entire scene. In general, I would say Canvas2D is probably the fastest way to render vector graphics on the web, but it does have limits. Uncheck the Use Bitmap checkbox, and you should see the performance drop as it switches to vector rendering. https://codepen.io/osublake/pen/a7868b452dfb5eebad6ee9ae24c2bfc3 Morphing works well for some stuff, but it's probably not the best tool for a Simpsons cartoon as its hard to control the movement like you can with joints and bones. WebGL is still a nice option for 2d, but it won't automatically fallback to canvas as WebGL uses a completely different API. However, WebGL support is very good. I'm pretty sure it will fallback to WebGL 1, but PixiJS was never really designed to really handle complex vector graphics. It's optimized for raster graphics. For SVG, it converts them into bitmaps, so they are static. To change a path, you would need to modify the source SVG and then get Pixi to reload it, which is a slow process. For stuff like that, it's usually faster use a Canvas2D as a texture as it's much faster to update.

Related thread. transpile is discussed.

It's a little redundant having two move commands in a row (M m). `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z`

So add points using that helper (alt + click), copy the path data, and then put the path data inside the d="" quotes. <path id="red-piece" fill="#ff39aa" d="" /> Now move the those points to the melted position, copy the path data, and insert it in thed="" quotes. <path id="red-piece-melted" fill="#ff39aa" d="" />

I would do it by hand. Jack's demo is using the MotionPathHelper. https://greensock.com/docs/v3/Plugins/MotionPathHelper You can use that to edit add/edit points and copy the new path data. https://codepen.io/GreenSock/pen/oNNEdRV

First, just importgsap. There is no need to import TweenMax or eases. https://greensock.com/docs/v3/Installation https://greensock.com/docs/v3/Eases If you can't get it working in CodePen, use stackblitz or codesandbox. You need to put them in an array. Something like this, but I didn't test it. import React, {useRef, useEffect} from 'react'; import styled from 'styled-components'; import {gsap} from 'gsap'; const Header = styled.h1` text-align: center; color: palevioletred; `; const Circle = styled.div` position: relative; // top: 50%; // left: 50%; height: 250px; width: 250px; border: 1px solid palevioletred; border-radius: 50%; `; const CircleContainer = styled.div` background-color: #777; `; const CircleOne = styled(Circle) ` z-index: 500; position: absolute; top: 50%; left: 50%; `; const CircleTwo = styled(Circle)` z-index: 600; position: absolute; top: 50%; left: 50%; `; const CircleThree = styled(Circle)` z-index: 700; position: absolute; top: 50%; left: 50%; `; const CircleFour = styled(Circle)` z-index: 800; position: absolute; top: 50%; left: 50%; `; function App() { let circle1 = useRef(); let circle2 = useRef(); let circle3 = useRef(); let circle4 = useRef(); let textItem = useRef(null); useEffect(() => { const circles = [ circle1.current, circle2.current, circle3.current, circle4.current ]; gsap.to( circles, { duration: 1.5, opacity: 1, transformOrigin: 'center', rotate: 360, y: 50, ease: "boumce.out" } ); gsap.to( textItem.current, { duration: 1.5, opacity: 1, rotate: 360, x: 100, ease: "bounce.out" } ) }, []); return ( <div className="App"> <Header ref={textItem}>GSAP Animations</Header> <CircleContainer> <CircleOne ref={circle1}></CircleOne> <CircleTwo ref={circle2}></CircleTwo> <CircleThree ref={circle3}></CircleThree> <CircleFour ref={circle4}></CircleFour> </CircleContainer> </div> ); } export default App;

I would second everything Ivan said. It's really hard to estimate how well each medium (WebGL, canvas2D, SVG) will perform for animating graphics like that. I'm pretty sure canvas2d will be faster than SVG, but it's not the easiest thing to work with. Will Pixi be faster than canvas2D for an animation like that? I honestly don't know, but it will be much easier to create in Pixi.

Hm. Maybe try restarting your editor. And maybe try deleting your node_modules folder and doing a clean install. If that doesn't help, make a simple repo showing the problem. It's very hard to troubleshoot local build problems.

Like Jack said, make sure you uninstall @types/gsap. You don't need to import TweenLite/TweenMax, TimelineLite/TimelineMax, or any eases. Everything can now be done with the gsap object. Also, installation docs. https://greensock.com/docs/v3/Installation

And after reading your reply, I guess you're trying to do something similar to this? One problem with using the modifiers plugin for points is that calculations have to be done in separate x and y functions. I think it would be easier to do all the calculations in an onUpdate or ticker for any elements that have moved.

That wasn't my intent. I was genuinely trying to help you. Those demos show how you can speed up drawing lines using SVGPoints as it might require less updating i.e. setting attributes. That was not clear to me in your original post. You just showed that spring demo. The way I set those up is with the modifiers plugin is to run infinitely. The only reason I did that was to demonstrate how the modifiers plugin works. Normally I would have just used a ticker to animate something like that.

Why are you trying to optimize it? JavaScript is fast. SVG is slow. That's really not how it works. The line redraws at the end of all your updates. That said, I like using SVGPoints with polylines/polylines instead of updating a <line>. Move your mouse around. https://codepen.io/osublake/pen/c199810fd80ff33d1cf34f67dfa275aa Points can be animated too. https://codepen.io/osublake/pen/yakOjY Doesn't sound hacky, but why not just updated everything inside a single onUpdate? Not sure why are you using the modifiers plugin based on your description? A demo might help to understand your problem better.

Use media queries for media queries, not resize events. An oldie using jQuery, but not necessary. https://codepen.io/osublake/pen/vExQEy This has resize events, but for a different reason. The background color changes on media changes. https://codepen.io/osublake/pen/jLLqbY