Jump to content
Search Community

Search the Community

Showing results for tags 'autoscroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 15 results

  1. 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!
  2. 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!
  3. Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?
  4. 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
  5. 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!
  6. 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.
  7. GreenSock

    GSAP 1.16.x Update

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. We're constantly improving GSAP to solve the problems you face as a developer/designer. In the recent release of GSAP 1.16.0 and 1.16.1, Draggable got some big upgrades and SVG support has never been better across the whole platform. Here's a summary of what's most exciting in 1.16.x: Draggable gets "autoScroll" What happens if you're dragging an element inside a scrollable container (or page) and you reach the edge? Wouldn't it be nice if it automatically scrolled in that direction for you? Wouldn't it be even cooler if it applied variable-speed scrolling based on how close your mouse/touch is to the edge, and it handle MULTIPLE containers? Wish granted. Video tour Interactive demo See the Pen Draggable autoScroll by GreenSock (@GreenSock) on CodePen. Draggable's new getDirection() method Sometimes it's useful to know which direction an element is dragged (left | right | up | down | left-up | left-down | right-up | right-down), or maybe you'd like to know which direction it is compared to another element. That's precisely what getDirection() is for. Video tour Interactive demo See the Pen Draggable getDirection() by GreenSock (@GreenSock) on CodePen. Easier SVG animation with svgOrigin For SVG elements, CSSPlugin recognizes a new svgOrigin special property that works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in a data-svg-origin attribute so that it can be parsed back in. So for SVG elements, you can choose whichever one fits your project better: transformOrigin or svgOrigin. Sara Soueidan used this feature in her excellent Circulus tool demo. Interactive demo See the Pen GSAP svgOrigin by GreenSock (@GreenSock) on CodePen. For more information about how GSAP has solved cross-browser SVG challenges, see https://css-tricks.com/svg-animation-on-css-transforms/ and for performance data, see https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/. More Draggable improvements Draggable exposes a lockedAxis property so that you can find out whether it's "x" or "y" (assuming you set lockAxis:true in the config object). New onLockAxis callback that fires whenever the axis gets locked. Several performance optimizations were made to Draggable, particularly for transforms and scrolling. Draggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:"x" or "left" permit native touch-scrolling in the vertical direction, and type:"y" or "top" permit native horizontal touch-scrolling. SVG support is better than ever. It plots the rotational origin accurately, for example. Touch support has been improved as well. Bug fixes See the github changelogs for 1.16.0 and 1.16.1 for a complete list. Conclusion If you're already using GSAP and/or Draggable, we definitely recommend grabbing the latest version. If you haven't tried GSAP yet, what are you waiting for? Head over to the Getting Started article/video now and you'll be having fun in no time. Helpful links Getting Started with GSAP Draggable demo and main page Draggable docs GSAP docs Got questions? Visit the forums
  8. 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.
  9. 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
  10. 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
  11. 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.
  12. 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.
  13. 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.
  14. 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
  15. 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!
×
×
  • Create New...