Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Detlev_Barthel

the same motion path for several rectangles

Recommended Posts

Hi, I am a real beginner and I am sorry, that my svgs are so messy. I used an old CorelDraw program, that pumped it up with g-tags. I try to make the teeth of the chainsaw in our logo move. I gave them all the same class "zahn" (which means tooth), but they simply refuse to move. One simple rectangle is moving, but 2 or more dont. I used a for-loop, that loops over all items in this class, but still no action. Any support is very much appreciated.

Before I forget, my svg pops up in the beginning, although I think I blocked it properly with the eventlistener for "load". Do you have an idea for this?

Have  a good evening,Detlev

See the Pen bGVywLX by Ted_1958 (@Ted_1958) on CodePen

Link to comment
Share on other sites

Hi @Detlev_Barthel :)

 

Welcome to the forum. I moved your thread to the main forum so it would get more eyeballs on it.

 

I can't really dig too far into your SVG as there's quite a bit in there. ;) If it were me, I'd set those chainsaw rectangles on their own timeline so you could control the speed of all at once. Here's a quick example. I just cloned a 'cog' path a few times and animated them around an ellipse. I offset their start time via the position parameter and added each tween to a master timeline. You can also control the master timeline timeScale via the dragger.

 

See the Pen pojmBKJ by PointC (@PointC) on CodePen

 

Hopefully it will give you some ideas. Happy tweening and welcome aboard.

:)

  • Like 3
Link to comment
Share on other sites

Another option would be a stagger instead of a loop. I also adjusted the alignOrigin and number of targets for this one. 

 

See the Pen ExVzqdm by PointC (@PointC) on CodePen

  • Like 2
Link to comment
Share on other sites

Many thanks, Craig. Yes, it looks like I am at the very beginning. As soon as I have cleaned up my svg I implement your code and send you the codepen, so that you can pat on my shoulders. This will take 2 days and then you will hear of me again. Thanks for your fast and absolutely professional support. It feels good not to be left alone with problems, which are quite far over my level of experience. Thanks again, Detlev

  • Like 2
Link to comment
Share on other sites

Also note that when coming up with a solution for you I came across a minor bug in MotionPathPlugin. If you use create a motion path when the scale of a parent element of that path is exactly 0, then the motion path will not work. We've already implemented a fix in the next version of MotionPathPlugin for this but the link is not live for you to test then. So if you're wondering why some elements don't move around the path in your project, that may be the cause.

  • Like 2
Link to comment
Share on other sites

Thanks for all your support. I am almost finished and have published my work here: https://trinket.io/library/trinkets/b6c56f7922

I have one problem left to solve. The items, which are animated are always in the foreground. I want to cover the edges of the rectangles, which show to the inside of the saw blade. Then it will look more like the teeth are sitting on top of the edge. I mean, there should be no more black line facing inside and for this I just wanted to fill a copy of the motion path  with color and put it on top of the motion path. Somehow this copy does not stay in the foreground.  If you have a hint, it will be fine. Thanks again and have a nice weekend, Detlev

Link to comment
Share on other sites

Your instinct was good - use a duplicate path to create a 'cover' so the edges don't show. The reason that wasn't working is that you are cloning and appending the rectangles and those get appended to the end of the SVG. There are a few ways to fix it, but I think the easiest is to create a group in the main SVG. I just called it #appendTargets. You then append to that group rather than the SVG itself. That group is lower in the stack than the path I'm using as a cover so it is partially hidden. 

 

See the Pen b2a45d2d5ea3a2164a5e13d436fbabcb by PointC (@PointC) on CodePen

 

Hopefully that makes sense. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Hi Craig, your support was a great gift. Here is my product. It will never be finished, but now its 2 o clock in the morning and I am happy with it. From a professionals view point I bet there is quite a lot to improve. If you have some suggestions, I will be more than happy to incorporate them.

Here is the link:

See the Pen KKdOeWp by Ted_1958 (@Ted_1958) on CodePen

Have a  nice day, Detlev

  • Like 2
Link to comment
Share on other sites

Happy to help. That's how we roll in the GreenSock neighborhood.

 

The logo looks great. Good work. 👍 Thanks for sharing.

 

Happy tweening.

:)

  • Like 1
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.
×