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 94 results

  1. Hello! I am very, very, very new to GSAP and currently creating my first project with GSAP. However, I am facing a difficulty in animations with iPhone. See, the animation works great on desktop and Android, but on iPhone it somehow... lagging/stuttering. I am also using this code from GreenSock (thank you so much!) with little tweaking. I have also tried using z-index and scaleY but it only makes the animation worse. I am so confused and out of ideas... any idea how to improve the performance on iPhone? Thank you!
  2. Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time.
  3. Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!
  4. https://codepen.io/GreenSock/pen/LZOMKY I modified the scrollTo example code, but the result did not work as I expected. I added offsetY to scrollTo, the first click works perfectly when the scroll position is less than the element's scroll position. However, if I repeatedly click, the offsetY continues to apply, rather than staying fixed at the desired element and then applying the offset. When the scroll position is greater than the element's position, it cannot scroll to the desired position at all. I expected it to work like box2. Currently, for box2, I am using a fixed y value.
  5. Hey, Im working on a fullscreen slideshow that goes to the next section when i scroll. I created the slideshow first without the slides being position: sticky and this worked perfectly: https://codepen.io/remcovb/pen/wvbaRJe But when added postion: sticky to the sections, the slideshow only works when going down and breaks when going back up: https://codepen.io/remcovb/pen/KKLpbgQ Anyone with a solution for this?
  6. Hello, I'm new to GSAP and I'm trying some handy animation. Here is what I'm trying to achieve https://genevoism.com/. I know they have used different approach but I belief such animation are possible in GSAP too. I using combination of ScrollTrigger, ScrollTo, Observer and using timeline pause and play method to achieve one scroll animation effect. By one scroll I mean that each of animation would be trigger per scroll. Approach I took : > Firstly I have made different timeline for different animation per section. > Than I tried to get user scroll using observer's onUp and onDown methods. > Than after per scroll I play my desired timeline and as one of the tween of that timeline gets completed I pause my timeline, further when user will scroll again timeline play's and pause's again. > When all tweens in one timeline gets completed, I switch to other timeline by pausing the first one. > I have also used a forEach loop on scroollTrigger.create so that I can pin the particular section as animation are being performed. What I want: I want set of animation such that when my section comes in viewport or is already present in viewport( like hero or banner ) the animation should get started as the user scroll. Each and every animation or tween should start and end between two scroll of user. And as all the animation in a section get's completed it should slide up or down as per user's scroll 100% or 100vh. Please have a look into the below pen and guide me where I'm going wrong. Thank you... <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
  7. Hi there, I am really struggling to figure out why this isn't working.... and it's so close I do not want to give up on it. For some reason anytime I tween to 0.5 in the timeline it completely skips over it and goes to 1. This happens when I manually set the value to 0.5 - Even without Labels it refuses to work. I have 3 buttons, so I want them to trigger to 0, 0.5, and 1. Console logging the progress confirms this is where the 2nd button should go. However, it goes to 1 no matter what? Is it rounding up? Testing with 0, 0.33, 0.66 works but that is not the correct position. Thanks in advance for any suggestions.
  8. Hello, I'm looking to use the Next and Previous buttons to scroll to the Next and Previous .desktopContentSection element. In the codepen, I have the Next button linked to #green and Previous buttons hard coded to #red to demonstrate the behavior, however after the element has scrolled to #green, if the Next button is clicked again the user is scrolled to #pink and then #blue. I'm thinking I would need to utilize Observer, but i'm struggling looking for an example I can adjust for my needs. Any assistance is very much appreciated, please let me know if you need anything from me. Thank you!
  9. Hello everyone, I have a task to create a banner like next: https://www.moxionpower.com/industries/ I've tried, but it isn't work fine.
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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
  15. 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?
  16. 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?
  17. 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.
  18. 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
  19. 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
  20. 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!
  21. 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!
  22. 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 :)
  23. 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!
  24. 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>
  25. 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.
  • Create New...