Leaderboard

Hello @Solbeg What Mitchel said actually isn't 100% true - ScrollTrigger does have a built in porperty to match cases like yours, where you are pinning the parent element of your trigger element multiple times - it's the pinnedContainer property. This is from the ScrollTrigger docs: pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers (added in 3.7.0) That should fix your issue without a lot of custom code, but instead handled by ScrollTrigger internally (gotta thank GreenSock for that). Does this work better for you? https://codepen.io/akapowl/pen/ExGEBpm

Hi and Welcome to the GreenSock forums, Thanks for the demo. It seems you might want to take a few steps back here and get 1 card to flip the way you want before you worry about a lot of cards or even hooking up ScrollTrigger. Here's a demo from one of my courses, perhaps it will help you get your cards setup in a simpler fashion https://codepen.io/snorkltv/pen/VwKGVjb?editors=0010 And to add ScrollTrigger you can do something like this https://codepen.io/snorkltv/pen/gOZWaQj?editors=1010 Hope this helps. If you want to learn GSAP inside and out, check out my complete GSAP course bundle, it will guide you through all this and so much more.

Hi and welcome to the GreenSock forums, Typically it is best to provide a minimal demo showing what you have attempted. This way we can help guide you. However, I had recently shared this demo with my students, perhaps it will help you get started. https://codepen.io/snorkltv/pen/QWJNmQb?editors=0010 If you need help learning ScrollTrigger be sure to check out my comprehensive GSAP training.

Hey, as promised here is my approach (only thing left is some match media stuff, to catch mobile users and adjust the sizing). codepen Unfortunately, I had to rewrite it a bit because I couldn't find a circle image for my mask-image and uploading assets is a codepen pro feature.... In the end I could have used a clip path, but I wanted to stick with what I already had, would probably have been the same result. It would be interesting to know which approach is more efficient (probably someone knows it and could enlighten us), but I will leave it for another day until I notice some issues. @Rodrigo nice catch with the quickTo(), didn't even notice they weren't using it . Hope this helps someone in the future and as always feedback is welcome.

Hello Elicrespo. I don't think any of this is GSAP related - it's more about SVG, layout in general and CSS styling. We actually like to keep this forum focussed on questions about GSAP, but here are some pointers. If I am not mistaken, you don't see the 'orange' ball because it is set up as a mask - technically it isn't orange at all. I can not give you a proper explanation for this, but if you want it (the mask) to show what it does the other sections, you will probably have to give your .svg_40vh a background-color - in the fork below, I added the same as is on your ._100vh Maybe the MDN docs can help understand better. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask It is not - your SVG sits on top of it - you said it yourself here: For it to be clickable it is not important that the SVG sits on top of it - you are not somehow replacing your OS's mouse-cursor by moving around an element to imitate cursor movement. And actually the SVG sitting on top of your div is what makes your div not clickable because it now sits between the actual cursor and the div that you want to click on, so the OS's cursor's clicks can not get through to that element. You can see that by right clicking the area you want to click and select 'Inspect element' (or something along those lines) and it will make dev-tools pop up and in the DOM structure tree show you which element it is you have selected. To work around that problem, I set pointer-events to none on the whole SVG via CSS in the fork below, and only set them to auto on the elements that you actually need/want pointer-events - i.e. your ._100vh elements. I hope that works more like you had in mind. If you have any more GSAP related questions, let us know. https://codepen.io/akapowl/pen/xxmOoPa

I would look in to the Observer plugin and watch for pointer and touch events. Then onDrag on the X axis use the scrollToPlugin to scroll to the amount dragged. Here a quick setup, the drag direction probably needs to be flipped and you probably want to find a good number to multiply the move distance by, but this is a quick working example. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYbMRNp?editors=0011

Just wanted to comment here. I had a video that was transparent and in the webm format. Had to use some different settings in ffmpeg: ffmpeg -c:v libvpx-vp9 -i ~/Downloads/Transparent_video.webm -movflags faststart -crf 23 -b:v 0 -c:a libvorbis -g 1 -pix_fmt yuva420p output_transparent_video.webm Had to use a different video codec that supported transparancy (libvpx-vp9) and insert it before the input, and the pix_fmt has to be yuva420p not just yuv420p Hope it helps someone! Thanks for all the info in the thread everyone.

