Search the Community

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

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

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/

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?

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 ?

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.

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.

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.

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?

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

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

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

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

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?

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 !

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.

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

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!

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)

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 .

Hi! I'm wondering is it possible to use greensock easing on this plugin http://flesler.blogspot.com/2007/10/jqueryscrollto.html I know gs has scrollto as well, but this plugin can scroll to a specific div. But I'm using gs easing already, so I really don't want to add another easing library, is there a way to call gs easing function? Thanks! here's how to use that plugin $container.scrollTo('#img1', 500, { easing:'swing' });

I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen. Following is my code for reference. Please someone help & let me understand the reason behind it. CSS @import url(http://fonts.googleapis.com/css?family=Nunito); html { height: 100%; /* OVERFLOW HIDDEN NOT ALLOWING JAVASCRIPT SCROLL */ overflow: hidden; } body { margin:0; padding:0; /* perspective: 1px; transform-style: preserve-3d; */ height: 100%; overflow-x: hidden; font-family: Nunito; } h1 { font-size: 250%; margin: 0; padding: 0; } p { font-size: 140%; line-height: 150%; color: #333; } .slide { position: relative; min-height: 100vh; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; } .slide:before { content: ""; position: absolute; top: 0; bottom: 0; left:0; right:0; } .title { width: 50%; padding: 5%; border-radius: 5px; background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); } .slide:nth-child(2n) .title { margin-left: 0; margin-right: auto; } .slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0; } .slide, .slide:before { background: 50% 50% / cover; } .header { text-align: center; /*font-size: 175%;*/ color: #fff; text-shadow: 0 2px 2px #000; } #title { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg"); background-attachment: fixed; } #title h1 { padding-top: 80px; } #slide1:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide2 { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"); background-attachment: fixed; } #slide3:before { background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide4 { background: #222; } .fixed-header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1; text-align: center; color: #fff; } HTML BODY <body> <div id="scroll" class="fixed-header">CLICK HERE TO SCROLL</div> <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide3" class="slide"> <div class="title"> <h1>Slide 3</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide4" class="slide header"> <h1>The End</h1> </div> </body> JavaScript <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/plugins/ScrollToPlugin.min.js"></script> <script> (function() { var $ = function(selector, el) { if (!el) {el = document;} return el.querySelector(selector); }, $$ = function(selector, el) { if (!el) {el = document;} return el.querySelectorAll(selector); }; $('#scroll').addEventListener('click', function(e) { // GSAP CODE var posTop = $('#slide1').offsetTop; TweenLite.to(window, 2, {scrollTo: posTop}); }); }()); </script> Kindly help.

Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =) Now about my strange issue. For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else. I created a small codepen demo to show you my problem. Please help me to solve it.

I'm trying to use the scrollTo plugin to navigate around a div, however I'm getting unexpected behaviour, where the links don't seem to correspond to the element I want to scroll to and seem to erratically scroll along the y axis. As the stripped down example shows, the first three content blocks are anchored to the bottom of the container element, with the final content block being anchored to the top of the container. What I am looking to achieve, is to have the content scroll to the relevant relevant anchor, and where the scroll must move from a top to bottom content block, both the x and y axis are animated simultaneously, not an initial scroll along the x axis, and then a scroll along the y axis. Any help appreciated.

I've been using the 'scrollTo' plugin to scroll my divs, but now I need to implement that same functionality to affect an iframe. Is this possible?