OSUblake

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

You could just animate the rotation. It's hard figuring out an exact transform origin on your image, but something like this. https://codepen.io/osublake/pen/009d53625978e660b93a7265cfc0f826

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

Ha... noted. I def don't care about any version IE. Do you have a demo of that? I'm genuinely interested in seeing the difference.

Pro tip: I'll answer anyone's question if they make a bare minimal effort to try and understand my code. Any attempt... that's all I ask, but I can tell you've already done that! 😉 Yes, that changed with v3.... You should never use an underscore to access something in v3 of gsap. There is a proper way to access everything now. Check out the getProperty() function. https://greensock.com/docs/v3/GSAP/gsap.getProperty() And check out the Reusable getter function at the bottom. It will cache the target to improve performance. var getter = gsap.getProperty(inputHandle); var x = getter("x"); var y = getter("y") If you need more help, just let me know.

I just copied and pasted that part from CSS tricks... the box sizing part. https://css-tricks.com/box-sizing/ But serious question. What's the difference? I don't think I truly understand the difference. How often do you really need that? The amount of times that I've needed an element to positioned next to a grandparent is... well, like 4 times. Just kidding. I honestly don't know how many times, but it hasn't been a lot. I like using relative for all elements because, well basically that's what you really want. Without it, you have to debug why setting left, top, and z-index don't work. It gets even crazier when you throw in stacking contexts. I learned about this relative tip from David Khourshid. He does some pretty amazing work. https://codepen.io/davidkpiano/pens/popular