Search the Community
Showing results for tags 'scrollTo'.
-
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
