Search the Community

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.

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

I've been working on a project for several months now, and had been using an older version of GSAP for animations, largely to scroll the site up and down to specific sections when the user clicks the navigation. I recently updated from beta 1.5 to the latest ( 1.8.2 ) and noticed that the site no longer scrolled properly: the scroll animation will start and get about 20-50px and just stop. This only happens in Safari/ML 10.8.2. I used BrowserStack to version test, and Safari 6.0.2 in Lion works just fine. To debug, I set an onUpdate function to log the $( window ).scrollTop(), and it seems as if the tween fails at setting the window's scroll, but continues to run fine: I was able to solve my problem by just reverting back to 1.5, but I wanted to send a bug report.

Hello i wanna ask for the more experienced userds of GSAP JS: How can i make a window scrollTo plugin go to 100% bottom of the webpage? on jquery i set it as "max", but i wan´t to use only GSAP for animations and jquery for selector and general pourposes tnx for your time.

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');

Hi, Can anyone help: I'm using the scrollTo plugin and I need a callback that will fire if the Tween is interrupted by the user manually scrolling. Does functionality like this exist or is it possible to create it? Thanks, Will

On a current scrolling landing page we are building we use a timeline to control animations up and down the page. The scrollTo plugin is used to move the page up and down as the user scrolls. The main navigation at the top then seeks to specific parts of the timeline. On IE browsers, when we do this seek() or pause(), it quickly flashes through the skipped content. On Chrome or Firefox the timeline advances to that spot with no problems. This codepen example shows the problem in an abbreviated form. When a click is fired on the link at the top, we utilize a scrollTop function to move the window to the correct position. After two seconds we advance the timeline to the state that would match the window position. In Chrome and Firefox this seek is not noticeable. In IE browsers (tested in IE9, 10, and 11) the content between the top of the page and the new position flashes by. Watch the section h1 carefully to see it. http://codepen.io/aclabaugh/pen/mpAwB Any ideas on how to stop the seek from showing some of the steps in between a scrollTo tween in IE?

Hi, I'm using version 1.10.3 of TweenMax for multiple animations on my site. I'm using the scrollTo plugin on my main menu to smoothly scroll to different anchors on the page. I have tween animations on each section to show the content when the section scrolls into the viewport (triggered the first time the section scrolls into view only). The problem is that when any section scrolls into view and its animation is triggered, the page stops scrolling. It appears that the scrollTo tween is aborted by the new animation. * I logged the target anchor position before starting the scrollTo animation, and it was being correctly reported. * I added an onComplete function to the scrollto that logged the page's final scrollTop position, and every time I tried to scroll to a section with other animations above it (thereby triggering them "on the way"), this function wouldn't run. * Once all sections had been viewed (and all tweens triggered), I could correctly navigate through the page using the menu (and my test logging function ran correctly). This only happens in Safari - all animations are correctly triggered and completed in Chrome, Firefox and IE. Advice/suggestions welcome. For the moment I'm using a different library for my scrollTo function.

Why doesn't 'myFunction()' fire at the end of this? (simple scroll-to-section) $('a.trigger').bind('click',function(event){ event.preventDefault(); var $anchor = $(this); var scrollY = $($anchor.attr('href')).offset().top - 100; TweenLite.to($(window), 1.6, {scrollTo:{ y:scrollY, onComplete:myFunction, ease:Power2.easeInOut }}); function myFunction(){ alert('done'); } }); Something to do with the scrollTo plugin??? I am confused...I have tried putting onComplete outside of the scrollTo:{} brackets, still nothing... what's up? Thank you very much for any help! Luke

How do you set delay in scrollTo plugin? for example: tlS.to(window, 2, {scrollTo:{y:$(".goImg").offset().top, delay:4}, ease:Power4.easeInOut}) I want to delay it for 4 second but it doesnt work. and I not sure is this a bug or not that when I set ease to ease:Back.easeInOut, the scrolling stop working also...

Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi

Greetings all, I am working on a site which includes simple "next" and "previous" buttons to navigate using "scrollTo". I have successfully configured scrollTo to navigate to multiple anchor elements moving forward (i.e. "#myDiv1, #myDiv2, etc.") using the "next" button, but I was wondering if it is possible to scroll back to the previous anchor using just the "previous" button (I don't want to scroll back to the beginning). I hope this is clear enough. Any advice would be greatly appreciated. Cheers, Ron P.S. Greensock rocks! I've only been using it for a short while, but even as a newbie I've been able to exceed my clients' expecations.

Hi Everyone! I have problem with figure out method to scroll snapping to the nearest point. I'm using Superscrollama. This is my testing site: http://arcadioenmadrid.es/scroll/2mojedemoFOLIO.html First DIV is pinned by superscrollama for 3000px after this it scrolling up and there will be second pinned DIV for next some pixels. I would like to make something snapping like on this site: http://www.kosmostumostow.pl So in my case if user stop scroll at <1500 after 1 second site should auto scroll to 0px if he stop on >=1500 site should scrolling to the next DIV. I tried various methods with setTimeout and it never works. Browser snap to for example point 0px and I can't scrolling or looping function till browser crash on it. Anyone could me help with this? I'll be grateful. Thanks! p.s. Maybe someone know why don't work trasition background to white on Chrome and on Firefox is okay?

I am trying to setup a menu which uses the scrollTo plugin to move to different sections of a one page site, with a menu bar at each section. The html looks like this: <div id="bg"> <div id="section1"> <div id="menubar"> <div id="logo"> </div> <div id="vertline"> </div> <button id="whoweare">WHO WE ARE</button> <button id="whatwedo">WHAT WE DO</button> ... <div id="section2"> <div id="menubar2"> <div id="logo"> </div> <div id="vertline"> </div> <button id="whoweare">WHO WE ARE</button> <button id="whatwedo">WHAT WE DO</button> ....... The style like this: #bg{ height:8000px; background:url(images/background.png); margin: auto; } #section1 { height: 800px; } #section2 { height: 800px; } #menubar { position: relative; height: 50px; border-bottom: 1px solid; border-color: #022e2f; } #menubar2 { position: relative; height: 50px; border-bottom: 1px solid; border-color: #022e2f; } #logo { width: 76px; height: 34px; margin-left: 25px; margin-right: 25px; background-image:url(images/logo.png); background-repeat: no-repeat; } #vertline { width: 1px; height: 200px; position:absolute; top: 0px; left: 120px; background-color: #022e2f; } #whoweare { position:absolute; top: 10px; left: 145px; color: #fff; font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; font-size: 14px; background-color: transparent; } #whatwedo { position:absolute; top: 10px; left: 280px; color: #fff; font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; font-size: 14px; background-color: transparent; }#bg{ height:8000px; background:url(images/background.png); margin: auto; } The script looks like this: <script> $(document).ready(function(){ TweenMax.set(window, {scrollTo:0}); $("button#whoweare").click(function() { var section1 = $("div#section1").offset().top; TweenLite.to(window, 1.5, {scrollTo:section1, ease:Back.easeOut}); }); $("button#whatwedo").click(function() { var section2 = $("div#section2").offset().top; TweenLite.to(window, 1.5, {scrollTo:section2, ease:Back.easeOut}); }); }); </script> .... On the first menu the "whatwedo" button works, and will scroll to the second menu. But the second menu doesn't work. Is there something I'm missing? Thanks! Zach