Div loses width when scrolling after tween

[frannyglass79]

Hello,

 

i just started using GreenSock and from the examples I'm very impressed

Now i try to implement a prototype and have run into a problem.

 

I have a div consisting of several divs laid out horizontally. This div is wider than the screen and i want it to move from left to right and back again. This i got to work.  If the user starts scrolling manually, the animation should stop (works too) and the user should be able to scroll the div normally. Here is where i ran into a problem. Let's say the div scrolls to the left, then everything that goes offscreen is lost to the manual scroll and can't be reached. I'm not sure how to explain it, please see the attached codepen.io

 

I'd be grateful for any advice.

 

Kind Regards

Nadja

See the Pen vkxli by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Offsetting the left position of #hole unfortunately does not affect scroll position.

 

Here is a fork of your pen with no JavaScript or GSAP. I just used css to give 

#hole {left:-3000px}

http://codepen.io/GreenSock/pen/cyAkm

 

notice you can't scroll to the left at all

 

--

 

I think you may want to use the ScrollToPlugin which can scroll the window or content of a div

demo: http://codepen.io/GreenSock/pen/cxtzL

docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

[frannyglass79]

Hi Carl,

 

thanks for your help.

while i animated the left property in the codepen, the same thing (no effect on scroll position) happens when I animate x by the way.

I already tried the scrollTo plugin and it works but there is no yoyo property. i guess i'd have to implement that myself with scrollTo.

 

cheers

Nadja

[Carl]

You can yoyo a tween that uses ScrollToPlugin

TweenMax.to(window, 2, {scrollTo:{x:2000}, yoyo:true, repeat:20});

http://codepen.io/GreenSock/pen/cxtzL

 

I'm guessing you may have put the yoyo and repeat props in the scrollTo object.

[frannyglass79]

Thanks a lot!

Works like a charm.

 

Cheers

Nadja