Motion Path

[Yaya]

Hi there,

I am working on a motion path for the broker icon, with is in the 3rd column. The box located on the circle should move along the circle's path when you mouseover it, and reverse on mouseleave.

I've pulled code from the GSAP express series (with @Carl ) and also my previous project at https://xl4u.org but I'm stuck. I used the online jlinter and did not see any red flags.

In codepen, I removed the first 2 mouseover animations so that you can find the broker code easily. The link itself is in the html.

I appreciate your expertise. What am I not seeing?
Thx,
Mary

See the Pen rNYxogJ by yayaCreates (@yayaCreates) on CodePen.

[mikel]

Hey @Yaya,

 

You need  MotionPathPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

and for the circle a closing  > 

Plus: an overflow:visible for this SVG.

 

See the Pen c23ede8ad7873280de000904bac80289??editors=1010 by mikeK (@mikeK) on CodePen.

 

A MotionPath animation based on a circle starts at 3 o'clock.

You could rotate the circle as you need in advance.

 

Happy tweening ...

Mikel

[Yaya]

@mikel

Excellent! I will make a note of that for future MotionPath projects.

FYI: The mouseover animations were not working when I added

GSDevTools.create(); 

 

Edited February 22, 2022 by Yaya
Ref GSDevTools

[mikel]

Hey YAYA,

 

//give the timeline and child tweens their own id. Here an example:

var tl = gsap.timeline({id: "timeline"})
tl.to(".orange", {duration: 1, x: 700, id: "orange"})
  .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"});

// Now each id shows up in the animations menu "Global Timeline" as popup.

Does this help you?

 

Mikel