I heard you liked .forEach() loops, so I put .forEach() loops inside your .forEach() loops. This is just a scoping issue and getting all the p elements on the page first and then do all the logic in the forEach fixes this. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxmPPQB?editors=0010

@IndM, Thanks so much for sharing that link. Much appreciated. It feels like observer may hold the key. The @GreenSock function in the "Solution" pen only appears to work at 100vh with a trigger position of "top top". I've forked the pen, changed the div heights to 50vh, and changed the trigger position to "bottom center". You can see that you are able to scroll past the trigger point if you use enough velocity (and the animation also jumps on completion): https://codepen.io/SeeMax/pen/bGOYrvK Ultimately I just need the animation to play once on scroll up so I simplified things much further. I created a pen that doesn't utilize pinning or the end value. The key is indeed the code quoted in the original reply. onEnter: self => { self.scroll(self.start + 1); masterTL.progress() < 1 && scrollObserver.enable(); }, That locks the screen on trigger perfectly and then the timeline onComplete fires scrollObserver.disable(); to allow scrolling again: https://codepen.io/SeeMax/pen/zYyPEVP I wanted to write all that out in case someone comes upon this and finds the explanation useful for their needs. But really it's a long winded way of saying: Thank you so much @IndM, you were spot on. The GSAP forums always come through. Cheers.

Hello there. A way to get working what you intend is to change the eventListeners from the canvas to the window e.g. - because when it is on the canvas, pointer events will not get registered if your h1 e.g. is sitting on top of your canvas. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener change the values used in the eventListeners from e.offsetX/e.offsetY to something else like just e.x/e.y https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event Also - if you are going to use this in any form, please make sure to mention the original author of the code. He's the one who put in all the time and work into this - and he chose to distribute this for free. All he's asking with the license model he chose, is for people to mention where they got the code from - but sadly that apparently already is a step too big for people to take, in the vast majority of cases. Good luck with the project. I hope this will help. https://codepen.io/akapowl/pen/qBLPypG Edit: Since this ended up in the Jobs & Freelance forum but got replied to without the intent of that forum (and by now likely solved), I'm going to move it to the general GSAP forum, as this might be of interest for others at some point, and will probably be easier to find there; even though this doesn't make use of GSAP in any way.

Welcome to the GSAP forum @thetobiterra If you're speaking of the scroll-driven animations apple appears to be using a lot (which look like you are scrubbing through a video on scroll); they usually do not use a video as direct source for those afaik but instead a split up sequence of images (where video probably is only the source for that). There is a rather popular forum thread about that type of technique - and it appears to be linking the images directly from apple's website; so you could have a look on that. Considering this from apple's perspective though, I'm not sure how happy I would be with all that extra traffic. Just maybe one thing to keep in mind when linking directly to sources on other people's servers. If you're having trouble seeing through all those posts within that thread when trying to re-create things, you could have a look at this thread, where I explained the approach of that technique, a bit more isolated. Good luck!

There are call backs you can use. I've add them to the stagger (as an object) and now it will run the onStart code each time a stagger starts. I've given each action a data attribute data-color="colorOfSection" (I've just copied the same color over and over again, but you'll get the gist). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYMjGNW?editors=0010

Yes, that's completely normal. The reason it must do that is because modern browsers introduced individual transform components which can interfere with "normal" ones. For example: /* standard */ transform: rotate(45deg); /* newer alternate */ rotate: 45deg; For maximum compatibility and performance, GSAP always uses "transform" (only). But imagine what would happen if you had CSS like this: .box { rotate: 45deg; } And then you do this: gsap.to(".box", { rotation: 90 }); Which would result in the inline style like this: <div class="box" style="transform: rotate(90deg)"></div> Great, but now it has a "transform" inline, AND a CSS rule that says rotate: 45deg. DOH! What's the browser supposed to do? Combine/Add them together (135deg)? Completely ignore one of them even though they're different CSS properties? Browsers are notorious for making those decisions differently, so for example maybe Chrome would have the transform override the rotate, and Firefox may make the rotate override the transform. And maybe Safari would combine them. So we add those inline styles to ensure complete uniformity and compatibility. Does that clear things up?

