Jump to content

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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. Hello, I'm new to Greensock and I'm loving it however I have hit a blocker and wondered if someone can help on the 2nd panel with the map, it should stop and reveal 4 map pointers and text, then carry on to the 3rd panel. I can get this to work on a vertical scroll see codepen link
  2. Hello guys!! First of all I have to say how happy I am to finally overcome my fears and get to try the famous 'gsap'! Thank you for your hard work!! Now onto the issue.. Sorry I didn't know where else to grab some help.. I want to implement it in a client's project inside Webflow, and I thought I was doing good but.. Expected output: Taimen logo (#taimen) on first scroll will just be resized to ~300px and after this, scroll continues normally. Ideally no position changes. 1. When serving it from my node/localhost the script loading was instant, but now that it's served from the cloud there is a weird jumping, I think probably after the ScrollTrigger is connected? 2. Although it does somehow works , when opening and closing the .nav-expand from hamburger menu, which is also controlled from gsap, the the resizing of the logo after the scroll and the whole .nav makes a weird flashing/jumping. PS: is my approach to the resizing of the logo on "first scroll" correct? (in case the approach is correct, I can't seem to solve this case: when user has scrolled and the logo is resized - if user clicks the hamburger menu there is a severe white space which breaks the layout (image attached). Probably due to pinning?) Argh. Feeling so lost here. Site link (made in Webflow): https://cfv2colstarter-ba45ccc944d42500d90b08c7.webflow.io/ CodeSandbox (for gsap - they are connected): https://codesandbox.io/s/taimen-jn3rn6?file=/index.js (Inspiration https://www.stord.com/ (but in my case I need only the 1st scroll))
  3. Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks
  4. Hi, i want to achieve this, from the beginning the screen should look like this both greensock and right side greensock will be shown then normaly data changing while scrolling the end of the scroll i want this, Somebody help. I'm stuck on this while..
  5. Hi, I am new to GSAP. I try to do overlapping setions with menu. Everything works like I expected expcept menu anchor links. If I am on the top of the page and I click on some link. everything works perfect. Problem is when I am at the bottom of the page and I click on some link in the menu. It takes me to the right section but this section is overlapped with section before. My idea was somehow reset or unpin section when leaves from the viewport, but I cant find the right code for it. I tried to find any solution on forum, but all topics what I have found solve more complex problems, but none can be used for this easy task. Thank you for your ideas.
  6. there are five content horizontal sliders in the design, i want to achieve this, like each slide become active the round shape will rotate clock-wisely, after scroll up it'll rotate to normal state. Ive tried my level best, but couldn't figure it out. I'm a noob in gsap and js. hope some one helps me.
  7. Hello all! It's been a while! I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of 😀 I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part). The difficulty comes when I have an interactive component above the carousel, like an accordion. When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap. I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck. Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet? Steps to replicate in codepen: 1. Click on any item in the carousel 2. Scroll to bottom of page. The carousel works fine, providing no accordion items are open. Any help is appreciated, thanks!
  8. Hey guys! I reused an animation based on snorkltv to have a rotator attached with the ScrollTrigger, but I'm having some issues with the scroll. I can't find the bug, but my issue is that scroll is blocking (I can't reproduce the exact time or behavior), and the animation obviously stops working. I leave here a video and the Codepen to show them, as usual, thanks in advance for your help! 🙂 🙏 scrollvideo.mov
  9. Hello, Can you tell me if it is the best way to play the animation with Scrolltriger, gsap and react. Is there another way to acheive this ? I have attached a codepen demo. Thanks in advanced
  10. Hey, pls help me in a scenario like if I scroll fast then I miss the text and it jumps to the next section. It should always show the text and image swapping section should be in view when user scrolls again. I am sharing a demo here.
  11. I tried to copy this site's first three cards scroll effect with ScrollTrigger plugin, but I have some problem with the "start" 、"end" option, and they move to fast, how to change it to implement this effect? Thanks!
  12. I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically. When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once. I read the DOC, but I didn't get anything, maybe I didn't read it correctly for(let i = 0 ; i < heroSlides.length ; i++){ tl.to("#Tear",{ delay: 0.3, duration: 0.5, attr:{d:heroSlides[i].path,}}) .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`}, delay:0.75, },"-=0.3") .call(changeBoxes, [i],"-=0.4"); } const scroll = ScrollTrigger.create({ trigger: ".module", pin: true, scrub: true, start: 'top top', end: "max", animation: tl, // markers: true, pinReparent: true, fastScrollEnd: false, }); scroll.scroll();
  13. I would like to get help, on how to slow down ScrollTrigger fromTo animations. The goal is to increase the duration of the animations (and the positon of the last fromTo), and this will make the animations slower. Since scrub turned true (to control the animation with the scrolling), the duration property does not have any effect. What am I missing? Thank you in advance for your help! tl = gsap.timeline({ scrollTrigger: { trigger: '.feature-holder', scrub: true, pin: true, pinSpacing: true, markers: false, }, }); tl .fromTo( '.feature-overlay', { autoAlpha: 0, }, { autoAlpha: 0.25, duration: 3, }, ) .fromTo( '.feature-text', { autoAlpha: 0, y: 5, }, { autoAlpha: 1, y: 0, duration: 1, }, '>', ) .fromTo( '.feature-text', { autoAlpha: 1, }, { autoAlpha: 0, duration: 1, }, '>+=10', );
  14. Hi, Greetings to all with my first post ever in this mighty forum! I am trying to create a scroll effect where a list of image cards grow as they're scrolled up. The max height for each card will be the same ( determined by the image element wrapped in the container) and will be reached when the card reaches to the center of the screen. The initial height for each card on page load will be determined by their order in the document flow and the relative distance to the viewport center. Here's a mini demo I created that does an acceptable job in carrying out the desired effect, a few things that need fix: 1. the janky feel i put the demo list in the scroll smoother starter codepen and since scroll smoother uses scrolltrigger under the hood, i wonder if there's anything i need to take care to coordinate with the scrolltrigger instances i create for my animations. 2. the image flash It must be something related to refresh or update that i have messed up Besides direct fixes, I'd also hope to get some high-level clarification regarding the thinking when assessing implementation ideas for animation with gsap. My feeling is i'm not taking advantage of what it has to offer which causes repetitive work in my code when things are better off left to gsap's magic under the hood. To get there surely requires more time writing code in general, and likely a few dozens, if not more buggy demos here too. Until then, I'm hoping for some generous tips. Looking forward to any response and thank you so much in advance for your time!
  15. Hey, Love your work Greensock! I need a little guidance/ advice The animations work as intended, the issue is regarding the text inside the left hand image panels; specifically their behaviour when scrolling up the page. Effect is best seen on larger screen sizes I'm using css flex & position sticky to "stick" them to bottom of their parent, greensock just reveals them at the correct time. All works on the way down, but as you scroll back up weird things happen to the positioning of the element. I'm hoping somebody has a simple solution, as it is very close using this approach. Alternatively could use green sock to also handle the pinning Many Thanks
  16. Hi community, once again I wanted to use your universal and broad wisdom. I have multiple sections following each other with different heights and each of them can have a background image. This implemented as a direct child, is positioned absolute, has the size of the section and, of course, has a background-image set. This image's position can vary, depending on what the user selected in the backend. What is now relatively tricky for me is to use each section as the actual container where the bg image parallaxes in. So not the whole window but only the current section's height should be used. I found this demo this demo to start off with: https://codepen.io/GreenSock/pen/QWjjYEw and I adjusted it to the version you see now at the end of the post. My questions now are: 1. How can this work with multiple sections as the reference container? 2. How can this work with different bg positions? 3. Why do I need the ratio calc in there' Wouldn't the acutal height of the section suffice? Hope it's clear what my problem is and looking forward to your ideas! Have a nice one!
  17. Hey, https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97?editors=1010 Based on the case below, I tried to build a custom scroll bar for a scrollable element with fixed sizes. It works ... But if you change the window size, if the scroll progress is not equal to 0 or 1, then the drag function is disturbed. https://codepen.io/mikeK/pen/c889651f79b9848c71f4a918e94471a8?editors=0010 What am I doing wrong? Mikel
  18. hello everyone, i have created this codepen to swap text in the sticky box for each sections. and used scrollTrigger for each. if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts. thank you.
  19. Hello, everyone! My problem is when I scroll camera works good but closer to the end its stopping moving smoothly. At the video I will show how its should work I was inspired by this web-site :)) And as I said, I have some little problems.. This how is working right now: Sorry for music :))))
  20. I'm currently working on a freelance project, and I happen to run into a bug when I used the scrollTrigger function. Whenever I scroll to this section on Chrome, there seems to be a flickering light that shows up in the viewport. Not sure what's causing this glitch as it doesn't show up on similar websites that have the same implementation. Any thoughts on how to get this addressed? I've inserted a photo of the code I used below:
  21. Hey The problems: -when I scrolling, and after the text appear there is a black screen is showen - after blue div the image that I zooming in is showen what I'm expecting: - scrolling to zoom image - text appear with the video playing - scrolling horizontally to reach red div - scrolling vertically to reach blue div Thank You in advance!
  22. Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of the section. I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward. Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well. Thanks in advance. Cheers Murray
  23. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  24. I have a progress bar and I want it to become full in 15 seconds but empty in 5 seconds
  25. Hi, I'm new with GSAP and its forum and as part of my learning path I'm building this accordion element that use ScrollTrigger to close accordion items while scrolling. It's working perfect except that the pin-spacer create a white space after animation that push my footer down. I'd like to know if there is a way that I can get it off that white space and put my content all together finishing the scroll in the footer. Any help will be appreciate Thank you