[React 18.2.0 and Draggable issue]

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" />;
};

 

[React 18.2.0 and Draggable issue]

Thanks @Rodrigo!

 

[React 18.2.0 and Draggable issue]

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).  

See the Pen 44359a27b9cb436f0fcffba87cecdfca by chrisgannon (@chrisgannon) on CodePen

 

[React 18.2.0 and Draggable issue]

Lovely - thanks @GreenSockand @Rodrigo 👍

[React 18.2.0 and Draggable issue]

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!

See the Pen 9bc707f98fe05701e810e90d77f5cb10 by chrisgannon (@chrisgannon) on CodePen

[Tween targets inside shadowRoot]

Just updating this post to the (now) simpler syntax of

const q = gsap.utils.selector(document);

 

[Stagger Animation with React Functional Components]

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: {
   ...
  }
})

 

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

17 hours ago, jackierfp said:

@Shrug

 

Yeah, I am not sure about goToAndStop either. 

 

 

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

[How can I convert this TweenMax animation to gsap??]

On 12/6/2020 at 2:54 PM, Rodrigo said:

@SLSCoder Why you want to emulate that garbage? 

 

Is nice to see that this sample is still attracting some attention, which was inspired by another codepen by the all mighty @chrisgannon actually:

 

 

 

 

I'll try to update it myself to use vanilla and GSAP 3 later today.

 

Happy Tweening!!!

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

 

[GSAP V3 Alternative to MorphSVGPlugin.pathDataToBezier]

On 7/17/2020 at 6:36 PM, Marcelo Vaz said:

Hey guys, sorry to bring up an old topic again, but i would like some orientation in how i would go about implementing several instances of this inside a carousel, any tips? Thanks for the help so far.

 

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

[The ease can work on timeline whole animation?]

19 minutes ago, OSUblake said:

 

What were you thinking for the api? I was thinking of something like this. Just a normal timeline, but treat it differently.

 

gsap.timeline({
  keyframes: true, // tell it to treat timeline as keyframes
  keyframesEase: "circ" // ease to use
})
.to(a, { ... })
.to(b, { ... });

 

 

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

[The ease can work on timeline whole animation?]

5 hours ago, OSUblake said:

You can use keyframes if you're using the same target.

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

[Tween ratio doc typo]

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

[Tween ratio doc typo]

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

See the Pen 2a7355eef9eb5df6fc270f80e3da5a73 by chrisgannon (@chrisgannon) on CodePen

[Delay ignored when timeScale set]

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

See the Pen 7bcf8cd97ec4b57206d17cdfef2a959b by chrisgannon (@chrisgannon) on CodePen

[onStart and ScrollTrigger]

Cheers Jack - I'll give it a whirl

[onStart and ScrollTrigger]

I would like to use the onStartevent of a timeline to do something when you start scrolling a ScrollTrigger animation.

 

I've noticed that before any interaction at all, onEnterfires once and onStart fires 3 times.

 

I think I understand why onEnter fires but I was only expecting onStart to fire once you start scrolling.

 

Any ideas?

 

Update: I've just noticed onStart also fires when I resize the browser window too.

 

See the Pen 601e72e4e725f0a3e8b0661dacd66b59 by chrisgannon (@chrisgannon) on CodePen

[gsap.utils.random incorrect values]

Cheers Jack - just glad I'm not going mad.

[gsap.utils.random incorrect values]

I've either misunderstood what gsap.utils.random does or it's spitting out the wrong values.

 

Click the pen and a random value will display. My understanding was that it will choose values between 0 and 100,000 (in this case).

 

But it actually displays negative values too. If I put a snapping number in, like 1, (gsap.utils.random(0, 100000, 1)) it picks values from the correct range (but I don't get decimals).

 

See the Pen bb8db93f1783b4b0f0d3ac5d55f11f9a by chrisgannon (@chrisgannon) on CodePen

[Stagger Animation with React Functional Components]

Here's a slightly different approach to stagger using separate Card components:

 

See the Pen 670fe4387dba87db9632440da8d262b8 by chrisgannon (@chrisgannon) on CodePen

 

 

Just by changing one value (numCards) you can have as many as you want. 

[How to do a motion tracking editor in the browser?]

 

What you see there was some software I was developing that was a progression from a more convoluted process involving motion tracking. I was never very happy with the results and ended up using my initial process which I'll describe.

 

So this initial process involved several steps using different software. I never posted the steps because it was really complicated and had a lot of quirks.

 

If I remember correctly, I generated tracking data using Mocha inside After Effects. I then wrote a parser to convert it to a corner pin data format (basically an array of X and Y vector points).

 

Then I used a library called PerspectiveTransform.js to apply the corner pin data to an element (this was crucial) — this could be anything from a video to an SVG or JPG. This library skewed and scaled elements based on their X and Y data.

 

Then I converted the video I wanted to composite the element onto to an image sequence (massive faff!). A lot of people thought I was using video but at the time, video events and keyframes were really unreliable, the browser specs kept changing and it couldn't keep up with the data stream half the time anyway.

 

I then created a player that accepted the image sequence, the element(s) to composite (these could be interactive like a DIV of HTML elements) and the corner pin data and married the whole lot up on a draggable timeline (that could also be played back).

 

My overall aim with this project was to have interactive elements composited onto video and tracked in 3D space which I managed to do (I even managed to track an image sequence in 3D space composited on top of another video) — bizarrely all of the demos were done in Edge Animate because at the time I was transitioning from Flash to not Flash and I didn't know pure JS, CSS or anything.

 

Chrome kept changing its video specs so every week or so I had to update my libraries. These changes were so frequent (and often broke all my work) that I eventually gave up because it was just far too much work to keep it maintained, plus the whole process of getting an interactive element tracked in 3D and composited onto video was a sprawling mess! 

 

Having said that, the results were pretty good so it wasn't all wasted time

 

Hope that helps!

[Challenge: Convert SVG path to Bezier anchor and control points]

Old post but here's a useful link:

 

https://path2bezier.netlify.com/

 

Oops just noticed it's mentioned above! Must be good then...

[getLabelTime in 3.0?]

Ok I think I have found a solution.

 

myTimeline.labels returns an object whose keys are the label name and whose properties are their time. 

 

E.g. {labelName:12, otherLabelName: 23}

 

So if you want the parent timeline to play from the child timeline's previous label you could write something like:

 

parentTl.play( childTl.labels[childTl.previousLabel()] );

 

 

 

[Help docs return no results]

When I type into the help search I can no results (for anything).

 

http://greensock.com/docs#/HTML5/

[getLabelTime in 3.0?]

I have a parent timeline.

I have a child timeline that I've added to the parent timeline.

Both play at the same time.

The child timeline has labels.

I need to get the time associated with a child label so I can tell the parent timeline to go to that time.

 

I think getLabelTime did that but it's no longer part of the 3.0 API? Is there another way?