How to update a Tween on window resizing

[alexandrebuffet]

Hello there,

 

I'm new in Tweening...

 

Does someone here know how to update Tween settings on window resizing when Tween progress is > 0 ???

 

I created an horizontal slider with ScrollMagic and Tweenmax and I tried to update dimensions and Tween settings on resize but even if I kill Tween, reset and refresh Scene it only works when Tween progress is 0...

 

Thanks for your help !

 

Alex

See the Pen wmbjQg by alexandrebuffet (@alexandrebuffet) on CodePen

[Shaun Gorneau]

Hi @alexandrebuffet and welcome to GSAP!

 

One method I've used in the past is to capture the timeline's progress, rebuild the timeline's tweens, and then set the timeline progress() back to where it was.

 

Essentially I use a window resize debouncer to call a rebuild of the timeline after the resize is completed. The rebuild uses any new element dimensions to calculate tween parameter values and then send the timeline right back to the last recorded progress() value.

 

I've simplified your scroller to just use mousewheel deltas (vertical and horizontal) to modify the timeline's progress to allow for the horizontal scroll (to remove the complexities of ScrollMagic in this example) to focus on what I'm saying.

 

Resizing should demonstrate what you're after. The code isn't perfect ... I don't have time this morning to dig to deep ... but it should be a starting point for you.

 

See the Pen qYqmgz?editors=0010 by sgorneau (@sgorneau) on CodePen