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 folks, GSAP is epic, thanks for making it! First time posting here but appreciated these forums for a while now. I am posting because I have a slightly odd problem I can't seem to nail down. I have created a custom scroll bar that is linked directly to the scroll position with a linear ease. The issues is it isn't acting linear. As the circle moves from section 1 to section 2 it is slightly early. Moving from section 3 to section 4 is slightly late but the start, middle and end points are bang on. Very confusing. Anyone know why this might be happening?
  2. Hey guys, I am trying to tell a story which can be achieved through simple slides and carousels, but I want to add some life to it. I came across a page that does exactly what I am trying to do - https://www.prevint.pt/. Fell in love with this implementation. From the source I can see that it has a wide <ul> with 100vw <li> sections and on scroll the <ul> is translated left ( amount = width of section ). Seemed life a fairly straightforward situation and I am sure that this page is using GSAP. But I am unable to figure out few things: Should I use any third party scroll library along with GSAP to do horizontal scroll ( as in the reference site there are no scroll bars ). Animate the<ul> to translate left on first mouse-wheel event and ignore subsequent mouse-wheel events until animation/transition is complete. Controlling/Scrubbing the slides with the custom navigation at the bottom( but that's secondary concern here). I have tried different approaches but none of them could do this. The attached codepen is the basic one with snapping sections but they don't snap immediately 😕. Can someone please point me in the right direction. UPDATE: Attached codepen with the solution.
  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. Hi guys, my first post here ^_^, I tried to animate on `x` axes and it works ok but I want to make this animation better. I am quite lost because to achieve such thing I need many marker "start&end". https://codesandbox.io/s/nextjs-global-css-migration-forked-6psms?file=/pages/index.js:138-200 I know that my markers are messed up but I want to achieve 2 things: 1. At the moment my animation works only 1 way "when scrolling from top to bottom" - I want the animation to happen in both ways... how is possible to tell "end" to become "start"? 2. `left-col`, `middle-col`, `right-col` are under 1 `section` and when the animation `start` hits the `section` the third/last `right-col` could finish till it gets there. - I would prefer the animation to `start` when the view port hits `right-col` not `section` (`snap: 1 / 2,`) works but sometime is quite slow and animation and `snap` is not in sync. looks like something is missing. I don't think my GSAP code is clean, feel free to delete/simplify things if required Any guidance/support will be much appreciated!
  5. Hi All, I am trying to animate something using scroll trigger (minimal reproducible example in codepen link ). I want to scale the circle to 1 when scroll progress is 25%. And for that reason I tried setting the timeline duration to 4 and the animation duration to 1 but it doesn't work. It still takes the full progress of the scroll trigger to make it scale to 1. Your help is highly appreciated. Thanks Edit: Codepen doesn't seem to be working. Here is a code sandbox instead https://codesandbox.io/s/gsap-scrolll-blimx?file=/src/App.js:0-1097
  6. Hello, I am currently trying to activate a CSS change with ScrollTrigger. The website is also using LocomotiveScroll and it appears that the markers aren't displaying when I have LocomotiveScroll activated. The same behavior can be seen in the codepen attached. Removing the lines of code responsible for LocomotiveScroll, that is line 2 - 5, makes ScrollTrigger work properly, having LocomotiveScroll included however causes the markers to disappear. This is the most minimal example I could make, that shows that behavior. I have found a few posts here with similar problems however most of these could be resolved with something in the sorts of ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); Sadly, this doesn't resolve the issue for me. Maybe I forgot something important as I am relatively new to the ScrollTrigger library. As I am not sure if this a LocomotiveScroll or ScrollTrigger side problem, I am posting this problem here, too Thanks in advance, Max
  7. Hi there, I am fairly new here, but quite exited about gsap. I am working on a page that uses several scroll trigger to handle some pinned sections. All these scroll triggers handle the same set of circles to animate between different positions. I have set this up in a way now that these circles spread over the width of the page in the end. If I scroll slowly, this works fine. However, if I scroll quickly to the end, they all snap to the 50vw x-Position of the page. I don't know why this happens, especially not why this only happens on quick scrolling and works fine on slow scrolling. I also noticed this stops happening when I change the mid section scroll trigger to not use scrubbing, so although this happens in the last section, the issue also seems to be connected to the ScrollTrigger of the previous section. How could I fix this, so that it does not jump anymore and spreads the circles across the page reliably with the last ScrollTrigger? Thanks a lot! trych P.S.: I have read the Most Common ScrollTrigger Mistakes article, but none of the measures that are described here seem to help in my scenario.
  8. https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/
  9. I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
  10. Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M.
  11. Hi everyone, I would like to reproduce the Apple AirPods effect of this pen with ScrollTrigger: https://codepen.io/j-v-w/pen/ZEbGzyv Here is an example made with scrollMagic: https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 Can you help me join these Pen by using the new scrollTrigger Plugin? Thanks so much
  12. Hi, I am trying to add a small delay to the start my ScrollTrigger timeline with scrub. Basically as soon as the pin starts the opacity begins to fade, I would like a small delay before that happens. My current solution is to use an empty tween ('.empty-tween' is not a real element) at the beginning as shown below. However, I thought this looks/feels a bit inelegant and was hoping there was a better solution. timeline = gsap.timeline({ scrollTrigger: { trigger: '.logo_block_content_block', start: 'center center', end: '+=100%', scrub: true, pin: 'body', pinSpacing: false } }) .to('.empty-tween', {opacity: "1"}, "scene-0") .to('.example', {fill: "#F5F5F5"}, "scene-1") .to('.example1', {opacity: 0}, "scene-1") .to('.example2', {fill: "#1C3661"}, "scene-2") .to('.example3', {fill: "#6fc4c2"}, "scene-2") .to('.example4', {fill: "#6ab651"}, "scene-2") Many thanks, Liam
  13. I am having an issue I have seen described in other contexts but haven't found a solution for. My project is using the Next.js framework for react, Smooth Scrollbar, and ScrollTrigger. I have a .to() with a scrollTrigger object inside that is in a <Navigation /> component. The text at the top of the page is just supposed to pin itself and scroll with the window, but it only works in some cases. I think I'm not fully understanding some lifecycle thing here. All these methods of reproducing my errors are also commented at the top of the index.js file in the sandbox With Smooth Scrollbar enabled, the scrollTrigger object stored in the <Navigation /> component, and the <Navigation /> component imported and nested in the main functional component, the effect does not work after refreshing the page. If you go into the scrollTrigger object in the <Navigation /> component and update one of the values (change the 'end' value to a different number) this will trigger a hot reload without refreshing the browser. If you scroll back to the top and scroll down, you will see the effect is now working. If you comment out the entire useEffect() hook in the main index.js component this will disable Smooth Scrollbar. If you save the file and refresh you will see the effect working as intended, without having to trigger a hot reload, but now there is no Smooth Scrollbar. If you reset the sandbox to the original state, uncomment the HTML in the main index.js components return, comment out the <Navigation /> component right above it, save and then refresh, you will see that the effect works on load, with Smooth Scrollbar, without having to trigger a hot reload, but now I've lost the ability to nest components. CodeSandbox link Direct link to results in browser (A little easier for refreshing) Any help would be greatly appreciated. I'm out of ideas at this point.
  14. Hello! I need your help. I had difficulty writing a JS code for changing the background. I have only two colors, it's black and white. The first section should be black, the second section is white, the third section is black, the fourth section is white and so on. At the same time, I want the background to change smoothly when scrolling down. As it happens now for the first two sections. Is it possible to do this?
  15. Hello Dear GSAP Community, Could someone help me to achieve cool effect in my codepen? As You can see there is image of blue bubbles which I want to rotate. This is description what I would like to receive: - The image has to react on scroll speed and direction. The faster You scroll, the faster it is spinning, also with differend spinning direction. It is already working. - When page is not scrolling the image is rotating itself, but it direction of rotation is dependent from last scroll direction or rotate right, when first time on page and not scrolled yet. You will see this effects but bugged. There is no smoothly change animation, but its reset when stop scrolling. So, those animations are there, but they are not cooperating with each other and probably they won't work due to way I wrote there. Is it possible to make it work? I hope everything is understandable.
  16. Dear GreenSock community! I am currently working on a project with a horizontal parallax. Each "scene" needs to be in full width and height of the viewpoint with a static background and up to 3 "objects" within this "scene" that just slightly move horizontal with different speed on scrolling, so that it creates kind of a depth effect. I already built this by using rellax library and it worked pretty well, at least while using a modern mouse (Magic Mouse etc) without a physical wheel. My client is using a mouse with a wheel and this is causing the scrolling to be very faltering. I tried to combine my first attempt with several scroll smoothing libraries, nothing worked. So now I completely rebuilt this by using GSAP and ScrollTrigger. In general, the scroll smoothing works now with all kinds of mouses, which is great! BUT: I can only get the objects in the very first scene to move. In all other scenes, the objects do not move. I spent hours on this but can't get it run properly. I really hope to get some feedback on this issue from the community. Thank you in advance!
  17. I have a site where the homepage is stacked sections HTML tags. Ideally I wanted each vertical section to vertically snap when a person got close and in most situations, the content fits within the screen. In the sections (rows in graphic) where there are multiple blocks, this is where I need the screen to vertically pin or snap and then it sideway scrolls between each slide (horizontally snapping) and then releases at the end and vertically scrolls to the next section. For the most part, I have it working but the CSS scroll-snap-type: y mandatory; (on html) and scroll-snap-align: start; on each #structure content section is vertically snapping which is great. I have a probably not that great working GSAP sidway scrolling which when it hits the end quickly jumps to the next vertical section before the viewer can look at th content (very sensitive scrolling). The issue is that when scrolling down or up, sometimes the screen literally goes crazy and the page starts jumping all over the place. Seriously bad. As soon as I remove hte CSS scroll-snap elements, it works again but the vertical sections do not snap which I need. I am hoping that I could use GSAP to do the vertical snapping but so far I cannot find a working version were setting vertical snapping between sections and the occasional horizontal scrolling via GSAP Scrolltrigger. I'm also hoping that there is a way where I do not have to set the width of the sideway scroll and it could detect the number or slides x the width and do that dynamically. I have attached a Codepen with as much as I have and I know with probably a few lines or tweaks it will work. Sorry for the verbose description. I'm trying to be informative as possible. Thanks for any insight in advance. It would be soooo good to get this working. Cheers Murray
  18. Hi! I'm working in a page that should have a crossfade effect when trasitioning from one section to the next, while also have some animations on each section when they are pinnned. I understand that the usual way of setting up such a page is to use position: absolute; to overlay each section and then just control the visibility of each through alpha/opacity using the ScrollTrigger plugin. Unfortunately this would be fairly complicated to set up in this page and as such a last case resort. Is there any way to achieve such and effect without relying on absolute positioning? At first I thought I might be able to pin an element, play all animations of the section, and then "re-pin" it with pinSpacing: false, let the next section come under the current pin (possibly manipulating the z-index of each section through .set( )), and then do the fade. No luck so far though. If I could have both the padding of pinSpacing: true and after that the overlay effect of pinSpacing: false, I could probably figure out the rest. The anexed codepen just give you an idea of the document structure and will likely serve as a base for further discussion.
  19. Hey, I have a strange letter spacing after timeline animation in Firefox browser, I read a lot about this issue and font-kerning is solution for this, but not in my situation. So try to hover first paragraph in Firefox browser and see the changes, there will be wrong spacing. I have attachment how it looks like on my side after hover. If try to change font-size to bigger size it's kind of okay. But I need 18px) Firefox version 88.0, OS version 10.12.6 Sierra (maybe because of it this issue appear, can't check it) Can you help me, please? Thanks in advance!
  20. Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
  21. Hi everyone, first of all I want to say thank you for this great library! It is really easy to start with it an build great effects Now my question. I have setup a simple example here https://codepen.io/Ogod/pen/abprgQp?editors=0010 Basically all images are arranged in a "gallery". The animation should move them from their calculated starting position to their target position. The animation works really fine on scroll but when the window is resized the images are not aligned correctly anymore (x, y and scale are wrong). So I tried to set invalidateOnRefresh to true and use function based values in the calculations. But then the animations breaks: - the opacity is completely missing - the starting positions of the images are initially missing, they just appearing at the right position when the animation starts after resize: - the starting and ending positions are wrong (images are not aligned correctly) - the animation seems to play backwards when I scroll down, so the images are animating from small to big (to their starting position) instead of big to small Any ideas what is wrong with my animation and invalidateOnRefresh? Thanks for your investigation
  22. 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 with MatchMedia, but it's global and is interrupting other animations that are happening on-screen while the body size is changing. What's the best (and more "componentized" ) way to recalculate the trigger when its position changes like that? Note: I don't think it's necessarily relevant, but we are using React in a sort of unique set up... we are working within a modular CMS, so each module is its own React app, similar to how the Codepen is set up. Much thanks!
  23. 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
  24. Hi all. I have a situation I am trying to understand hoping to shine some light on calling functions from within Greensock. I have a page that has a fixed page header nav bar (#structure-header). The page has three (at the moment) vertical sections (in #structure-content) and as I vertically scroll through them, I would like to ideally have it trigger a check on when each section gets to the top of the page and check if there is an attribute called 'data-header-nav' on that section tag. If it has it, add the value of that attribute as a class to the structure-header div. I was also thinking, if a person scrolled back up to the previous section, would it remove the class and revert to the previous one? Any help would be greatly appreciated and would help me understand how to call function code from within GSAP (if that is the best way to do it ofcourse). Cheers Murray
  25. Thanks GS team for providing the Keeping ScrollTrigger same progress on resize codepen. How can I adapt this part of the code for multiple ScrollTriggers? ScrollTrigger.addEventListener("refreshInit", () => progress = ST.progress); ScrollTrigger.addEventListener("refresh", () => ST.scroll(progress * ScrollTrigger.maxScroll(window))); I have 12 ScrollTriggers set up, and they are all set up anonymously, like this: gsap.timeline({ scrollTrigger: {... How can I reference and update the progress for each one? I'm hesitant to rewrite them with separate, named timelines, because I noticed that when I crated the scrollTrigger separately for one of my animations using the create method: ScrollTrigger.create({... ...and passed in my timeline, the start/end triggers were in the wrong spot. (Even though it was written in DOM order, and ST.sort() was applied, the triggers were still appearing far too early). I'll also be using matchMedia. And, is there any advantage to using a function like: end: () => innerHeight * 4, instead of: end: innerHeight * 4, Many thanks!