Jump to content
Search Community

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



Found 85 results

  1. i only started using gsap recently, i wanted to use the ScrollTo plugin to animate a horizontal scroll via buttons. but i can't make it work i don't know what the issue is :'(( gsap.registerPlugin(ScrollToPlugin); const avis1 = document.getElementById('avis1'); const avis2 = document.getElementById('avis2'); const avis3 = document.getElementById('avis3'); const b1_2 = document.getElementById('b1_2'); const b2_3 = document.getElementById('b2_3'); const b2_1 = document.getElementById('b2_1'); const b3_2 = document.getElementById('b3_2'); b1_2.addEventListener("click", () => scrollAvis(avis1, avis2)); b2_3.addEventListener("click", () => scrollAvis(avis2, avis3)); b2_1.addEventListener("click", () => scrollAvis(avis2, avis1)); b3_2.addEventListener("click", () => scrollAvis(avis3, avis2)); function scrollAvis(container,targetElement){ // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); gsap.to( container,{ scrollTo: { x: targetElement }, duration: 0.5, ease: "power3.out" }); // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); } any kind of help is appreciated
  2. import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, CustomEase, ScrollToPlugin); let indexToActivate = 0; useEffect(() => { const startScrollSection = document.querySelector(".start-features-section"); const scrollIndicator = scrollSectionIndicator.current; const featuredNodes = Array.from(document.querySelectorAll(".featured")); const featuredIndicators = Array.from(document.querySelectorAll(".features_section_indicator")); // const totalScrollableHeight = 3000; const sectionHeight = totalScrollableHeight / featuredNodes.length; console.log("sectionHeight", sectionHeight); gsap.set(scrollIndicator, { autoAlpha: 0, y: 100, }); ScrollTrigger.create({ trigger: startScrollSection, start: "top top", end: `+=${totalScrollableHeight}px`, scrub: true, pin: true, onUpdate: self => { console.log("self", self); console.log("prev", self.previous()); // const scrollPosition = self.scroll() - self.start; const scrollPosition = totalScrollableHeight * self.progress; console.log("scrollPosition", scrollPosition); if (scrollPosition > 0 && scrollPosition < totalScrollableHeight) { gsap.to(scrollIndicator, { autoAlpha: 1, y: 0, transition: "ease-in-out-cubic", }); } else { gsap.to(scrollIndicator, { autoAlpha: 0, y: 100, transition: "ease-in-out-cubic", }); } indexToActivate = Math.floor(scrollPosition / sectionHeight); indexToActivate = Math.min(Math.max(indexToActivate, 0), featuredNodes.length - 1); console.log("indexToActivate", indexToActivate); // activateCurrentSection(indexToActivate); }, }); function activateNode(indexToActivate, nodeArray, className = "active") { if (indexToActivate >= 0 && indexToActivate < nodeArray.length) { nodeArray.forEach(_node => { _node.classList.remove(className); }); nodeArray[indexToActivate].classList.add(className); } else { console.error("Index out of bounds:", indexToActivate); } } // button indicators function updateActiveFeatureIndicator() { activateNode(indexToActivate, featuredIndicators); } // scroll function updateActiveFeatureSection() { activateNode(indexToActivate, featuredNodes); } // parent function function activateCurrentSection(indexToActivate) { updateActiveFeatureSection(indexToActivate); updateActiveFeatureIndicator(); } function scrollToCurrentSection(index) { indexToActivate = index; // activateCurrentSection(indexToActivate); gsap.to(startScrollSection, { duration: 1, scrollTo: { y: indexToActivate * sectionHeight, autoKill: false, }, ease: "ease-in-out-cubic", }); } // button click featuredIndicators.forEach((numberNode, index) => { numberNode.addEventListener("click", () => { scrollToCurrentSection(index); }); }); }, []); Hello there, need help with a scrollTo issue, please I'm trying to use a scrollTo plugin to scroll to a particular height in my pinned section (startScrollSection) when I click on my (featureIndicator) button and I also expect the scroll to continue from where I clicked correctly instead of starting from scrollPosition: 0
  3. Hello, I'm having some trouble navigating the pinned cards block. In the menu on the left there are anchor links that, when clicked, should scroll to their block. Also, during normal scrolling, links should be marked with an active class when the block becomes visible. Now, when clicked, the link scrolls to the top of the parent block, as far as I understand, because the cards are on top of each other. What is the problem? How can I pin the scroll to the desired block? I used these URLs to implement cards on top of each other and for navigation: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ And https://gsap.com/community/forums/topic/35776-click-to-navigate-to-a-section-using-gsap/ https://codepen.io/Vlanesvit/pen/gOExGzZ
  4. I am trying to achieve this scrolling and band clicking effect: https://root-food.com/ I figured out the horizontal scrolling and band clicking. But both of them together aren't working. What I mean is, when I comment out the update() function, the click events of bands will work just fine and will get the related section into the viewport based on which band you click. Now when we keep the update() function, it won't throw any error and it won't even work. I think both of the scrollTo are conflicting. Please help with this.
  5. Hello, I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent. The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread. Thanks
  6. Hello. I'm trying add ScrollTo to a child element. when I click a parent element, it works. But when i click Section 2 (id refer to child element), it does not work. How can I solve it?
  7. Sukru

    Link anchor

    Hello, I use link anchor in my project to scroll within the page, but when I use the "fadeup" animation in my project, the "anchor" throws the page down a little with an incorrect calculation. can we help?
  8. Hi there I'm using the scrollorama plugin to achieve some fairly simple pinned animations, and the plugin works extremely well. However, I'm trying to use the scrollTo plugin to provide a simple navigation for users to scroll with animation to the critical point in each animation, and this is the part I'm stuck on. If anyone can provide any guidance on how to determine the way to scroll directly to a certain point in a pinned animation, I'd greatly appreciate it! Thanks.
  9. Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance
  10. I have a horizontal webpage and I wanted to implement a rowjumper. However, gsap.scrollTo() doesn't seem to work together with ScrollTrigger on a horizontal webpage. Does anyone know how I can implement this rowjumper? I'm happy about any help
  11. Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!
  12. 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!
  13. https://canal.luxurycollection.ae/ For example, please look at this site. When you go to it, you will see that when you scroll through the first block an animation (rotate) is triggered for the element on the left until the end of this block. I can also start scrolling in reverse order and the animation will also be triggered back. How can I do this? I tried to do something, but it did not lead to anything :( I would be happy for any help! Whether it's ready-made code or if you can just point me in the right direction by telling me what to use for it. Thanks :)
  14. Hello everyone! I'm working on a website with layered pinned animations. The main animation is working well, however I would need to make possible that the first two sections (with a different class and nested content with a mask) works as layered pinning but with an inverted behavior. In few words: generally layered pinning make NEXT layers to overlay the PREVIOUS, while I need the FIRST section overlay the SECOND, keeping the snapping effect. After this specific animation, the next pinning animations should work as usual. I tried to use this snippet to control the zIndex of the first two sections without results (the animation breaks and restarts every time from top): gsap.set(".panelz", { zIndex: (i, target, targets) => targets.length - i }); where ".panelz" is the class of two nested sections inside the first main section. How can I solve this? Thank you in advance and have a nice day!
  15. Hi ! On my portfolio website that I'm building with Nuxt.js, I want that when the user clicks on a project, the page is scrolled until the top of the project image is aligned with the word "Réalisations" - about 250px from the top of the page. I was inspired by this official gsap example : https://codepen.io/GreenSock/pen/LZOMKY As you can see on my website , when you click on the image and the content is scrolled up, the image does not stop at the right place - but in the opposite direction it works correctly.... any idea what may cause this issue ? Thank you for your help ! ScrollTo script triggered when the user click on a project : scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, Here is the whole code of the page component : <template> <div id="realisations"> <div v-for="item in orderRealisations" :key="item.titre" class="realisation"> <figure @click="scrollToRealisation($event)"> <img :src="require('/assets/imgs/projets/'+item.img)" :alt="item.titre"> </figure> <div class="content"> <div class="contentWrapper"> <header> <h3>{{ item.titre }}</h3> <h5 class="client-year">{{ item.client }} - {{ item.annee }}</h5> </header> <p class="description"> {{ item.description }} </p> <footer> <a class="projectLink" :href="item.url" target="_blank">Consulter le site</a> </footer> </div> </div> </div> </div> </template> <script> import realisationData from '~/static/data.json' export default { name: 'realisations', data() { return { sections: [] } }, asyncData ({ params }) { return { realisationData } }, mounted() { this.sections = this.$gsap.utils.toArray('.realisation'); this.animateOnScroll() }, computed: { orderRealisations() { return this.realisationData.sort((a, b) => b.annee.localeCompare(a.annee)); } }, methods: { //ScrollTo scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, animateOnScroll() { const gsap = this.$gsap this.sections.forEach((section) => { let image = section.getElementsByTagName('figure') let content = section.getElementsByClassName('contentWrapper') this.$ScrollTrigger.saveStyles(".realisation figure, .realisation .contentWrapper"); this.$ScrollTrigger.matchMedia({ "(min-width: 769px)": function() { let imageTl = gsap .timeline({ scrollTrigger: { trigger: section, start: 'top 60%', scrub: 2, end: 'bottom 0px', } }) imageTl.addLabel("animationstart") .to(image, {width: '30vw'}) .to(image, {width: '20vw'}) let contentTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //in: true, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentTl.addLabel("contentanimation") .fromTo(content, {x:-300, opacity:0,}, {x:0, opacity:1 }, '-=0.8') }, // mobile "(max-width: 768px)": function() { let contentMobileTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentMobileTl.addLabel("contentanimation") .fromTo(content, {y:-200, marginTop: 0, height: 0, opacity:0,}, {y:0, height: 'auto',marginTop: 20, marginBottom: 40, opacity:1 }, '-=0.8') } }) }) } } } </script> <style lang="scss"> #realisations { padding-bottom: 60vh; padding-top: 225px; @media all and (max-width: 768px) { padding-top: 0; } .realisation { display: flex; margin-bottom: 3em; @media all and (max-width: 768px) { display: block; flex-direction: column; margin-bottom: 1em; } figure { margin: 0; width: 20vw; cursor: pointer; img { width: 100%; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } @media all and (max-width: 768px) { width: 100%; } } .content { max-width: 500px; overflow:hidden; margin-left: 40px; @media all and (max-width: 768px) { margin-left: 0; height: auto; } } .contentWrapper { height: 100%; display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; header { h3, h5 { margin: 0; } h3 { font-size: 1.4em; margin-bottom: 0em; @media all and (max-width: 768px) { font-size: 1em; } } h5 { font-weight: 400; } } p { font-size: 0.9em; line-height: 1.2; } footer { // margin-top: auto; a { color: #fff; text-decoration: underline; font-size: 0.7em; } } } } } </style>
  16. Hello, I'm working on a scroll-based reveal animation using ScrollTrigger, but I have trouble finding the right solution. I created a minimal demo that actually works (with minor issues) and looks the way I want. The problem is that I think my solution is a little bit hacky, and probably there's a better way of doing this. The most obvious clue for me is the 'Screen 3' link at the top left corner. I'm using the ScrollToPlugin to scroll down to an id inside the 3rd screen, but it must be clicked multiple times to reach the actual id when you start at the top. Can you help me with some tips or examples so I can achieve the exact same effect with a better working solution? I read that I shouldn't add default CSS transform properties when working with xPercent animations, but this way sometimes the page loads in with the 'Screen 1' section visible. A negative X transformation on the #content selector would solve this issue, but I can't use that because that would break the GSAP animation. What's the best solution to avoid this behavior? Thanks in advance! Adam P.S. I'm not sure why the snap animation is jumping around and moving backward. I have the same code in my project, and it only happens on CodePen.
  17. 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
  18. Hello everyone and TIA for all your support! I am making a landing page with GSAP, ScrollTo and ScrollTrigger plugins. As you can see from the Codepen, there is a simple scrolling animation with a specific duration on page load. The animation brings the user smoothly from A section to C section. While on Safari and Firefox (Win and Mac), the animation starts smoothly and correctly, on Chrome and Android browsers (Mi Browser in my case) it stops and it doesnt' run but after some seconds. It seems that duration in this case is read by Chrome like a delay and not the duration of the entire animation. The pen on Chrome explain exactly the problem, while on Safari or Firefox is running good. Anyone has an idea how to fix this strange behavior ? Thank you!
  19. 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
  20. 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.
  21. 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 ?
  22. 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
  23. 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?
  24. 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?
  25. GreenSock


    Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div gsap.to(myDiv, {duration: 2, scrollTo: 250}); Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs.
  • Create New...