Jump to content
GreenSock

Search the Community

Showing results for tags 'scrollto'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. 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 !
  2. 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.
  3. 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
  4. 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!
  5. 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)
  6. 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 .
  7. 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' });
  8. 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.
  9. 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.
  10. 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.
  11. 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?
  12. 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.
  13. 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
  14. 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.
  15. 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.
  16. 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');
  17. 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
  18. 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?
  19. 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.
  20. 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
  21. 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...
  22. 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
  23. 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.
  24. 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?
  25. Guest

    scrollTo plugin

    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
×