Hi @JPM82 nice job, it is looking good! If you want to pin something instead of true you could also set an element to pin. I've wrapped your elements in a div called .pinMe and set that as the pin, now everything inside .pinMe will get pinned and you will not see the space created by ScrollTrigger (which is needed for the effect to work). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/OJrjVPK?editors=1000

Hi @sarneeh welcome to the forum! There was too much going on in your demo for me (it was not really a 'minimal'), so I've moved it to a codepen and started fresh from there. ScrollTrigger can only ever be on the timeline, not on individual tweens of a timeline! Also you hardly need more then one ScrollTrigger to get the desired effect. Here is an example that just uses the normal scroll of the .paragraph. Then in the timeline I check if the .paragraph has met the trigger and then animate all the .line elements on the x axis with a stagger and then also your highlight animation that starts at the same time as the previous tween with a delay of +=0.3 seconds For now I've just set the background fixed with CSS, but this could also be done with ScrollTrigger pin: ".background" if you want to release the background when the ScrollTrigger is done. Side note: Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBLjLQp?editors=1100

No problem, always happy to help if I can. For this I would probably get rid of the masterTl. You could use the onComplete property to start the second timeline. https://codepen.io/alig01/pen/WNLjJeB?editors=0010 I run the first timeline only once to avoid the scrub effect when scrolling back. If you want to keep that, it wouldn't be easy to reverse/pause the infinite timeline to make everything look fluint, especially if the user scrolls to fast back. Or maybe I'm not aware of something, as revert() would be too abrupt and reverse() only works if the user waits for it. So custom logic would be nesesarry to catch every use case. Maybe a few more circles could be added to the path, but I'm not quite sure what refinements end up being important. Also, for future readers who want to combine/customize svg paths, there is a super useful tutorial by @PointC that explains each step. Hope this helps

Hey, I tried it earlier and this is the outcome. I wasn't completely satisfied (but I couldn't look further), although I think it's close enough? I hope at least I got the direction right ^^ https://codepen.io/alig01/pen/yLGbVoK?editors=0010 Tried it first with normal text outside of the SVG to animate it with stagger, but the spacing between the letters got lost and found a few threads to solve it, but it wouldn't have been worth the effort (for me ). Hope this is what you are looking for and good luck with your project

update. I did end up making a complete tutorial on this effect and it's on YouTube: Here's the finished demo too: https://codepen.io/snorkltv/pen/poxvOLL/36e8db0379aa8cbac7608b0ff0d1f46d

You can set overwrite: true, in your tween, so that it will overwrite current tweens already playing. https://codepen.io/mvaneijgen/pen/gOZWbJb?editors=0010 I don't know what you mean with the following

Welcome to the forum, BeEnder. That is because: You didn't include the pinnedContainer property as I mentioned above would be neccessary on any subsequent ScrollTriggers in the same wrapping element. You are using older versions of GSAP / ScrollTrigger (3.11.4) that might have had issues with pinning at some point. The current versions are 3.12.2 I updated to the latest versions and added the property as mentioned above and it looks to be working as intended. https://codepen.io/akapowl/pen/zYyZVyK

@Toso has a great idea. I found this interesting so I did this with a clipPath on a group. I'm just animating an orange rectangle's scaleX inside the clipped group. https://codepen.io/snorkltv/pen/gOZmQVZ?editors=1010 If you need help hooking it up to ScrollTrigger and making it work with that curve going down, it's going to be a bit more work, and not something I can do for you, but hopefully you've got some ideas now to get started.

You definitely shouldn't be calling contentHeight() on every resize because that's creating a duplicate tween and ScrollTrigger every time, so they're fighting with each other. And you're baking the initial height into the "end" value, so it's not getting updated on refresh. So just change this: gsap.to(container, { y: () => -(height - document.documentElement.clientHeight), ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: () => `${height}px bottom`, // <-- changed to a function! scrub: 1.5, invalidateOnRefresh: true } }); Since invalidateOnRefresh is true and it uses function-based values, those will get re-invoked on refresh. If you still need help, please make sure you provide a minimal demo that clearly illustrates the issue, like in CodePen or Stackblitz.

