Search the Community

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.

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?

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; };

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.

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?

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 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 ! 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

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 .

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?

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.

Hey, I've been using the scrollTo plugin extensively throughout my web app and up until now its been running great. I just came across a use case that requires an event to fire when the user manually scroll's while the scrollTo plugin is auto scrolling. Does scrollTo have a callback that fires when the scroll is killed by a manual scroll? I've tried onComplete but that only fires if the whole auto scroll finishes before any manual scroll event. Thanks Josh

Good Morning Guys; I want to scroll the current article when I click to the next or prev link, but on console browser shows the following information : invalid scrollTo tween value: [object Object] The HTML Structure is : <div class="mask-articles"> <article class="history-article-1"> </article> <article class="history-article-2"> </article> <article class="history-article-3"> </article> </div> and the JS /* Time Line Quem Somos*/ var section = 0; var sectionTotal = $(".mask-articles > article").length - 1; var article = $(".mask-articles > article"); console.log($(section)); $(".prev-history").click(function (e) { e.preventDefault(); if (section > 0) { section--; } TweenMax.to($(".mask-articles"),0.5,{scrollTo:{y:$(".history-article-"+section).offset.top}}); }) $(".next-history").click(function (e) { e.preventDefault(); if (section < sectionTotal) { section++; } TweenMax.to($(".mask-articles"),0.5,{scrollTo:{y:$(".history-article-"+section).offset.top}}); //TweenMax.to(window, 0.5, {scrollTo:{y:$("#div" + section).offset().top}}); }) Somebody can help me ? Thank you.

Hi, I try to scroll from an anchor to a div, it's work to go to the top of window but from top of window to a bottom section it doesn't work. http://codepen.io/dhenriet/pen/dtJog function TweenScroll(anchor) { $(anchor).click(function(e) { e.preventDefault(); var domId = $(anchor).attr('href'); //.attr('href').slice(1); var domScroll = $(domId).offset().top; console.log(domScroll); TweenMax.to(window, 1.5, { scrollTo: { y: domScroll }, ease: Back.easeInOut }); }); } TweenScroll('#top'); TweenScroll('#start');