Jump to content
Search Community

react + motion path = uncentered dot on path (help?)

blumaa@gmail.com test
Moderator Tag

Recommended Posts

 

Hey @blumaa@gmail.com 

 

That looks a lot, like your line is not an open stroke, but more an enclosed path forming a shape.

You'll probably want to adjust your SVG, so the path you use as the motionPath is not an enclosed shape.

 

Here's what I'm referring to in a demo

 

See the Pen 989d9f903b9230a6cfcd445f627dd684 by akapowl (@akapowl) on CodePen

 

 

 

You could also use an actual <line> element, convert that into a path and use that converted path as the motionPath then.

 

See the Pen 4648647105634f82e71b61edf264ae57 by akapowl (@akapowl) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Thanks @akapowl, this is a great demo of one of the most common confusing stumbling blocks in motionPath animation!

A little extra note - This dot animation isn't complex movement. I tend to use motion paths when I need to animate a curved path. You could optionally drop the motionPath dependancy and just animate the dot up and down the y axis.

You also don't need a timeline for one movement. You could rewrite the motion path timeline like this...
 

gsap.to(circle1.current, {
  y: -20,
  duration: 5,
  ease: "power1.inOut",
  repeat: 1,
  yoyo: true
 });


Hope this helps!

  • Like 5
Link to comment
Share on other sites

Thank you to both of you!

 

Cassie you're totally right, I think I was over complicating things.  I don't need the motionPath. The timeline I have in there because I will be adding other scenes. This was just a simplified example.

 

akapowl, thank you for your examples! They were really helpful. Any advice on how to convert all my shapes and lines to paths? It seems every time I export my svg from Illustrator, it exports my strokes as polygons.

 

Thanks,

Aaron

 

  • Like 3
Link to comment
Share on other sites

13 minutes ago, blumaa@gmail.com said:

Any advice on how to convert all my shapes and lines to paths? It seems every time I export my svg from Illustrator, it exports my strokes as polygons.

 

Sorry Aaron, I am not using Illustrator myself, so I can not give you much advice on that - maybe Cassie can.

 

Our fellow @PointC has an awesome collection with tips and tricks when it comes to asset preparation (with Illustrator, too) that you could check out. There are some of those mentioned in this thread here - maybe one of those (or one of the others on his website) can help.

 

 

 

 

  • Like 4
Link to comment
Share on other sites

4 minutes ago, blumaa@gmail.com said:

ALso, just curious, if you don't use Illustrator, do you usually use Inkscape? If not, what do you use?

 

That really depends. I've started out with Inkscape, so for most usecases I still rely on that one because I find it most intuitive to handle.

 

But when it comes to inline SVG for websites, Inkscape's own XML-editor tends to often give you some fonky values within your paths, like for instance it uses a lowercase 'm' for path-beginnings instead of a capital 'M'. So I always throw my .svg files that I have saved with Inkscape into SVG-OMG to make sure I get the correct data - really helpful that one.

 

If it is not Inkscape I am using, it is Affinity Designer - which does not quite have all the functionality of Illustrator (yet) - but is way cheaper in the long run and in many ways just as good if not better than Illustrator - opinions may vary. It is especially useful if you own the complete Affinity suite, which lets you do cross-app using/switching with files instantly. (*not a sponsored ad :D )

 

  • Like 3
Link to comment
Share on other sites

I'm also a big affinity fan! I like that the pencil tool allows you to freehand lines and they get exported as strokes.

(edit) seems AI lets you do that too but you just have to *really* dig into the brush styles to make sure it's basic and has no variable width at all

Without seeing your setup it's hard to tell what's happening with you and Illustrator as there's SO many ways to draw shapes, and different ways to export.

Here's a little demo of some lines I've drawn in different ways - exported and then commented to explain. ☺️

See the Pen 40807d1033a92b669fff4dcde4476506 by cassie-codes (@cassie-codes) on CodePen

  • Like 4
  • Thanks 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.
×
×
  • Create New...