BezierPath without skipping

[BPolak 7 Likes (Newbie)]

var testBezierPath = [
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 100, top: 100 },
                { left: 200, top: 100 }

            ];

TweenMax.to(element, 10, {bezier:testBezierPath, ease:Power0.easeNone});

In this example I want the element to stick to left 100 and on the last moment to left 200.

So no skipping like it does now. In the example above, the element is slowly going to the 200 left.. 

 

Is there a way to no frame skipping or keep absolute positions per frame?

[Jonathan 5,176 Likes (Superhero)]

Hello BPolak,

 

Try and replace top with y and left with x.

 

CSS position offsets like top and left can cause layout recalculations, unlike CSS transforms that can animate without affecting layout

 

Its ok to set initial CSS position of elements with top and left. But always animate using CSS transforms x and y for smoother translation.

 

If you are still having an issue than please setup a limited codpen demo example:

 

 

Thanks!

[GreenSock 8,117 Likes (Superhero)]

There's actually a bunch of logic in BezierPlugin to ensure that movement along the bezier path is smooth, evenly distributed based on the various distances involved. Otherwise, if you have a bezier that has a very short segment at first, and then a very long segment, it'd look very strange if GSAP did the "simpler" thing of splitting the movement evenly based on the number of segments because it would suddenly change speed with each segment. The way it currently works, 50% through the tween, the target will be roughly 50% along the total distance of the bezier path. 

 

In your example, you've got a bunch of points right on top of each other (zero distance) and then a longer one. I'm very curious why you're doing that. Wouldn't it be much easier to just do a regular tween with a delay? 

[BPolak 7 Likes (Newbie)]

Yes, I think I choosed the wrong plugin for what I want.

 

What I'm dealing with is a recorded path of an user.

When the user moved continues, then the bezierPlugin is perfect and easy to use.

When the user stops at some point for x-seconds, the bezierPlugin is not the right thing to use.

 

Because users can stop, I think I've to dive into TimelineMax. It's not hard coded segments, so I've to loop through an array and push it into a timeline, if someone has an easy sample it would help.

Otherwise I will post my solution later on here

[BPolak 7 Likes (Newbie)]

// Obj from database
var obj = {
    playtimeMs: 3000,
    segments: [
      {left: 100},
      {left: 100},
      {left: 100},
      {left: 100},
      {left: 100},
      {left: 100},
      {left: 100},
      {left: 120},
      {left: 140},
      {left: 160}
    ]
};

// time each segment
var msEachSegment = (obj.playtimeMs / obj.segments.length) / 1000;

// timeline class
var tl = new TimelineMax();

// loop through segments and add to timeline
for (var i = 0; i < obj.segments.length; i++) {
    tl.to(element, msEachSegment, obj.segments[i]);
};

// playtimeline
tl.play();

Solved with this logic I created Sorry for the inconvenience, I've could know this. I  tunnelvisioned on the Bezier xD

Thanks anyway gents!

[OSUblake 9,990 Likes (Superhero)]

If you still need help, here's an example that does something similar to what you're trying to do.

 

See the Pen Bzamom?editors=0010 by osublake (@osublake) on CodePen