Jump to content
GreenSock

Yaya

2 Motion Path animations with eventlistener

Go to solution Solved by GreenSock,

Recommended Posts

Hi gsap fans,

I would really appreciate some help. I created this svg with 2 boxes (packages) that need to move on their curve when you mouseenter and mouseleave.  You will also see 2 gears that are supposed to rotate.

Where am I going wrong? I really wanted to add more motion paths for the other dots on curves; but, I need to simplify for troubleshooting. Also, I worry about loading down the processing needed to make all animations happen.

Thanks in advance!
Mary

See the Pen OJvJjqo by yayaCreates (@yayaCreates) on CodePen

Link to comment
Share on other sites

  • Solution

You were feeding motionPath a <g> instead of a <path>. That won't work. The warning in the console was telling you that. 

 

You also seemed to be linking to a bunch of bonus plugins with invalid URLs. But if those are legit URLs, please do NOT post links to unrestricted, members-only plugins. That would make them free for anyone with those links. It doesn't look like you have a Club GreenSock membership either, so you shouldn't be using those plugins. 

 

You didn't load MotionPathPlugin either. 

 

Is this more like what you wanted? 

See the Pen ExExwro?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@GreenSock
Thanks for the solution! I will compare it to my code and be sure to understand it for the next gsap animation. I sent you an email about the other notes in your message. I appreciate you!

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