Search the Community

Hello everyone, I need to create a timeline that must adhere to the following behaviors: - Both the timeline and the slider must scroll automatically - The user should be able to take control of the scrolling with the slider - When the user finishes dragging the slider, the timeline AND the slider should resume their automatic scrolling Today, I have an issue. Everything works well in auto-scroll, but as soon as I drag the slider, it stays frozen and doesn't start moving again. I don't understand why, onDragEnd, my autoScroll method restarts fine but the .to related to the slider doesn't ? If anyone has a solution, I'm all ears, Thanks in advance. === FRENCH VERSION === Bonjour à tous, Je dois réaliser une frise chronologique qui doit respecter les comportements suivants : - La frise et le curseur doivent défiler automatiquement - L'utilisateur a la possibilité de prendre la main sur le scroll avec le curseur - Quand l'utilisateur a terminé de drag le curseur, la frise ET le curseur reprennent leur défilement automatique Aujourd'hui j'ai un soucis. Tout se passe bien en scroll auto, mais dès que je drag le curseur ce dernier reste figé en ne repars pas Je ne comprends pas pourquoi onDragEnd ma méthode autoScroll se relance bien mais pas le .to lié au curseur ? Si quelqu'un a une solution, je suis preneur, Merci par avance

Hi guys, sorry that I have to ask but I'm always running in the same issue. Don't want to disturb you guys by saying I'm a newbie..but actually I am. I started by taking the horizontal scroll container codepen demo of Greensock and integrate a grid overlay in the second container. It works, but after the grid container there is a white space which is not wanted and the last sections width gets broken. I realy don't get why, could you pls give me an explanition and help me to solve the white space issue? Further I want that fire an scroll animation when the container is in viewport, tried this with the following lines but it doesn't work. The goal should be that the view autoscroll to the end of the section for the first step and then scroll backwards to middle (50%) of the same section. I integrated the ScrollToPlugin so I don't know what I forgot - if you recognize the reason pls let me know. let tl = gsap.timeline() .to(redContainer, {duration: 2, scrollTo: () => "+=" + document.querySelector(".red").offsetWidth}); Thanks a lot guys!

Hi Experts!! First of all thanks to GSAP and all here experts who are doing tremendous job, helps to beginners and those who stuck in code like me :), I have just start development on ScrollMagic and GSAP , I have two questions: 1. I want to auto scroll on scroll down or scroll up, for example if I am at first scene, when I scroll down, it should be go to the second scene and stop, similar behavior from scene 2 to scene 3. but in my code it is not autoscroll. I want this on mobile and desktop both but didn't get success. 2. When ever scroll down on mobile, the browser address bar auto hide, that push scene on top. Thank you in advance!

Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?

Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent

Hello, I'm very new to GSAP and am trying to figure out how to pause a tween on the hover of a specific div. The code for the auto scroll was corrected in a previous forum post, but I'm now trying to make this slight adjustment because the aforementioned div is a slider. So when the mouse hovers over this div, the animation needs to pause in order for the user to click through the slides. I'm not sure if I need to assign a timeline to my tween, etc. in order to accomplish this? I've tried to implement some examples from the docs, but nothing has worked; just wanting to see if there's a method simpler than determining if the cursor is in its bounds. Any help is greatly appreciated!

I'm trying to implement an 'auto scroll' of sorts based on mouse movement/position. I'm new to GSAP; I'm hoping someone can point out my errors/help me to make this animation smoother and continuous? Adapted from: Additionally, here is the live (very rough) preview on my site: https://www.tessa.studio/portfolio Thanks in advance. Edit: The parallax effects on hover are, or at least appear to be, independent of my issues with the ScrollToPlugin... It's still laggy when I comment that portion of the script out. These effects are the reason for wanting to scroll with mouse movements.

