window resize issue (width animation hop)

[biljohns 1 Likes (Newbie)]

Hello all,

I have been beating my head against the wall on this one for awhile. Working with with invalidate() and clear() to no avail.

I am trying to stop a bleep or hop in the animation when it gets to the end. Through a bit of tinkering, it appears the end value you not getting rerecorded?

I do hope this is not another css flex issue...🙄

 

How to reproduce the issue:

1. Click the "toggle container size" button.

2. Click the "toggle leftPane size" button.

3. Resize the window width.

4. Click the "toggle leftPane size" button.

Upon clicking the "toggle leftPane size" button, you see a noticeable hop at the end of the animation, why is this?

 

Expected results:

User should see no bleep or hop in the animation.

 

My assumption is I need to some how clear the recorded values that are not being overwritten when the window resize event fires. Every time I try to invalidate() or clear() the timeline tlReduceLeftPane, I get unfavorable results. I tried to come up with a solution to reset the values in the resize event (resize listener, 2nd if statement), but that is not working as well.

See the Pen MWwaBje by biljohns (@biljohns) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey biljohns.

 

It's not enough to just invalidate a timeline. If you want the values to change then you should create a new timeline. The easiest way to do that in your setup might be to put the creation of the timelines into a function. Then on resize you just call that function again.

Does that make sense?

[biljohns 1 Likes (Newbie)]

Hi Zach,

Thanks again for the timely response.

 

By creation of timelines, do you mean timeline declaration or timeline declaration and tweens?

I was doing the latter before in my resize event (1st if statement), but found a simple invalidate() did the trick.

 

In my resize 2nd if statement, since both left and right are 50% & 50%, I am trying to grab the parent containers computed width, divide by 2, and set that as the end width on the new fromTo tween that is set on resize.

[biljohns 1 Likes (Newbie)]

The values are all good until you resize the window obviously. At the point in my scenario you resize the window, timeline tlReduceLeftPane is in a false reversed() state. Does this make a difference considering time tlReduceContainer set the initial values?

 

Would I need a 3rd timeline to get out of this particular scenario?

[ZachSaucier 7,162 Likes (Superhero)]

23 minutes ago, biljohns said:

By creation of timelines, do you mean timeline declaration or timeline declaration and tweens?

I meant timeline declaration and tweens.

 

However, thinking about it some more, I think you're overcomplicating things a bit. I would approach this situation using a different technique. I'd create one big timeline and add labels at the relevant points. Then based on the button clicks I'd tween to a particular point in that timeline. That way you have a single source of truth and the logic is straightforward. 

[biljohns 1 Likes (Newbie)]

Very well could be the case of over complication.

I'll give the single timeline a try.

[biljohns 1 Likes (Newbie)]

New CodePen:

See the Pen dyoGWRp by biljohns (@biljohns) on CodePen

 

I got it into a single timeline. It is working as expected outside of the scenario in the original post.

I tried a few different things within the resize event listener (no luck - emptied it out). I am still getting hop/bleep/jerk.

Question, can I view in the timeline properties somewhere in the console to see exactly what is being recorded and not recorded?

[biljohns 1 Likes (Newbie)]

Resolved.

Issue: overuse of timelines (complicated)

Solution: usage of both timelines and tweens

 

Final CodePen:

See the Pen GRJoMBy by biljohns (@biljohns) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

11 hours ago, biljohns said:

Question, can I view in the timeline properties somewhere in the console to see exactly what is being recorded and not recorded?

You can get what's passed into the vars of tweens by using tween.vars. You can get each tween of a timeline by using timeline.getChildren(). Not sure if that's what you're wanting. You could also use gsap.getProperty() to get the value of something at a particular point in time. The docs are good for looking up these things  

 

Good work getting your project working!