chrisgannon

Regarding your addition of the class dragDot to the Dot component (and removal of the ref array), would it not now be best to remove the forwardRef as this is functionality no longer used/required and simply declare Dot as a basic component? @Rodrigo E.g. function Dot (){ return <circle className="dragDot" cx="275" cy="379.48" r="10" />; };

Thanks @Rodrigo!

Quick sanity check - this is the beginnings of a project I'm working on (drag the black dot around the dial). Given React is a big fussy baby when it comes to where code is placed and executed, is this the correct way to do it? (mainly regarding the placement of the onDrag but if you spot any other issues I'm all ears - I want to avoid unnecessary re-renders etc). https://codepen.io/chrisgannon/pen/ExpwvvR/44359a27b9cb436f0fcffba87cecdfca

Lovely - thanks @GreenSockand @Rodrigo 👍

I am trying to use Draggable with GSAP 3 and React 18.2.0 and I'm getting the following error: react-dom.production.min.js:79 Uncaught TypeError: Cannot read properties of undefined (reading 'svg') at Object.Hd [as save] (gsap.min.js:10:53239) at gsap.min.js:10:53947 at Array.forEach (<anonymous>) at Kd (gsap.min.js:10:53918) at new Draggable (Draggable3.min.js:10:16255) at Draggable3.min.js:10:15515 at Array.map (<anonymous>) at Function.create (Draggable3.min.js:10:15492) at Context.<anonymous> (pen.js?key=pen.js-18939f83-8a31-62b2-2c73-38edd5336eee:10:17) at Cw (gsap.min.js:10:44676) Am I doing something wrong? I found this post from 2018 regarding an issue with React 16.5 adding dragClickables:true but this isn't the solution. Cheers!

Just updating this post to the (now) simpler syntax of const q = gsap.utils.selector(document);

If the elements you want to stagger are all in the same group or container, using yourRef.childNodes works fine too. <g ref={element => {container = element}} > <circle.... <circle.... <path.... </g> Then let container = useRef(); gsap.to(container.childNodes, { stagger: { ... } })

goToAndStop is a Lottie/Bodymovin method to, well, go to and stop at a frame. I'm not randomly including ActionScript

Wow this is 7 years old! Back then we had to add everything inside css:{}

Please remember to include the full license if you use this (my work) in your project 👍

My idea to just use it in the same way as it's already used: gsap.timeline({ defaults: { ease: 'circ' } }); tl.to('#a, #b', { keyframes: [ { ... }, { ... } ] }) I think both approaches have their upsides although I would be reluctant to add more special properties given the framework already has syntax to handle multiple targets. I do like the fact your suggestion supports from and fromTo though

I would love to be able to use keyframes with different targets. @GreenSock

This smells like someone forgot the new default duration in GSAP 3.x is 0.5 and not 1!

It seems there's typo in the docs - it should be tween.pause(0.25); - this generates the correct logged values.

Seems delay is being ignored when I set timeScale on a timeline.