Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alexandrebuffet

How to update a Tween on window resizing

Recommended Posts

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

Link to comment
Share on other sites

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

 

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