Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrollto'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, I am trying to accomplish this animation using scrolltrigger, but there is some weird space below the first section. I added pinSpacer: false and now, weird space is gone but second section is going beneath the first section. I dont what that to happen.. thanks
  2. Hello All, I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached. Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine. It will be great if you help me in this case. I'll be thankful.
  3. I am very much confused with the all these libraries.. On the homepage it says all in one .. You just need to import gsap single file. Then on examples i see people have included scrollTo and scrolltrigger separately. Then i see all these libraries are paid. There is no simple table which can tell the difference between free and paid gsap apart from community benefits. Is it like we get some features in pro that are not in free version?? If that is the case all of those codepen are useless for newcomers, because i might be trying hours on some feature which is eventually paid and i am not aware of those. Please can you please resolve the questions ?
  4. In this demo I’m trying to create a navigation that scrolls horizontally to show more navigation items as the user scrolls down the page, the navigation allows the user to manually scroll horizontally and click on different nav items and will scroll to that section of the page. The issue comes when the user manually scroll horizontally, then click on a nav item, the navigation jumps. How can i control this part of the animation to create a smooth transition after the user scrolls the navigation horizontally?
  5. I'm using the ScollTo plugin to hijack the scrolling of the user: I've got multiple sections. Once the user scrolls a little bit the first scrollTo animation gets triggered and scroll the whole window to the second section. Once the user scrolls down more it automatically scrolls down to a third section. To achieve this I've use this code: let tlhomescroll = gsap.timeline({ scrollTrigger: { trigger: '.o-herotall__bg', start: "top top", end: "bottom center", autoKill: false, markers: true, pin: false, scrub: false, toggleActions: "restart none none none" } }); tlhomescroll .to(window, {duration: 1.5, ease: "power3.inOut", scrollTo: "#section2"}); using "o-herotall__bg" as a trigger on my 1st section it scrolls to section 2. I then do the same for section 2 to section 3. This all works fine, but the problem is: Once the user scolls down and reloads the page or comes back from another page to this on on a lower scroll position, the scrollTo is triggered and the window scrolls to section 3. How can I prevent the scroll event from triggering when the page isn't loaded at the top?
  6. Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please. The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!
  7. I have panels for content that use a scroll trigger (scrubbing & Pinning) to reveal. I would like users to be able to click on the nav to jump to one of the content panels. After leveraging bits from this wonderful forum, I was able to get a working prototype. Only issue I'm having now is that when a user clicks to go to a lower content panel it works. Then when they click on a higher content panel it appears the offset is off by about 50% the window.innerHeight. When I use an OffsetY value (window.innerHeight / 2) the lower content panels show at 50% but the higher panels show correctly. I feel like if I could determine the scroll position of the element I'm scrolling to I could just add the correct offset to compensate. Is there any way to correct this behaviour? (FYI, It doesn't appear to be showing well in the embeded codepen... Seems to work fine on codepen.io)
  8. hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.
  9. Hello, The first 2 panels should be reached via ScrollTo, but the second ScrollTo always starts from the top of the page. How can I fix this?
  10. Hi all! I'm new to GreenSock and I haven't been able to find a similar issue in the forum. Does anyone know if it's possible to stop Scroll Trigger when ScrollTo is actively scrolling? I have navigation links which use `ScrollTo` to navigate to specific sections. I also have a section which I want to pin and show an animation inside. I'm looking for a way to pause `ScrollTrigger` when the user clicks a navigation link that utilizes `ScrollTo` - but have `ScrollTrigger` activated when the user is scrolling the page. Thank in advance for all the help :)
  11. Hi everyone, I'm looking for few days how to use the gsap plugin ScrollTrigger and ScrollTo together to create an automatic scroll from section to section as fullpage does. I think I'm understand well how ScrollTrigger works but I can't find good online exemple of ScrollTo... So I can't really figurate how make it Here is a good exemple of what I want to do : https://codepen.io/Jean-Tilapin/pen/vwmOqd but I think they use an old version and as my level in js & gsap is not really good I can't find how recreate this in my codepen exemple. Thanks a lot for your help Have a great weekend to all
  12. I'm using the following code to automatically scroll a div up & down when the user has not been interacting for a while (idle). objListingScrollTween = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true }); objListingScrollTween.add(gsap.to("#sessionListingsHolder", { duration: 5, scrollTo: { y: "max" }, ease: "none"})); This works fine but I have two questions: 1) is there an inbuilt way of getting the value of "max" ? 2) when the user interacts, I pause the timeline. When idle resumes I call resume() on the timeline. But the user may have scrolled manually to a different scroll position in which case there is a jump. Is there an inbuilt way to get the value the timeline needs to seek() to in order to restart the timeline from the correct place? thanks
  13. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
  14. Hi - just migrated to v3, and not sure what I'm doing wrong, here's the code that works in one version, but not the other. It is the second one, the one that fails, that I want. //works wis.slideToTopOfViewport = function(slideNum, wrapper) { gsap.registerPlugin(ScrollToPlugin); let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`); console.log(targetElem); // works gsap.to(targetElem, {duration:0.4, y:-200 }); //works } //fails wis.slideToTopOfViewport = function(slideNum, wrapper) { gsap.registerPlugin(ScrollToPlugin); let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`); console.log(targetElem); // works gsap.to(window, {duration:0.4, scrollTo: targetElem}); //FAILS!! }
  15. Hi, I'm trying to get smooth scrolling to work properly, but unfortunately I can't handle it myself (sorry, I'm pretty new of this). I'm using a scrollToPlugin and external plugin called "Smooth Scrollbar". If you look at it you will see that it is not working properly. Clicking on the link will move it chaotically. Also, if you click on the link multiple times, the page will move up and down, though it shouldn't. Hopefully someone can help me with this. Thank you.
  16. Hi everyone, I'm new to GSAP and having a bit of trouble getting the ScrollTo to work properly. I have gsap and ScrollTo CDN at the bottom of the body. Below is pretty much all I have in my JS file. I'm guessing I missed something in the docs just because it seemed so simple to implement GSAP.
  17. Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?
  18. Hi, i'm trying to make alternative drag gable navigation element , that would scroll the page by dragging it up and down. So i have ran into 2 problems one is the moment you start to drag it jumps to the bounds top/bottom bounds of y axis instantly. Secondly i wan't to animate it, when you scroll the page normally, but that that brakes brakes everything also. Any help/tricks/tips with this would be greatly appreciated.
  19. Hi there, Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished. Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete. Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?): http://grommas-dietz.com/reduced-test.html reduced-test.mov
  20. Hello, I'm using ScrollToPlugin to animate window position between sections. The issue is the following. I'm trying to check the window offset at the end of the animation (window scrolled to correct position), but I actually get the $(window).scrollTop() BEFORE the animation in the onComplete callback. The example code: // Go To Slide functionality goToSlide(slideIndex) { //If the slides are not changing and there isn't such a slide let $slide = $($(this.slides).get(slideIndex)); if (!this.isAnimating && $slide.length) { //setting animating flag to true this.isAnimating = true; //Sliding to current slide TweenMax.to(window, 0.5, { scrollTo: { y: $slide.offset().top, autoKill: false, }, onComplete: this.onSlideChangeEnd(slideIndex), onCompleteScope: this, ease: Sine.easeInOut, }); } } The onComplete callback // Change animation status onSlideChangeEnd(slideIndex) { this.currentIndex = slideIndex; this.isAnimating = false; this.nextSliderIndex = undefined; this.updateCurrentOffset(); console.log('this.offsets :', this.offsets); console.log('this on end :', this.currentTop); console.log('this on end :', $(window).scrollTop); console.log('vanilla :', document.documentElement.scrollTop || document.body.scrollTop); } The logged window.scrollTop are the actual values when animation starts (previous section coordinates). When you scroll again - the value becomes accurate for the previous callback. How can I get the window offset value after it was animated to a position via scrollTo plugin? Thank you
  21. Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). I hope I could explain it well, if not, please let me know and will try to elaborate. Best regards Thomas PS: the markup can't be changed
  22. Hi, I'm trying to use scrollTo in React. But I can't make the increment value to works with scrollTo... Here is the function that not working: handleClick = () => { let incrementNumber = 500 TweenMax.to('content', 0.5, { scrollTo: { x:'+='+incrementNumber } }); } Here is the function that can works if I just use a fixed number, but like this I can make the scrollTo increase 500px every time I click it: handleClick = () => { TweenMax.to('content', 0.5, { scrollTo: { x:500} }); }
  23. I am building a dynamic form/div which has a clone button on the right bottom corner. Once you click it, it should clone the .item:first and then auto scroll down so the last div will hide. and when you click on prev or next button, it should scroll to the exact div that i want. my approach by using jQuery scrollTop with fixed px but it is not effective. since we have a lot of screen size. How can I achieve this? this is the first time i want to try Greensock to make this happen. Thanks
  24. mikel

    First scrollTo

    Hi experts, It's a little strange: Only the first scrollTo (button on hero) does not land correctly. After that, everything works as desired. Everything is fine in the test case: In the finished web https://www.mandantum.com however not. I checked a lot. But do not find the mistake that I have 'built in'. Small hint, where to look, would be nice. Mikel
  25. I am running into an issue with my QA department and using the ScrollTo Plugin on a Windows 10 machine while using Firefox. They are saying that the problem occurs in all Browsers, but I'm only able to replicate it in FireFox. This is what they wrote: While the text is auto scrolling, pull the scroll down or click on the downward arrow to scroll the ISI down Expected result: user should be able to scroll up and down at any time Actual result: the scroll is not responding, a user needs to scroll up first to be able to scroll down Is this a bug in the ScrollTo Plugin or my code? https://codepen.io/blooaux/full/ELMPqw