Welcome to the GreenSock forums, @Wolfcoding The actual source of your problem, is that you are pinning the parent-element of both the elements that you have ScrollTriggers on - thus they will both be inside the same pin-spacer element created by ScrollTrigger. The pin-spacer actually is the one thing that can make subsequent ScrollTriggers aware of prior pins - but if they both are in the same one though, that can't work as intended. ScrollTrigger does have a built in property though to adapt to scenarions where pinning is done like you do - pinnedContainer If you're going to pin that parent element of both those elements at some point you will have to make sure to set that element in that property on any ScrollTriggers subsequent to the pinning one. This is from the ScrollTrigger docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger I hope this will help. https://codepen.io/akapowl/pen/PoXWLbd

Hi, If I understood the problem right then this is the problem. In the given code: - In CSS the visibility is set to hidden to the main class. But in Js its never set to visible. - From tween been used from Autoalpha 0 which is making them hidden initially. And this has been applied to the individual chars not to the parent. These two things were messing. Solution: - In CSS add "visibility" and "opacity" to "hidden" and "0" to the ".txtMain" and ".txtMain2". - Using GSAP ".set" make it visible using "autoalpha" to the ".txtMain" and ".txtMain2". Here is the code. https://codepen.io/tripti1410/pen/eYbgpEd Hope it helped!

Hi @GeorgeErshov, First of, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Second, you're on the GSAP forum, so you'll get GSAP solutions. I've swapped out your text splitting plugin and have used our own SplitText plugin. On my screen, your text element was around 800px in width, that didn't seem right, and that was indeed the case. Swapping out .offsetWidth with .scrollWidth got me the right value. I've set the duration to 10, so we can see what is happening when there is no ScrollTrigger (I've also swapped out your "0" position parameter with "<"). I've set a stagger to the .char elements to animate in with a duration of 0.3 (you can tweak this value to your liking) and set the stagger amount to the duration of the first tween. There is also some CSS I've changed, so that the letters don't get cut off. https://codepen.io/mvaneijgen/pen/qBLqvVx?editors=0011 Then if you want to do this on scroll it will be just a matter of turning on ScrollTrigger again. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dywOrej?editors=0011

No problem always happy to help if I can. Another option you could try, would be the following: Use gsap.set() to center your x,y values so that the timeline doesn't start in the upper left corner (It's always important to get everything in position before you animate). Once your own scrolling threshold is reached, use xTo() and yTo() to move the clippath to the center. Control only the radius in your timeline, as you already do. This way the animation will be more smooth and feel more natural, at least for me. It is worth mentioning that there is also the .invalidate() method, which clears any initialization data. Edit: Something like this, I replaced the approach of step 2. with the onStart function of the timeline. Since we only control the radius and no --x, --y values, there shouldn't be any conflicts (maybe my assumption is wrong). codepen If you move your mouse and scroll at the same time, than the clip-path grows in place instead of moving towards the center. Hope this helps and good luck with your project

Hey, just my 2 cents. Wouldn't it be better to reveal the image from the position the mouse is currently at? You're letting the user explore the image, and the area they're most interested in would be where their mouse is right now. So why not expand the clip-path from there? This would remove a lot of custom logic and simplify the implementation. And if you still don't like it, at least you would have a good working code base for further changes. Start simple and increase complexity instead of juggling too many things. My approach right now would be to: Fork your current codepen so that your current progress is not lost. Remove anything unnecessary. Keep the mouse movement logic. Create a simple timeline with scrolltrigger that increases the radius. Edit: Also I wouldn't control the same element with two different timelines. Instead just use one. Look in the docs for how to position animations in a timeline. There is also a helpful interactive demo to visualize the parameters https://codepen.io/GreenSock/pen/PopXddg Also you retrieve the wrong properties from getBoundingClientRect() (doc), sectionWidth -> width. My bad, I didn't look closely enough ^^

Are you trying to do this?: https://codepen.io/GreenSock/pen/dywORRK?editors=0010

To me my example seems pretty responsive. It isn't that animating properties like left are inherently bad, so if you know what you're doing go all out! But my instinct is to gravitate to the transform properties. Welp, that is was what I also tried to figure out, here is my new version. Again as stated before it takes me around 10 versions to work out all the bugs and I'm not trying to implement this in to my own project at the moment, so I don't know what else you're going to find when implementing this in a 'real' project, but that is what Codepen is great for. Just keep forking and at some point you'll find a way to fix all the bugs. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwERBdP?editors=0101

