Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Paul Schlereth

Left Position is Misreported?

Recommended Posts

Hey Team - I've searched for solutions but I am still stuck as to why I'm getting confusing left position results. You can see from the supplied CodePen that I'm displaying the left position of a Bootstrap column before and after a transform from off screen right. Even after using clearProps I'm still getting a huge number for the left position after the animation finishes. The number looks like the left position that GSAP created for the starting position for the off screen animation before it animated onto the screen. I think the two reported positions should match.

 

When I try to utilize this end-state left position for subsequent animations everything is off because the position is seemingly misreported. What am I missing / doing wrong? I would really appreciate an assist, this has been quite frustrating.

 

-Paul

See the Pen KLpyYg?editors=1010 by paul77 (@paul77) on CodePen

Link to comment
Share on other sites

Welcome to the forum.

 

You have to wait for the tween to complete.

 

See the Pen NVqyPX by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

Link to comment
Share on other sites

Hey Craig - thanks for the response. So when I add multiple timelines to the master timeline, how do I force subsequent timelines to wait until the prior timeline has completed? Please check my modified CodePen:

 

See the Pen zQGRZg by paul77 (@paul77) on CodePen

 

I've added another timeline, the start of which relies on correct left position as it was from the prior timeline. Note that the initial value output to the screen is really huge, then changes to a smaller value. My second timeline starts before this correction happens. Since I know I can add multiple timelines to the master, how do I prevent this race condition? In this second example, my goal is to be able to position the column of copy near the left edge of the screen - not fly off the screen. Thanks again.

 

Link to comment
Share on other sites

@Paul Schlereth,

 

You can move the  `onComplete` parameter to the master Timeline and call `data` there

var master = new TimelineMax({ repeat:0 , onComplete:data});

 

 

You can add all you want to any timeline that is part of the master timeline, and it will wait until it's done.

 

See the Pen LoVmmo?editors=1010 by sgorneau (@sgorneau) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

So will each individual sub timeline call the master onComplete fcn, or does that only run once the master is complete? I need sub timeline 2 to be able to get the end positions of elements after having been animated by sub timeline 1.

Link to comment
Share on other sites

The master can have onComplete and each nested timeline can have its own onComplete callback.

  • Like 1
Link to comment
Share on other sites

I guess I'm not fully understanding this whole project. Why do you need to clearProps between tweens? It seems like you want the next tween to start where the last one ended. Wouldn't a sequenced timeline of .to() tweens work well for this? Or am I missing something obvious?

Link to comment
Share on other sites

Valid point - i'm having a hard time calculating the next position for $heroContent01 (the content column) if I don't have the final position from the prior timeline. Within the second added timeline, I've been trying to:

 

var heroRowLeft = $heroRow.position().left; // parent container of the content column
var heroContentLeft01outStart = $heroContent01.position().left; // this is the variable that will contain an inaccurate number
var heroContentXoffset = heroRowLeft - heroContentLeft01outStart; // new position

tl.to($heroContent01, 2.0, { x:heroContentXoffset }, "-=1.5");

 

Is there a better way to position the left of this column along the left edge of its containing .row? I'm trying not to explicitly use absolute positioning for responsive layout convenience. Since this uses a calculation, and the prior from animation is a percent, this should calculate specific to devices just fine - unless I'm missing something.

 

Link to comment
Share on other sites

i tried that also. Same issue as position().left via jQuery

Link to comment
Share on other sites

Oh, I wasn't doubting the accuracy of jQuery.position. I just don't use jQuery much and getBoundingClientRect() spits back eight properties so I find it more useful.

 

But if your code above is working as you'd like, go for it. No need rocking the boat. Happy tweening. :)

 

  • Like 1
Link to comment
Share on other sites

Actually the unfortunate bit is that my setup isn't working. The position value that is coming out of the first added timeline isn't accurate until that timeline completes. Unfortunately, the second added timeline starts working before that happens. I haven't seen a good solution for this yet.

Link to comment
Share on other sites

You could always jump the progress() of the tween to 1, get the end values and then jump it back to 0 before playing it.

  • Like 1
Link to comment
Share on other sites

Here's a little demo of what I meant in case it wasn't clear.

 

See the Pen Jqdmbj by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

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