Jump to content
Search Community

Motion Path

Yaya test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...