Jump to content
GreenSock

BPolak

BezierPath without skipping

Go to solution Solved by BPolak,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • Solution
// 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!

  • Like 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.
×