[Q: Timeline with morphsvg stuck in a loop on mouse enter event]

Solved.

 

See the Pen ExXaVJE by zzkevinlim (@zzkevinlim) on CodePen

[Q: Timeline with morphsvg stuck in a loop on mouse enter event]

As titled.

See the Pen dyRPYQQ by zzkevinlim (@zzkevinlim) on CodePen

[Circular motion]

1 hour ago, GreenSock said:

@zzkevinlim the 2 recent solutions above are GSAP 3 solutions.

 

There are a bunch of ways you could accomplish this even without MotionPathPlugin. Like put it in a container <div>, set its transformOrigin to the radius, animate the rotation and counter-rotate the rotation of the inner element. 

 

 

 

If you have quadratic bezier data, you can translate it into cubic bezier data with this helper function: 

function quadToCubic(points) {
  let cubic = [],
      l = points.length - 1,
      i = 1, 
      a, b, c;
  for (; i < l; i+=2) {
    a = points[i-1];
    b = points[i];
    c = points[i+1];
    cubic.push(a, {x: (2 * b.x + a.x) / 3, y: (2 * b.y + a.y) / 3}, {x: (2 * b.x + c.x) / 3, y: (2 * b.y + c.y) / 3});
  }
  cubic.push(points[l]);
  return cubic;
}

And then plug that into a regular MotionPath animation. Here is a fork:

 

 

 

Does that answer your question? 

Yes, thankyou so much!

[Circular motion]

How do I achieve this in GSAP3?

[Anyone keen to split for the GSAP 3 Express Course (50USD, paypal)?]

4 minutes ago, Carl said:

Hi @zzkevinlim I admire your ingenuity and since you are a Club GreenSock member already I'm happy to extend a little offer to you.

 

You can grab a Single User Lifetime membership for only $89 (only 20 bucks more than 1 year)

 

Just choose the "lifetime + friend" plan and use code shiny at checkout to take $30 off the $119 price. 

When  I see that code used I'll know not to issue a free friend coupon.

 

This coupon will only remain active through Wednesday of this week for you or anyone who happens to stumble through these parts.

 

Thankyou! Just what I needed.

[Anyone keen to split for the GSAP 3 Express Course (50USD, paypal)?]

You will be given a single-use-coupon for a lifetime subscription of GSAP 3 Express Course at https://www.creativecodingclub.com/bundles/creative-coding-club with new content added weekly.

 

50USD, paypal only.

[What does "end: top bottom" mean?]

1 hour ago, tailbreezy said:

Hello fellas,

 

afaik "bottom-20" is invalid syntax. And since it is invalid, it will move you scroller-end anchor to the very top

You should do "bottom-=20" (notice the = sign) which will subtract 20 from the bottom value (e.g 1000 - 20 => 980) so you get 20 pixels from the bottom (upwards).

Likewise there is also "bottom+=20") which will get you 1020 (e.g 20px from the bottom of the screen downwards).

 

Also keep in mind that trying to understand using bottom and top is a little hard because the anchors will move out of the viewport.

 

Use "top center-=100"..."top center+=100" to see the effect in action.

 

Cheers

 

Good to know, thankyou.

[What does "end: top bottom" mean?]

9 minutes ago, velkas said:

I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.

 

I see, so first value is the referring to the animated element, and the second value is referring to the viewport. I see.

[What does "end: top bottom" mean?]

ScrollTrigger has an end property that takes in a/two value(s), my question is what does a value such as "top bottom" mean? I.e. "end: top bottom" or "end: bottom bottom-20px"