the same motion path for several rectangles

[Detlev_Barthel 4 Likes (Newbie)]

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

[PointC 14,173 Likes (Superhero)]

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.

[PointC 14,173 Likes (Superhero)]

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

[Detlev_Barthel 4 Likes (Newbie)]

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

[ZachSaucier 7,127 Likes (Superhero)]

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.

[Detlev_Barthel 4 Likes (Newbie)]

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

[PointC 14,173 Likes (Superhero)]

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.

 

[Detlev_Barthel 4 Likes (Newbie)]

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

[PointC 14,173 Likes (Superhero)]

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

 

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

 

Happy tweening.