Jump to content


[SOLVED] Motion along square path

Recommended Posts

Hi, sorry if my question not clever.

Can I using bezier path (css left, top), set square path for my dot ? 
Or how can I do motion along square path another way (with on time duration)?

The square should be responsive.

See the Pen WwZbRQ by olegatro (@olegatro) on CodePen

Link to comment
Share on other sites

Hi ,


Welcome to the forums! 


Is there a reason why you want to use a bezier path? By its own nature, a bezier path will never give you straight angles, that's the whole point of using bezier paths - to get the curving edges. See Carl's extra tip bellow.


You can achieve the very same result you are looking for by using a simple TimelineLite(). See the fork from your example:

See the Pen grGpww by dipscom (@dipscom) on CodePen


But that's not great as the little dot is not really following the path is it? You can fake it by using a transform to offset it a little bit and then run the same code as before.

See the Pen zqEGZe?editors=0010 by dipscom (@dipscom) on CodePen


Worth mentioning that tweening "left", "top", "right", "bottom" is not recommended as it is not the best in terms of performance. You will get better results by animating "x" and "y" properties as they will make use of the GPU. But that will be a slightly more complicated setup. GreenSock has some plugins that help with that or, you can calculate the width of your container and use that as the value of your tweens. When there's a window resize, you flush out the values and calculate them again, thus making the animation fluid.

Edited by Dipscom
  • Like 1
Link to comment
Share on other sites

The problem was with `left: 0`, need specify `left: 0%`

Link to comment
Share on other sites

@Carl - Really? Then, I retract my first paragraph completely.


Learning something new every day...

  • Like 2
Link to comment
Share on other sites

@Dipscom, thank you for the answer.

My working animation will be more complex (include rounded corners, control point ect.)

The question was more theoretical, why `left: 100%` in bezier values return strange result? - Because `left: 0` recalculate in `px` not `percentage`.
(fork -

See the Pen YqrXBp) by olegatro (@olegatro) on CodePen

I think you are right, bezier path not good solution for my task. 

Is there a way to use markdown editor ? 


Link to comment
Share on other sites

please see my previous demo. As long as you specify units the % will work







Is there a way to use markdown editor ? 



Not exactly sure what you mean. Markdown support depends on your editor and applies to html. CodePen does support markdown: http://prntscr.com/aml11i

Link to comment
Share on other sites

@Carl, thank you for answer.


P.S. About markdown, I mean support markdown syntax on that forum. (like github issue)

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.