Jump to content
Search Community

window resize issue (width animation hop)

biljohns test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

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