Animation resizing

[popland]

I got the following slider that is working quiete correctly (still need to bind the next/prev button but that is not my concern)

the images slides by the size of the container box and get wrapped so that the loop is infinite

the size of container box is calculated at startup with 

 let boxWidth = gsap.getProperty(container, 'width');

and i need to recalculate it when the window is resized, i attached a listener to the resize and with the function i can recalculate the new box width

function recalc() {
        console.log(gsap.getProperty(container, 'width'));
        boxWidth = gsap.getProperty(container, 'width');
      }

but it looks the newly calculated width is ignored by my animation function that is already running via a delayedcall

 

how can i reset the animation and have it restarted correctly with the new width?

See the Pen WNbmvgB by lenna-the-vuer (@lenna-the-vuer) on CodePen

[ZachSaucier]

You're updating the boxWidth variable but not your pwrap variable which is dependent on the boxWidth variable. So update the pwrap variable in your resize function as well.

[popland]

Thank you for your reply,

i did it (i also added the pwrapWidth in the recalc), but still ignoring it

[ZachSaucier]

Please do not save changes to the same pen that you've already posted to our forums previously. Instead please use the "fork" button to create a new version so that context is not lost in these forums. Thanks!

 

As for the remaining issue, it's again a logical issue. You're using the same exact passed in boxWidth the entire time because your loop function passing in the same variable called boxWidth to the next call of loop instead of using the global variable. Make sure that doesn't happen and it works:

See the Pen abBWKqq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: There's no reason to be adding your tweens to a timeline in this case. Doing so is one of the most common GSAP mistakes.

[popland]

Thank you, i used a timeline in an attempt to kill and restart the animation

its still not working properly while resizing (guess its the pwrap), but ill try to sort it out

 

See the Pen RwoVBgW by lenna-the-vuer (@lenna-the-vuer) on CodePen

Working version

[ZachSaucier]

8 minutes ago, popland said:

i used a timeline in an attempt to kill and restart the animation

You can kill and restart tweens with out a timeline...

 

8 minutes ago, popland said:

its still not working properly while resizing

Is something wrong with the demo that I shared?

[popland]

it looks that somethimes it works and sometimes it doesnt (so it does not work)

i move also 

gsap.set(imgObj, {
          x: function (i) {
            return i * boxWidth;
          },
        });

inside the recalc function, and seems to work, but it is not

 

your example still got my problem, when resizing white bars appears and images overlap

[popland]

my bug looks like here:

See the Pen RwoVBgW by lenna-the-vuer (@lenna-the-vuer) on CodePen

 

if you resize while the animatio is going (start the resize and leave the resize before the animation ends), the alignement break up

if, while resizing you wait the end of animation before leaving the resize handle, the slider revert to the first image and line up correctly, but you should "leave" the resizing before it restart

so that's why i was thingking to suspend the animation while resizing and resuming it at the end

[ZachSaucier]

You definitely should kill off animations in the resize function and set things up properly, no question. If you have a question about GSAP let us know