HI @staticdyn welcome to the forum! Check out this amazing tutorial by our own @Carl Hope it helps and happy tweening!

Hi @Buro 3 welcome to the forum! Then it sounds like it is not a GSAP issue. When having a quick look at your live site, I can see a lot of transition properties in your CSS that are not scoped (eg they not target one particular property, but target all CSS properties), please read the following. It also looks like there is a smooth scroll library active on your site, but that isn't in your demo, so this could also cause the issue. My advice is disable big chunks on your live site until the issue isn't active any more and then slowly enable things again, so you can pin point what the culprit is. Hoop dat het helpt en veel geluk! Als je het hebt gevonden en er nog steeds niet uit komt post het dan hier dan kijken we graag mee!

Yep, just a scoping issue, but luckily there is a gsap.utils to help you! check out the gsap.utils.selector() to scope your elements the the current forEach() Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEVobGz?editors=0010

Great question. I've thought a LOT about this and on the surface it seems like a great idea, but consider the following: The more modular, the less cacheable and "packagable". Currently, the "gsap" core object is super capable and robust. It has things like gsap.to(), gsap.timeline(), gsap.utils.*, gsap.ticker, gsap.globalTimeline, eases, etc., etc. Everything is very reliable, consistent, and ever-present. Load one file, and BOOM, you've got a ton of power at your fingertips. GSAP has been standardized on almost every ad network on the planet so that its file size doesn't count against ad budgets. Just one CDN had over 13 BILLION requests for GSAP in a single month. If we busted everything apart into little modular pieces, that might be nice for build tools but it'd be terrible for CDNs and browser caching. Please read this article: There are lots of inter-dependencies in the core. For example, tweens get put onto a global timeline, so you can't effectively separate Tweens and Timelines. Various internal functionalities rely on some of the utility functions. Another example: gsap.matchMedia() is insanely powerful but it requires some very deep hooks into the core that affect a lot of little pieces, so it's just not feasible to pull that out into its own little modular chunk unless we degraded performance by adding a bunch of little optional hooks and callbacks elsewhere in the core to bolt in the logic in the rights spots. It just made a lot more sense to bundle that functionality in the core. Better performance, and overall less file size as a whole. Performance or file size can sometimes be improved by reusing internal variables and chunks. So if they're all busted apart into their own little independent modules and then you try to put them together, you may end up with a larger file size because of the redundancies. For example, a lot of the easing functions are dynamically built using some helper functions that piece them all together. If they were all separated out, they'd each be bigger independently. Merging them results in overall file size savings if you're using more than a couple of them. It'd require a BIG change to the API. Again, you couldn't just rely on gsap.to(), gsap.from(), gsap.timeline(), etc. - we'd have to create little independent exports like Tween, Timeline, etc. that you'd import which may work well for build tools but then what about people who load GSAP over a CDN? We could try to put the most common things into a "gsap" object, but again, the overall size would likely be larger for that and then it'd get more clunky API-wise because the code itself would look different if you're using a bundler/ES Modules vs doing a standard <script> load from a CDN (like Tween(...) instead of gsap.to(...)). Historically, we've put a huge priority on consistency and ease of use. It goes counter to that if ES Module code looks different than UMD code. A lot of people have invested time into learning GSAP over the years and feel comfortable with the API, so switching things up like this could be quite jarring. Developers often think of file size in a way that's not very helpful or accurate. They simplify it to "bigger is always worse", but forget about caching or runtime performance tradeoffs or code clarity/portability/compatibility. They're quick to sacrifice all that other stuff in order to gain an average of maybe 10ms extra up-front load time...ONCE in their entire app/site. Even if it means their runtime animations bog down in the browser or their code can't be used in various other contexts. It becomes all about the initial file size hit rather than more of a holistic approach that considers all those other factors. We've already taken a modular approach in terms of GSAP "plugins". The features we deemed critical, we put into the core and then we wrap less commonly used features in plugins. That keeps file size down. I know it's easy for other newer libraries to tout small file size as a benefit to try to appear "better" than GSAP. And I have nothing against any of the other libraries in particular - use them if you like, but beware of the tradeoffs because they'll rarely mention them and we try not to talk too much about them because we don't want to seem like we're insulting the hard work of other library authors. Another way of looking at it: would you rather spend an extra 8ms (or whatever tiny fraction of a second it'd take to load GSAP by your average user) once on the initial load for an entire site and get all the rich benefits of GSAP including all the functionality and runtime performance or sacrifice that for the difference in load time that virtually nobody would notice? All that being said, we'll certainly be looking for ways to increase modularity and minimize file size in future releases. ✅ And again, it was an excellent question. Thanks for giving me a chance to blabber on about it a little bit.

For a progress bar I would approach it this way: Creating a separate scrolltrigger that depends on your timeline, in your case the sections. gsap.to('progress', { value: 100, ease: 'none', scrollTrigger: { scrub: 0.3 } }); and add this or another div in your html: <progress max="100" value="0"></progress> See ref:

Your expertise was invaluable. Thank you for helping! This cat is for u! ≽^•⩊•^≼

I came to the same conclusion, what was trowing me off is that a lot of divs don't have a proper closing tag. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/wvRPzey?editors=1000

Hello there. Sounds to me like you want to just pin it with pinSpacing set to false (?). You'll find more information on those properties in the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/akapowl/pen/bGOYwqv

I noticed several problems: You've got a 3rd party library that's applying a CSS animation that's interfering. Specifically, the animate-fade-down class. You're using a setTimeout() for some reason (typically it's better to use gsap.delayedCall()) and you didn't do proper cleanup of that timeout id. Remember that React calls the useEffect()/useLayoutEffect() TWICE in strict mode, so you're creating duplicate calls that are creating duplicate animations. You weren't adding the Flip animation to the context. Remember that it'll only record animations that are created DURING that gsap.context()'s function invocation, but you're delaying them for 2 seconds, so they're not happening during that invocation. Just use the .add() method to add them. You're making DOM changes that affect more than just the .flip-container element. You should include the other element(s) in your Flip animation and getState() too. https://codesandbox.io/p/sandbox/sweet-water-h898lt?file=/src/pages/Home/index.jsx:9,33 I hope that helps.

Hi @DonDraper and welcome to the GreenSock forums! That most likely has to do with the calculations being made for your smooth scroll functionality and the pin space added by GSAP in order to pin the horizontal section. Maybe try using the refresh event handler to update or re-create your smooth scroll: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() Also maybe take a look at this codepen by @OSUblake https://codepen.io/osublake/pen/QqPqbN Unfortunately we don't have the time resources to provide this type of help, especially since GSAP already has a smooth scrolling plugin, ScrollMoother: https://greensock.com/scrollsmoother/ @akapowl, one of the forums superstars, has created some great examples for integrating ScrollTrigger with other alternatives like Locomotive: https://codepen.io/akapowl/pen/wvJroYy And this using smooth scrollbar: https://codepen.io/akapowl/pen/poeoONq Finally you could check Lenis: https://lenis.studiofreight.com/ Good luck with your project. Happy Tweening!

pinSpacing: false is what you're looking for. From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger I've also subtracted the height of the .aside container from the end trigger, so that it perfectly lines up. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWoadYq?editors=0010

That is totally fine, but it is easier to tackle one problem at a time. We need to learn to walk before we start sprinting! So the text animation is working as intended? As I stated before you're better of removing ScrollTrigger and focus on the animation at first, this counts the same for the layout with CSS, you're better of removing GSAP and focus on your layout at first. This is what the layout looks like now without any JS code, I've used some CSS grid logic to have the background and the text stack on top of each other. I've wrapped your image in a container and set object-fit: cover to it (background-size: cover; only works on background-image: url(img.jpg)); and I've commented out some properties, which where not necessary. https://codepen.io/mvaneijgen/pen/gOZRVzQ?editors=0010 If that is looking great we can focus on the animation/ScrollTrigger again. There we use .actual-section as the trigger, we've moved the start points to the top of the browser and we pin the .background when it starts. This should get more and more like you want things to look right? https://codepen.io/mvaneijgen/pen/WNLOVEB?editors=0010

Hi @mvaneijgen thanks for your nice and prompt answer! The matchMedia() looks promising Update: The first implementation looks good. Will have to make more adjustments to see if it will work in the bigger context and the edge cases. Thanks again! Update2: Works like a charm Thanks @mvaneijgen!

Hi, Another alternative could be to use the onLeave callback in ScrollTrigger in order to animate the text as you need. @nico fonseca created this awesome example some time ago: Here is an isolated codepen of just the circular text (again all the credit is for Nico): https://codepen.io/rhernando/pen/mdGzwQV Hopefully this helps. Happy Tweening!

Hi and welcome to the GreenSock forums, It seems you found a demo from my ScrollTrigger Express course (38 video lesson) where I teach all the necessary features of ScrollTrigger. This demo is part of a 5-part video series that goes over every line of code. The reason why the images aren't fading is because you have the animation set to be controlled via scrubbing (scrub:true) but your start and end values are identical so there is no distance to scrub. //bad start:"top 50%", end:"top 50%", //better start:"top 50%", end:"top 40%", Here is the modified demo https://codepen.io/snorkltv/pen/XWoMpdb Frankly I'm not a fan of scrubbing through opacity changes like this as the user can stop while the image is only partially faded in and it looks bad. I prefer controlling these animations with toggleActions which force the animation to play through in both directions as the trigger enter and leaves. https://codepen.io/snorkltv/pen/zYyZNBv If you need more help understanding the basics of ScrollTrigger and GSAP check out my complete GSAP course bundle. I think you will find the lessons extremely helpful Good luck on your project! Carl

Hey, I have used both Swiperjs and Splidejs in production and both worked well with gsap for my requirements at the time. Swiperjs you will need to set the virtualTranslate parameter to create custom slide transition and Splidejs has its own transition component which you will need to register. Both have their pros and cons, so you should take a closer look at the documentation to see if they cover everything for your use case. Also, since Swiperjs is more popular, there are more articles/tutorials/workarounds on how to use it, so this should also be taken into considuration. Therefore, I would more tend to recommend Swiperjs. Here's a little example @Carl posted a while back. https://codepen.io/snorkltv/pen/XWBNJjK Hope this helps and good luck with your project

That is a testament to getting a second set of eyes on a thing being the right call! I didn't even think to see if it was running as a conditional even though it was right there in my question. Jack, you are a Superhero indeed. Thank you for that! Now to fork and continue on.

Hi, As the person who created that demo originally, I think it's a very solid base. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 I really don't know what you mean by "it doesn't respond well". Perhaps you can be more clear. the getScrollAmount() function gets called when the window is resized or the ScrollTrigger is refreshed. Those values are neccessary for all the configuration work to happen. You most likely should not delay those calculations. If you need more flexibility look into gsap.matchMedia() as it will allow you to run custom code when you hit certain break-points in browser size and do whatever cleanup or configuration you deem necessary.

Hello again Bjarne. It definitely is - you just need to put in some time, first and formeost to get an understanding of how things work. I see in your demo, that you tried to do something like this: Arch.setAttribute("x-271", p.x); Arch.setAttribute("y700", p.y); That will not work, because there are no attributes on SVG named "x-271" or "y700". The attribute you will need to change is the d attribute that has all the path data. You already found out by yourself that you needed to set the p.x in one place of that path data and the p.y in another - so good job on that 👍 Now you will just have to make sure to keep that whole string of the d attribute but only change the values in those places needed. For that you could either 'break up' the string in the places you need and feed in the numerical values you got in the right spots via concatenation... Arch.setAttribute("d", 'M100, 100 A671 671 0 0 0 ' + p.x + ' ' + p.y); ...or you could use a template literal / template string to achieve basically the same. Arch.setAttribute("d", `M100, 100 A671 671 0 0 0 ${p.x} ${p.y}`); That would then result in what you probably intended to do, right? Make sure to have a thorough look at the ressources linked. Even if they might be overwhelming at first, they will for sure be helpful for you going forward. https://codepen.io/akapowl/pen/qBLRrLG

Hi, Here is pen I created some time back for the same effect. This might not be the perfect one, but you will get some idea. https://codepen.io/tripti1410/pen/QWJvxRE

The way you center the elements causes the transform origin offset. translate(-50%, -50%) makes the transform origin to be offset by that amount. So if you want to use this the transform origin should be "0 50%" https://codepen.io/mvaneijgen/pen/bGOeXMv?editors=0010 Here is a version that uses CSS grid to center the elements, so you don't need to make your elements absolute with an offset of 50% and then translate them back again to -50%. Not really a GSAP issue, but here you go. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjwKgmY?editors=0100