[SOLVED] Motion along square path

[olegatro]

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

[Dipscom]

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 March 31, 2016 by Dipscom

[olegatro]

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

[Carl]

Just a little extra tip. You can set curviness:0 to un-curve your Bezier: http://codepen.io/GreenSock/pen/yOzNqR?editors=0010 updated with %

[Dipscom]

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

 

Learning something new every day...

[olegatro]

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

Offtop:
Is there a way to use markdown editor ? 

 

[Carl]

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

 

http://codepen.io/Gr...qR?editors=0010

 

 

 

 

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

[olegatro]

@Carl, thank you for answer.

 

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