Jump to content

Search the Community

Showing results for tags 'scrollto'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. GreenSock


    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. Allows TweenLite and TweenMax to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top TweenLite.to(window, 2, {scrollTo:400}); //or to scroll to the element with the ID "#someID": TweenLite.to(window, 2, {scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: TweenLite.to(window, 2, {scrollTo:{y:400, x:250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div TweenLite.to(myDiv, 2, {scrollTo:250}); Learn more in the ScrollToPlugin documentation.
  2. GreenSock

    GSAP 1.19.0 Released

    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. GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below: Function-based values Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen. ...and more GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY Happy tweening!
  3. Hello, I'm using ScrollToPlugin to animate window position between sections. The issue is the following. I'm trying to check the window offset at the end of the animation (window scrolled to correct position), but I actually get the $(window).scrollTop() BEFORE the animation in the onComplete callback. The example code: // Go To Slide functionality goToSlide(slideIndex) { //If the slides are not changing and there isn't such a slide let $slide = $($(this.slides).get(slideIndex)); if (!this.isAnimating && $slide.length) { //setting animating flag to true this.isAnimating = true; //Sliding to current slide TweenMax.to(window, 0.5, { scrollTo: { y: $slide.offset().top, autoKill: false, }, onComplete: this.onSlideChangeEnd(slideIndex), onCompleteScope: this, ease: Sine.easeInOut, }); } } The onComplete callback // Change animation status onSlideChangeEnd(slideIndex) { this.currentIndex = slideIndex; this.isAnimating = false; this.nextSliderIndex = undefined; this.updateCurrentOffset(); console.log('this.offsets :', this.offsets); console.log('this on end :', this.currentTop); console.log('this on end :', $(window).scrollTop); console.log('vanilla :', document.documentElement.scrollTop || document.body.scrollTop); } The logged window.scrollTop are the actual values when animation starts (previous section coordinates). When you scroll again - the value becomes accurate for the previous callback. How can I get the window offset value after it was animated to a position via scrollTo plugin? Thank you
  4. Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). I hope I could explain it well, if not, please let me know and will try to elaborate. Best regards Thomas PS: the markup can't be changed
  5. I am building a dynamic form/div which has a clone button on the right bottom corner. Once you click it, it should clone the .item:first and then auto scroll down so the last div will hide. and when you click on prev or next button, it should scroll to the exact div that i want. my approach by using jQuery scrollTop with fixed px but it is not effective. since we have a lot of screen size. How can I achieve this? this is the first time i want to try Greensock to make this happen. Thanks
  6. Hi, I'm trying to use scrollTo in React. But I can't make the increment value to works with scrollTo... Here is the function that not working: handleClick = () => { let incrementNumber = 500 TweenMax.to('content', 0.5, { scrollTo: { x:'+='+incrementNumber } }); } Here is the function that can works if I just use a fixed number, but like this I can make the scrollTo increase 500px every time I click it: handleClick = () => { TweenMax.to('content', 0.5, { scrollTo: { x:500} }); }
  7. Hi mr admin i run script this error : $.fn.setSmoothPageScroll = function (options) { var ops = { time: 0.8, distance: 190 }, t = $(this), g = 'mousewheel DOMMouseScroll MozMousePixelScroll'; ops = $.extend({}, ops, options || {}); t.unbind(g).on(g, function (e) { var elem, v = $(this); if (e.srcElement) elem = $(e.srcElement); else if (e.target) elem = $(e.target); if (elem) { var t = $(elem).getInputType(); if (t == 'select' || t == 'option') return; } e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); var delta = e.wheelDelta || e.detail || e.originalEvent.wheelDelta || e.originalEvent.detail * -1; if (delta < 0) delta = -1; else delta = 1; var scrollTop = v.scrollTop(), finalScroll = scrollTop - parseInt(delta * ops.distance); TweenMax.to(v, ops.time, { scrollTo: { y: finalScroll, autoKill: true }, ease: Back.easeOut, autoKill: true, overwrite: 5 }); }); return this; };
  8. mikel

    First scrollTo

    Hi experts, It's a little strange: Only the first scrollTo (button on hero) does not land correctly. After that, everything works as desired. Everything is fine in the test case: In the finished web https://www.mandantum.com however not. I checked a lot. But do not find the mistake that I have 'built in'. Small hint, where to look, would be nice. Mikel
  9. I am running into an issue with my QA department and using the ScrollTo Plugin on a Windows 10 machine while using Firefox. They are saying that the problem occurs in all Browsers, but I'm only able to replicate it in FireFox. This is what they wrote: While the text is auto scrolling, pull the scroll down or click on the downward arrow to scroll the ISI down Expected result: user should be able to scroll up and down at any time Actual result: the scroll is not responding, a user needs to scroll up first to be able to scroll down Is this a bug in the ScrollTo Plugin or my code? https://codepen.io/blooaux/full/ELMPqw
  10. Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
  11. 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
  12. TLDR: In iOS 11, if using scrollTo plugin for the window while an input is focused, it thinks the bottom of the mobile keyboard is the bottom of the viewport rather than the top of the keyboard, thus hiding any inputs located at the very bottom of a page. Any Greensock fixes? I discovered this error due to iOS's 3rd-party keyboards not accounting for the input selector bar on top of the mobile keyboard when determining the bottom of the viewport while an input is focused located at the bottom of the window, thus blocking the view of the input. What seems to be happening is if the window element is moved using scrollTo while an input is focused at the very bottom of the window, the correct positioning is not scrolled to. This is the case mainly for values that exceed the height of the window, and subsequently effects using the scrollTo Plugin when using scrollTo:"max" I know you all can't fix the iOS issue, but since its affecting the plugin, is there any workaround to account for when an input is selected such as a chat entry box at the bottom of the screen, and have the plugin scroll to the bottom of the screen properly? I've included a codepen, but only works in debug mode since there was already an issue you all found with scrolling in iOS in iframes. Thanks! https://s.codepen.io/tallwhitey/debug/gozWWQ/VGrWNnabZVaM
  13. Hi, I have two animations that should run simultaneously: reducing an element's height to 0 scrolling to a certain position, to align a certain element to the top of the screen. Note that this element is *after* the element in animation 1 I've calculated the target position for scrolling based on the document *after* the first element's height is reduced to 0, and I also tried the animation with target position for scrolling based on the document *before* the element's height is reduced to 0, but somehow the proper position is never reached. I have also tried to provide the scrolling animation with the id of the element that should align to the top of the screen, that doesn't work either. When I delay the second animation until the first has finished, it is working. How can both animations be achieve simultaneously? Here's the code for my two animations (with the delay in the second animation, which I want to avoid): TweenLite.to(contentToHide,1,{height:0}); // animation 1 TweenLite.to(window,1,{delay: 1, scrollTo:Math.max(0, scrollReference + scrollCorrection)}); // animation 2 Best regards, Vic
  14. As you can see from the demo url, when you scroll down, and click on the "up arrow" on the bottom right corner, scroll to plugin fails to scroll on Firefox. However if you disable the "scroll-behavior: smooth;" css on body element, the scroll works perfectly. http://goodlife.fuelthemes.net/
  15. I've noticed that by clicking on the up or down arrow buttons on the scrollbar during a scrollTo tween, the onAutoKill function does not activate or stop the tween. How can this be changed to do so?
  16. Hi guys, GSAP rocks however, your ScrollTo plugin doesn't seem to work on iPad 2 upto date iOS. NB this means the official GSAP ScrollTo example as presented does not appear to work. Here is the GreenSock codepen that doesn't appear to work Please can you let me know any work arounds ?
  17. Hello, first time here I'm trying to put together a one-page scroll with a "cube" animation. Basically I would like to see the red cube falling in some very specific divs during the panels navigation (the grey ones), but I fear that I'm using too many libraries. My reference: https://tv.youtube.com/welcome/ My working draft: http://j-a.it/tic/ Any suggestion? Thanks EDIT, uploaded a CodePen.
  18. The ScrollTo plugin has been working perfectly with exactly the same code for the last 4 or 5 months as I developed this website. However, shortly after deployment (on the same hosting provider), I am getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." As evidenced by the included screenshot of the page source, the plugin is successfully loading on the page, and the one line of JS that is calling the plugin on this page looks like this. solutionsTl.to($(window), .8, { scrollTo: {y: scroll}, ease: Circ.easeOut}, "-=.5"); I have tried adding an x value and trying a different target, as well as rearranging my header in various ways to include scripts in a different order, but nothing is working. All of the threads I can find both here and on Stack Overflow are resolved with the answer that they need to include the ScrollTo plugin. However, I would like to stress that the ScrollTo plugin has been successfully loaded, and this code was working perfectly for a period of 4 to 5 months after finishing this section of the JavaScript. I am at a loss. Any help would be much appreciated.
  19. Hello everyone, Posting for the first time on these forums. I just started using GSAP and i'm wondering is it possible to use scrollTo when coming from external pages? I would love to be able, after clicking on link from external page, to load my site's landing page and then scroll to desired anchor. This is working perfectly with scrollTo plugin when im using "local" links on the site, but as said not when coming from external link - it just jumps to anchor without scroll animation. Any ideas would be appreciated. Thanks in advance.
  20. When using scrollTo to an anchor like this: //or to scroll to the element with the ID "#someID": TweenLite.to(window, 2, {scrollTo:"#someID"}); Is it possible to set an offset so that it stops say.. 200px before?
  21. I'm at a loss here folks. lol Basically, if you check out the Codepen, and try to scroll up or down no scrolling occurs... If you manually resize the window then the scrolling magic happens. Has anyone encountered anything like this before? Thanks, Nick
  22. I have a problem with plugin scrollTo (tweenMax), When I click on the menu link and the website slide to the section ID that I chose on menu. But the website doesn't stop on begin of the section, and I need to show the h2 (Title). My Code $(function scrollTop(){ var wrapper = $("#wrapper"), $menu = $("#menu"); $menu.on("click","li", function(){ var $this = $(this), href = $(this).find("a").attr("href"), topY = $(href).offset().top, extraOffset = $menu.hasClass('fixar') ? 75 : 0; TweenLite.to(window, 2, { scrollTo: { y: topY - extraOffset, x: 0}, ease: Cubic.easeIn }); return false; }); }); Mobile doesn't working too ... =/ http://codepen.io/erickcouto/pen/XpLwLq
  23. Hello everyone, I'm having a problem with my scrollTo function. I'm building an horizontal slider scrollable with buttons but there's something weird happening. Here's an example of what i'm trying to accomplish with working code: // the function function goTo() { e.preventDefault; TweenLite.to('.wrapper', 1, { scrollTo: { x: $('#slide-glasses-2').position().left }, ease: Power2.easeOut }); } // the trigger $("*[href^='#']").click(function() { goTo(); }); Point is I don't want to call the function for every button so I wrote this: // the function function goTo(target) { TweenLite.to('.wrapper', 1, { scrollTo: { x: $(target).position().left }, ease: Power2.easeOut }); } // the trigger $("*[href^='#']").click(function() { var target = $(this).attr('href'); goTo(target); }); This doesn't work, I mean the click event brings me to the exact slide but without the scrolling animation. Any suggestions? Thx everyone
  24. Hi! I'm using GSAP with ScrollMagic on a one-page site I'm developing. To scroll to a particular section I'm using the scrollTo plugin and it's working great but I need it to have an offset when it scrolls so the heading doesn't scroll under the nav. scrollTo helpfully provides an 'offsetY' property but for some reason it's not working for me. No matter what offset I put in, it scrolls to the same position. There are no console errors though. You can see it not working on the linked codepen demo. Here's the specific line: TweenMax.to(window, 0.5, {scrollTo: {y: newpos, offsetY:70}}); Any idea what I'm doing wrong? TIA! David
  25. Here's the StackOverflow question before this post: http://stackoverflow.com/questions/39711783/the-window-detects-scrolling-inexplicably/39713742#39713742 I have a fairly simple function that detects a window scroll. Fires a timeout event (500ms) when the user stops scrolling. This ends then listener and timeout. I then animate(GSAP) the window to a certain point. Once the animation is complete, the listener is fired up again. Sometimes... a scroll is detected again, so the whole function is fired twice. Please look into console to see this happening. code here: var timeout; var onScroll = function() { console.log('scrolling...'); if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function () { console.log('done scrolling... stop listening...'); $(window).off( "scroll", onScroll); clearTimeout(timeout); timeout = null; // aniamte scroll console.log('start animating scroll...'); TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){ $(window).on( "scroll", onScroll); console.log('done animating scroll. Start litening again.'); }}); }, 500); } $(window).on( "scroll", onScroll); example: http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011 How is this happening? Should I be asking quantum theorist?