Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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} }); }
  2. 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; };
  3. 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
  4. 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
  5. 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?
  6. 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
  7. 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
  8. 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/
  9. 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?
  10. 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 ?
  11. 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.
  12. 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.
  13. 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.
  14. 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?
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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?
  20. Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once I bet it's possible, and that I do something terribly stupid Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must. Any help will be more than welcome !
  21. I'm trying to get the scrollTo plugin to work without any luck in targeting element IDs. Have tried this in several scenarios. For example: var downBtn = $('#history-banner-down-btn'); downBtn.on('click',function() { TweenMax.to($(window),1,{scrollTo:{y:'#section-1',offsetY:85}}); }); This will work if I change '#section-1' to 'max' which scrolls to the bottom of the document. Using an ID never works - no console errors or anything. Any ideas on where I'm going wrong? RESOLVED: Almost immediately fixed the problem after posting this. I was using an older version of the scrollTo plugin. Updated to 1.8 and it worked.
  22. Hi All, I am new to GSAP and inexperienced with javascript so please bear with me. I am currently trying to make a Go To Top button that follows you down the page and when you click the button it brings you back to the top of the page and so far it has been working.... Unless you want to use it more than once. For some reason, I can't get it to play again after the first click. I have been using timeLineMax and scrollTo to achieve this so far. I have been trying something like this to fix it but no luck so if you can please point me in the right direction. // GO TO TOP BUTTON var goToTopTi = new TimelineMax({paused:true}); goToTopTi.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeOut}); var isPressedGoToTop = 0; document.querySelector("#goToTopButton").addEventListener("click", function(){ if (isPressedGoToTop === 0) { goToTopTi.play().timeScale(1); isPressedGoToTop++; } else { goToTopTi.repeat().timeScale(1); } }); I also tried something similar with no "if" and just goToTopTi.play().timeScale(1); thinking it would simply play each time and no luck with that either. Thanks in advance for all your help, Tech Soul P.S. I am not using jquery on this site for speed reasons in case your thinking the answer is a jquery thing
  23. I am using TweenMax to shoot to a certain point of the page like so: TweenMax.set(map.win, { scrollTo : { y: val } }); This goes to the wrong position but works properly elsewhere in my code strangely... for now I am doing this instead and works properly, but feels like a gimmick: TweenMax.to(map.win, 0.000001, { scrollTo : { y: val } }); Any help would be appreciated!
  24. Below is the function which I use to automatically scroll on my practice site when a link is clicked. $(function () { $('a[href*="#"]').click(function () { if(this.hash != "") { TweenLite.to(window, 1.5, {scrollTo:{y:$(this.hash).position().top, autoKill:true}, ease: Power2.easeInOut}); } else { TweenLite.to(window, 1.5, {scrollTo:{y:0, onAutoKill:autoKillFired}, ease: Power2.easeInOut}); } return false; }); }); function autoKillFired() { alert("autoKill"); } Is there a way to fire the autoKill function when the user scrolls the mouse wheel or uses a mouse pad to scroll? Also I noticed that the autoKill function does not always fire when it should. For example if the user starts the scroll and then drags the scroll bar mid way through the animation, then it may or may not fire. Is this a known bug or is there a problem with my function? (This seems to occur for the browsers I have at my disposal. The latest versions of Google Chrome, Mozilla Firefox, Opera, and Internet Explorer . However when tested on codepen it seems to work all the time)
  25. Hi Guys, I have a page with a CSS animation on entry that slides in some content. I also have a scroll to ID snippet as follows: var footer = document.getElementById("footer"); var footerTop = footer.offsetTop; function gotoFooter() { TweenLite.to(window, 1.5, {scrollTo:(footerTop), ease:Power4. easeInOut}); } ...however due to the CSS animation that starts on entry my scrollto is wildly off and in fact just slams into the end of the page with an unseemly stop. My question is, is there a way to update the new page length for the plugin after my animation finishes (its 2 seconds long). Thanks for any help, I'm just starting to learn this library so please be gentle .