Refer to the Codepen which is the autoscroll demo from GreenSock. First off, I am totally new to GreenSock. I love the smooth functionality of this right out of the box! I need some additional things for my app and I am hoping for some pointers to get me rolling in the right direction. (1) If you throw the green div and it flies out of view I want a corresponding button for that div (maybe in a top nav bar?) that will smoothly scroll the autoscroll area to bring that div back to the center of the screen. This will make it easy to find that "lost" element. (2) It would be useful to have four transparent bars (left, right, top, bottom) that always live on the edges of the autoscroll container and four squares (top-right, bottom-right, bottom-left, and top-left) that always live in the corners of the autoscroll container (maybe positioned outside of the autoscroll container?). What I mean is that when scrolling occurs these eight elements always remain around the edges of the autoscroll container. Then when the mouse hovers over these areas the autoscroll area scrolls in the corresponding direction. Note that I do not intend for this app to be used on mobile devices as ultimately I intend for this to be built out using Atom's Electron framework as a desktop app. Because of that I am not concerned with the fact that hover is a problem on mobile devices. It would be even better if the scroll speed was controlled by how far the mouse is inside of the border div. For example, considering the right side bar, as the mouse enters the bar from the left the scrolling is slowest and the further to towards the right edge of the bar the mouse gets the faster the scrolling becomes. I Hope I made sense there! Lastly, this should not interfere with the default behavior of the draggable autoscroll. That is, I still want the autoscroll to happen based on dragging a div to the edge of the container. Any advise you have to offer on these two functionalities would be very much appreciated.

Hi, Is there any way to change the 40px of margin for the autoScroll feature in Draggable to a higher value? My page has a toolbar that overlays the page, and the main content of the page has a permanent top side padding of the side of the toolbar. The problem is that due to this I need to drag the element under the toolbar in order to reach the edge and the autoScroll feature to kick in. Changing the 40px value to a higher number would fix this issue. Is it even possible to do so? Greetings and thanks. More info: https://greensock.com/docs/Utilities/Draggable/autoScroll

Hi guys, i've been working with your Draggable library and got this issue: i've got an container which contains my draggable object i've got a input slider to zoom in/out my object zooming through CSS transform: scale() when zoomed in/out and dragging to autoscroll, my object will move away Any suggestion how to zoom in/out the object and using autoscroll without my object moving away of the mouse pointer? Thanks

Hi, First, very nice plugin. I try to use GSAP draggable with the "autoscroll" option, but there is a problem when I scroll down a tile the position is not correctly updated. You can check in the following codepen demo : http://codepen.io/anon/pen/dMqvQx It's seems to me the problem come from the "position:absolute" in the .st-menu CSS style. If i remove this property the draggable autoscroll seems to work better. But i can't remove this attribute in my site because it broke my menu. Is there a workaround for this issue with the autoscroll option ? Thank you. Keep up the good work.

Hello We are creating drag and drop website creator called ucraft.me and we are using GreenSock draggable. Everything is working except one thing. Our system is working like this: We have different areas where we can drop new objects. When dragging(and holding) is starting (on dragStart) the system must generate additional height of the page, which adds more scroll to my browser. Now we should be able to drop the held element on the top of the screen as well as on the bottom of the screen. As my page height was changed before, the bottom area is more down and is unreachable for me during the holding process as GreenSock autoScroll is not letting me to get there. It seems that GreenSock doesn't know the new generated page height. Please help! Best, Ash.

Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.

Is there a possibility to drag the window as I drag elements around in a window? I mean, if the window is higher than what the browser can currently display, I need to scroll it down to reveal the rest of the page. I have encountered questions about scrolling a container for the actual Draggable element itself, which is not what I'm after - I simply need to scroll the whole window/document, as I'm not limiting the drag to a container. Thanks for any pointers you could give me here

Hi guys, I need your help for a project of mine. Please check this website - http://suggestopediabg.com/presentation/. We use greensock here and you have to scroll to see the whole action. But many users may not understand what to do, so I need an autoscroll instead of manual user scroll. Is that achievable and if yes could you please provide me with a code. Thank you very much!