ScrollTo Plugin and resize event

[nfasarakis]

Hello everybody! Happy to join the community, I really love the work you've done here. Apologies for any errors before I begin, English is not my first language and spell-checkers can only help so much.

 

I'm new to JS animations (and new to JS in general) and I seem to be experiencing some issues when using the ScrollTo plugin after a resize event. I've added a Codepen with a simplified example of what I'm trying to achieve. Here's what is working so far:

 

I have a div container that takes up the viewpoint width and height. In that container, I've placed three divs (lets call them slides), each one also taking 100% of the viewpoint width and height. Only the first is visible due to the container's overflow: hidden property.

 

By pressing the up and down arrow key, I want to move between slides during a period of two seconds. So I set up a timeline instance that contains three tweens, each tween using the scrollTo plugin to scroll between slides. On keydown events, I use the TweenTo() method to either advance the slides forwards or backwards. So far so good, this works just fine.

 

However, things start to get buggy if I attempt to resize the window. After I resize the window, any scrolling done either goes beyond a slide or stops before the slide ends, depending on if I make the window smaller or bigger. I'm assuming that after the window resizes, the values used during the setup of the timeline instance, specifically via the ScrollTo plugin, do not correspond to the actual pixels we need to scroll to on the resized window.

 

So I added an event listener for a resize event with the goal of re-initializing the timeline so scrolling is accurate.

When a resize event fires, the timeline is deleted, then recreated, and using the seek() method the playhead is returned to where is was before. If a resize event fires while im on the first slide, this workaround seems to do the job. Scrolling works fine and as expected. If a resize event fires while on the second or third slide, I am unable to scroll to the first slide. Instead, it almost seems like the timeline treats the slide during which the resize event fires as if its the first slide. I'm pretty sure I'm missing something here but I don't have the experience to see it.  

 

So here's a summary. If the window is not resized, everything works. If the window is resized while on the first slide, everything works. If the window is resized while not on the first slide, scrolling does not work as expected.

 

Any help is appreciated, I'm quite sure I'm using the timeline and ScrollTo plugin wrong but I just cant see it.

See the Pen wgEByY?editors=1111 by anon (@anon) on CodePen

[PointC]

Hi nfasarakis 

 

Welcome to the GreenSock forum.

 

I think you may be over-complicating this animation a bit. You wouldn't need to create a timeline with all those labels and try to tween between them. A simple scrollTo tween should take care of this for you. When clicking the up/down arrow keys we can check if min/max slides have been reached. If not, we increment/decrement the currentSlide variable and perform a scrollTo tween of the container.

 

You also wouldn't need to listen for resize() event to kill the timeline since you're not using one now.

 

I made a fork of your pen here:

 

See the Pen LxJRKz by PointC (@PointC) on CodePen

 

If you don't want to allow an interruption of the slide animation by additional key presses, you could also add a check to see if the container is tweening by checking if it isActive().

 

Hopefully this helps a bit.

 

Happy tweening.

[nfasarakis]

Hello PointC and many thanks for your answer!

 

You're absolutely right, a timeline is a bit too much for this particular example. Your answer does indeed solve the resizing problem, since a new tween is created everytime a keydown event is fired. This is actually how I started approaching the issue. However, my actual code contains this sliding as a part of a larger animation that needs to be sequenced. So, while I would be scrolling between the slides, other animations would also fire. Hence, the use of a timeline. Perhaps this is not the right approach?

 

The example I provided here uses the same timeline, albeit simplified without all the extra animations, simply to reproduce the problem I'm running into. I probably should have been a bit clearer on that.

 

Again, many thanks for your input!