Jump to content
GreenSock

frannyglass79

Div loses width when scrolling after tween

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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.

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.
×