Jump to content

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

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. Hi there! We just completed a major site redesign featuring ScrollTrigger in several modules. It's been awesome, thanks to all involved in making this happen! One issue that came up is illustrated in the Codepen. We have a few modules that "expand" with interaction, like the green Module 2. The horizontal scroll module works great, but if the module above is expanded, it throws off the start/end positions of the trigger. My initial solution was to add a resizeObserver on the height of the body, that would trigger a window.resize event. This was effective in conjunction
  2. Hey! So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker gets past the center. My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets past it? I hope my question was clear
  3. Hi all, I have created a timeline with some labels, when I created a nav links that when the link clicked, it will scroll to the selected label. I tried using tweenTo, which it's able to go to the selected label, but when i tried to scroll from the current position, it goes back to beginning, and not continue from the current position, is there a way to resolve this? The goal is, when i click on a link, the animate will scroll down/up to the selected label, then when I continue scrolling manually, it will continue from the current position, btw, I'm using GSAP 3, I tried to look se
  4. Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks
  5. Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
  6. dear greensock, I am making this post in the hopes that someone can help me with this issue. seems absurd that i am making a post since I have been seeing this effect everywhere, but I cant' seem to make it work on my code. Im tried to reproduce the error inside a codepen I hope that helps So basically there are two things that i am missing: One: once the horizontal scroll is over, I want it to continue to vertically scroll through the rest ( the third panel, which is exactly like the first panel). What happens now is that even though the horizontal wrapper is pinned, it c
  7. I've been trying to implement Gsap with ionic & angular and it seems like just don't work https://lampdigitalcol.web.app/666 https://stackblitz.com/edit/gsap-scroll-trigger?file=src/app/app.component.html Does anyone have any idea of why is this happening?
  8. I'm trying to recreate The Weeknd website Scrolling effect, I have written a working gsap code but I just cant crate that IMAGE CLIP EFFECT when u scroll enough that Image will pass by u. in my code, it's just scrolling and zoom but on Weeknd website, it has the effect of zooming and the image will pass by u, I'm trying to create that effect but right now I don't know how to hide an image when it becomes full zoom.
  9. I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd text block) will fade up with 100% opacity and the opacity of the previous text block(1st text block) will decrease. When the third one will be active (visible via scroll), the first text block will vanish from the screen and the opacity of the second text block decrease . Note: By default, there will be only one active text block. But afte
  10. As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I? But back in 2017 I've made an animation that comes very close to what I want to do now: https://dumbo.design/airberlin (the laptop mockup as chapter intro) The difference to wha
  11. Hello Guys, I am a newbie to this awesome scrolltrigger plugin. I somehow managed to get it worked the way I wanted but I am stuck at the very last part. As you can check in the below example link the entire block shrinks and move on x axis at start and at the end I want it to come back to center and become the normal size but it is not happening smoothly. You can check live example here: https://algobulls.netlify.app/ecosystem-2/ Sorry I cant upload Codepen as I am not able to replicate entire thing there. I request you guys to please help me
  12. I am using Gatsby JS and initializing smooth-scrollbar within a layout component and I've also configured the scroller proxy. Within a child component, I'm trying to setup an animation using scroll trigger but I'm not sure how to configure this. Also, the config does work after HMR fires but not after page refresh. I removed most of the markup from the page as I know the animation works - I think the issue is with syncing the scrollers. layout.js: import React, { useRef, useEffect } from "react" import Navbar from "./navbar" import { gsap } from "gsap"; import { ScrollTrigger }
  13. Whenever you scroll I am making a function to play the video. The video is playing rough, how can I play it smoothly? I think I should use "scrollerProxy", but I don't know how to apply it.
  14. Hi, I got two problems when using Scrolltrigger pin. 1. Pinned elements have same trigger and start but the position of the markers are not the same (.photo is not correct). 2. When resizing the browser, the position of .yellow is not correct. how to solve these problems? Thanks!
  15. Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can h
  16. GreenSock


  17. Hello! First of all, I must say that I am absolutely loving ScrollTrigger, thank you so much! I have a div that pins to the top right portion of my page when it reaches the top and stays there unless it is scrolled by again. This div also contains filters that will hide/show content below based on what is selected. Because of this, I believe I have to run ScrollTrigger.refresh() to update the elements (I am lazyloading images using ScrollTrigger.batch()). When refresh runs, my pinned div falls behind the navbar and doesn't reappear until a scroll takes place. It also ca
  18. Hello Gsap, First, you guys are amazing and love every topics of it. Here is my issue: In Nuxt.js, scrolltrigger works perfectly fine on first load but when navigating between pages, i need to refresh the browser everytime for scrolltrigger to work again. Gsap and scrolltrigger are properly registered and my animation is in a mounted () hook. I believe it is something to do with Scrolltrigger.refresh or update() or kill() with the instances hook of Nuxt.js but cant figure out my head around this problem despite my research. Is
  19. Hi All, I need your help to understand how I can build this kind of effect. The idea is quite simple, on scroll the viewport move along a big comp (gallery) but I don't know how to start :-/ Can you help me on this ? Thanks a lot scrollview.mp4
  20. We have a react application that makes heavy use of GSAP & Scrolltrigger which is showing some inconsistent behavior and we need to fix it within a short timeframe. Payment is project-based with clear set of tasks -- the priority is for the Scrolltrigger issues, although it would be great to get assistance more generally. We have no idea how long this will take, we do have a project budget, so please give us a flat bid for just fixing the Scrolltrigger/React issue or for general help. We can also share the code with you, nothing fancy, if that is helpful before you determine your bid. Tha
  21. Hello everyone, This is a reformulation of a topic that I created a few days ago. I am creating a new one here because I think it is more a ScrollTrigger+React-related problem and that it might benefit from being referenced as such. Context There are two consecutive "sections" that are both a 100vw/100vh. Each section is a React component (in the CodeSandbox below, they're called respectively WorkOverview and HomeAbout). They both get pinned one after the other. Problem The second element gets pinned too early, exactly as if the padding of the firs
  22. I build an intro animation in which at some point a 'curtain' parts and gives way to the page behind. So far so good. Now i want to pause the animation sequence before opening the curtain and give the visitor a chance to scroll open said curtain. (If she doesn't do it I'll have play it independently.) As I have little Experience with scrollTrigger and the final setup is quite complex I would like to hear your advice: The Setup: The curtain (for now and good reasons) has position fixed and ist exactly the size of the viewport. The page under is has in
  23. I'm trying to port over my site calexo.co from ScrollMagic to ScrollTrigger. The hardest part to port has been the product section, which works as follows: Parent wrapper set to pin at "top top" its children are the products. Each products position is set to absolute, that makes them stack on top of one another. Additionally each product has two timelines each: one to animate in/out images/copy another to animate copy bubbles (see calexo link) To achieve this in scrollmagic I would use the "offset" property. So the first product and i
  24. Hi Community, iam new in GreenSock GSAP and my question is maybe fixed in few seconds. I have a timeline, so that every animations starts with the end of the previous, this all works perfectly. Now i want to give the class .services a scrolltrigger so that the animation start when the element is in the viewport - i implemented in the timeline, but i dont know if this is correct or how i can do this. All approaches are welcome - if you can tell me whats the best solution for that, it would be great. Thanks in forward Martin
  25. Hello everyone, Just a quick question to know if when killing the ScrollTrigger instance, it's normal the markers are left on the page? This seems weird since when refreshing (resize or manual) the markers do repaint if there has been a change... Thanks!