Jump to content
GreenSock

Kumar

issue with combining straighline tween and bezier curve

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

Having issue with combining linear and bezier curve tweens.

 

If you look at this pen the second tween doesn't start after the first one ends.

 

See the Pen egojs by pannamraju (@pannamraju) on CodePen

tl.to(div, 2, {
                left: 150,
                top: 50,
                ease: Linear.easeNone
            })
            .to(div, 2, {
                bezier: {
                    type: "cubic",
                    values: [{ x: 150, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 150 }],
                    autoRotate: true
                },
              ease: Power1.easeNone});

adding the following function to second tween fixes but am I missing some setting?

onStart: function () {
                //set this to zero as this is causing issues with actual position of item
                div.style.left = '0px';
                div.style.top = '0px';
            }
Link to comment
Share on other sites

To me it appeared that the second tween (bezier) was indeed playing immediately after the first tween (diagonal linear). The problem was a jump in position between the end of the first tween and the start of the second tween.

 

I think the problem here is that you are mixing positional tweens (left/top) with transformations(x/y)

 

If the first tween moves left:150 and then the second tween starts at x:150, the x:150 is offset 150 pixels from where the element is when left = 150. 

 

The best solution is just to stick with animating x and y OR left and top. I'd choose x/y as shown here: http://codepen.io/GreenSock/pen/telGq

  • Like 2
Link to comment
Share on other sites

Thanks a ton carl, that explains the issue I am having.

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