akapowl

Hello there. I am no React expert, so I won't be able to help much with that side of things, but here are some things I noticed. 1) From what I can tell you from a quick glance, there appears to be something wrong with how you're setting up locomotive-scroll, since you are creating multiple instances of it (possibly because of the double-call shenanigans of React ?) - I suppose that will create conflicts with ScrollTrigger - not saying that this is the only or true source of the issues you are facing, but to me that definitely something you might want to fix. 2) I'm not sure how much this following does affect things, but the fact that your ScrollTriggers are being created, before your locomotive-scroll instance was created, doesn't look right to me either - it should be the other way around; first the locomotive-instance should be created (with the relevant ScrollerProxy etc.), then the ScrollTriggers. 3) One thing that I can tell for (pretty much) sure though, is that ScrollTrigger, but at the very least ST's pinning, will not work properly with locomotive's data-scroll-section attribute, which you appear to be using. Locomotive-scroll will apply transforms to that section for the smooth-scrolling effect when you use it, which will interfere with what ScrollTrigger does to that section. In a smooth-scrolling scenario as such (using transforms), the pinType will have to be used as 'transform' to create the pinning-effect; but those transforms applied by ST will probably contradict with the transforms locomotive-scroll applies to that section. See the problem? When that attribute is removed from your Section component things at least appear to be working better. https://codesandbox.io/s/broken-flower-qnzb6v?file=/src/components/Section/index.jsx Yet, things stop working again as soon as I disable StrictMode for React. Which I think mioght be because of the order of creation not being correct, as mentioned in 2) I hope this will help a bit with getting things sorted. One more thing: I just now realized, you are using locomotive-scrol v4 - they made some changes to how loco-scroll works, which also affect how the ScrollerProxy needs to be set up. That's also something you might need to consider.

This older thread might help. https://greensock.com/forums/topic/19507-trying-to-replicate-menu-link-animation-effect Keep in mind though, that this forum is not actually intended for "how do I recreate this cool effect I saw on another site?" tutorials. Since the examples in the linked thread are using an older version (TweenMax), here is a link to the migration guide, that should help you migrate things to GSAP3. Good luck and happy tweening!

Ah, I see. In that case, I would probably just create a timeline set to be paused, and then tween the timeline's progress to 1 over the course of 2 seconds. Would that work for you? https://codepen.io/akapowl/pen/ExpoyKx

Just adding a quick example: With the duration of a tween being 0.5 seconds and a stagger amount of 1.5, you would have a total time of 2 seconds everytime, no matter how many elements you have. https://codepen.io/akapowl/pen/QWBaypw

Hello there and welcome to the forum. Unfortunatelly, with the way ScrollSmoother works, it is impossible to implement a feature that would make the browser search work as in a native scrolling environment, as there is no API that could be tapped into. That is a downside, that most smooth-scrolling libraries bring with them.

Welcome to the GreenSock forum @cobble101 If you would like it to happen for each panel, move the part that is responsible for the fade-out tween into the forEach-loop (after the pinning ScrollTrigger), and follow the logic it had before. I.e. the element you tween on being the panel and the trigger element being the next panel, which you can get via panel.nextElementSibling before the pinning ScrollTrigger is set up - if you get it after that, the panel will not have a sibling, as it will be inside the pin-spacer element. Then you might have to also add a check (e.g. wrap the fade-out ScrollTrigger in an if statement) on wether a next sibling element exists in the first place (and maybe also wether it has the class panel) and you should be good to go. Give it a shot, that should work the way you intended.

Hello @ale269 Here is what the docs of the CSSPlugin say about perspective on 3D Transforms Also; when you are going to transform an element in a way that it will change its dimensions (especially the y dimension, in case of vertical scrolling) on the page, you shouldn't use it as the trigger element for your ScrollTrigger, as it will llikely throw of the start and end of the ScrollTrigger in comparison to what you would it expect them to be - better use a wrapping element as the trigger instead. Is this more in the direction of what you wanted to achieve? https://codepen.io/akapowl/pen/PoBORGR

Because you can not access pseudo elements just like that via JavaScript (which probably is one of the reasons the CSSRulePlugin exists to begin with). You can try logging out document.querySelector('.line::before') // returns null and you will see that it returns null . So you can not use it as a trigger for your ScrollTrigger as it is invalid, and thus ST will likely default back to using the body as the trigger-element, which is why the animation play, because its top is past the bottom of the viewport already.

Hello @RaddyB - welcome to the GSAP forum. You should just target each item you create individually, instead of targetting the whole ul container element. // targets your container element, so the whole container element will be animated gsap.from(".toDoContainer", {duration: 1.5, x: -400, ease: 'power2.inOut', opacity: 0}); // targets the item you create, so only that element will be animated gsap.from(item, {duration: 1.5, x: -400, ease: 'power2.inOut', opacity: 0}); Is that what you wanted to go for? https://codepen.io/akapowl/pen/poZewzP

You can set an endTrigger element, as described in the ScrollTrigger documentation, @Adesh - e.g. the container wrapping your text-elements on the right side. Then you'll need to set the end according to that element, which will likely be 'bottom bottom' in the case mentioned above, so when the bottom of that element hits the bottom of the window - btw right now you do not have an end set at all, only the start twice, so that might be something you'd want to change. endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

Hey there. As long as you've got objects with numeric values (like you do, using blotter.js) you should be able to tween on them directly via GSAP. This bit here is from the getting started article: What else can I animate? [...] Any numeric value, color, or complex string containing numbers GSAP doesn't need DOM elements in order to animate properties. You can target literally any property of any object, even arbitrary ones you create like this: let obj = { myNum: 10, myColor: "red" }; gsap.to(obj, { myNum: 200, myColor: "blue", onUpdate: () => console.log(obj.myNum, obj.myColor) }); Just hook it up to a ScrollTrigger and you should be good to go (I know you've used ST before, so I'm going o leave that up to you ) https://codepen.io/akapowl/pen/oNMBWRO

Hello Gareth, 1) If you want to specify things on the ScrollTrigger attached to a tween, you should be using it as an object and have all the vars relevant to the ScrollTrigger inside that object gsap.to("#intro", { scrollTrigger: { trigger: "#content", start: "top top", end: screenH, scrub: 1, pin: true, }, opacity: 0, }); 2) Currently you don't have an element with the id of content in your HTML - because the element that you likely meant there has an # in it <div id="#content"> <-- bad <div id="content"> <-- better

I already did.

That's because in this new (not very minimal) demo now you are using the body element as the relevant 'scroller'. ScrollTrigger will use position: fixed by default for pinning when the body is the scroller element, butposition: fixed on elements inside a container that has transforms apllied, i.e. the container added by smooth-scrollbar that is relevant for smooth-scrollbar to work, does not work as usual, since the context for the fixed position changes. The solution is to set pinType to 'transform' on your ScrollTriggers, so pinning can work in a smooth-scrolling environment. pinType "fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP).

Hello @Adesh Your problems do not look like they are related to GSAP, but to your lacking setup for smooth-scrollbar.js to work properly instead. While your scroll-container is the element with the class .body, you do not apply styles neccessary for it to work with smooth-scrollbar in your CSS. I just quikcly added some styles and it works now - but I give no guarantee that this is the way you should be doing it. Please check their documentation for how to properly set it up. Hope this will help though. https://github.com/idiotWu/smooth-scrollbar https://codepen.io/akapowl/pen/bGjBEdO

That is because now you have the pinSpacing set to true for the purple section, thus the page's layout (managed via the pin-spacer element ScrollTrigger creates) will now respect the distance you are pinning and accomodate for that (meaning it will seamingly 'push down' subsequent content) whereas it doesn't do that for the other sections - and you need that for this section. The layering effect on the other hand (which I think you are referring to when you say snapping - the term snapping actually refers to something different in the realm of ScrollTrigger / GSAP) relies on pinSpacing being set to false there, so you have to work around that somehow if you want to achieve that effect for after your fake-horizontal-scrolling section. That's what I meant by this: So when the distance of your tween's ST is 1000px e.g., the distance for the pinning ScrollTrigger should be 1000px + the window's height; i.e. 1000px for the tween and the window's height for when the subsequent section comes scrolling-over. And for it to come scrolling-over you would also have to... [...] because due to the pinSpacing otherwise it would come into view only when the purple section unpins. All good, and glad to hear that this is helpful to you. If you don't have any experience whatsoever with ScrollTrigger / GSAP thus far, this already is quite an ambitious task to delve into, as you are trying to combine multiple different concepts into one working scroll-driven layout, so naturally this is quite a bit to take in; and it takes some getting used to.

That is because the pinSpacing is set to false - as I said above, you need to set the pinSpacing to true for the section that you want the horizontal-tween on. Here is how you could do that using a ternary operator that checks if the panel in the loop has a certain class, e.g. gsap.utils.toArray(".panel").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: panel.classList.contains('purple') ? true : false // <--- }); }); https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Then as I said, you could do something similar with regard to the end, because as I mentioned, the end for that section will need to be different from all the other sections' end. Also, the other ScrollTrigger I mentioned (the one that is responsible for the tween only) should not be pinning, since you are already pinning that section. The way you have it set up now, you are creating conflicting behaviour. And although I'm not quite sure what you were trying to accomplish with that last part (the array of '.panell'), I would suggest scratching that part, as I don't think it will help but also only create more conflicting behaviour.

Welcome to the GSAP forum. It would be best to start with thinking about what logically needs to be different from the example you posted to achieve what you described. In the example you posted, the panels are being pinned without pinSpacing for the layering effect - for your fake-horizontal-tween section you will need pinSpacing, though. Also in the example you posted, the distance between start and end is 100% of the viewport's height, since no end is specifically defined - for your fake-horizontal-tween section you will need to calculate how long that distance needs to be. Basically the distance will have to be however long you want that tween to be scrubbed over, plus e.g. a window's height which would make space for the layering effect after your done tweening horizontally. Then, since you need to have pinSpacing active for that, you will probably have to somehow re-position the panel following your fake-horizontal section to allow it to scroll-over the fake-horizontal section, e.g. via a margin-top of -100vh (i.e. a negative value equal to the distance you added to the pinning-distance as mentioned before). You could probably still handle the pinning inside of the forEach loop (via usage of ternary operators for specifying alterations for your fake-horizontal section) but you will very likely have to set up a seperate ScrollTrigger for the scrubbing tween only - because you need the tween to be scrubbed over less distance than you are pinning the section, i.e. the 100vh mentioned before that make the difference here. You see, there are a couple of things you need to take into account - but these pointers should be a good starting point to give it a shot yourself.

The answer very likely is: That's a bad idea, since all the heavy work ScrollTrigger does will be done on refresh, which is why it's mostly only called 'automatically' by ScrollTrigger on load and on/after resizes. This is thread has a more profound answer, that I got when I tried to do something similar to that with smooth-scrollbar.js... ... that was before ScrollTrigger.scrollerProxy() was added to ScrollTrigger (you can see mention of it further down in that thread) - which is what you are likely looking for if you want to hook up ScrollTrigger to your own smooth-scrolling script.

Hey there! I'm not 100% sure either about what it is you ary trying to do... ...but this doesn't sound like you need ScrollTrigger for that - I might be misunderstanding though. If you want to animate something whenever flickity changes slides, you might want to have a look at their events instead... https://flickity.metafizzy.co/events.html ... probably something along the lines the example in their docs shows. // vanilla JS var flkty = new Flickity( '.carousel', { on: { ready: function() { console.log('Flickity is ready'); }, change: function( index ) { console.log( 'Slide changed to' + index ); } } }); ...because if you create the array with all the elements once on load like you do, it will of course only have the elements that meet those requirements on load; it can not know about any elements that will be meeting those requirements in the future.

Hello there, if you only want to disable it once it has reached its final position, you could just set once: true on the ScrollTrigger. https://codepen.io/akapowl/pen/ZEjOaBg If on the other hand you only want it to scrub in one direction to begin with, here's an example that shows how you could achieve that, leveraging the onUpdate callback of a ScrollTrigger. https://codepen.io/GreenSock/pen/abZjjNr

Hello there, have you seen the React + GSAP guide ? Your problem seems to be related to the double rendering that StrictMode does from React 18 on. A solution to this should be to use gsap.context() including cleaning things up properly. https://codepen.io/GreenSock/pen/xxWRjyq

Hello @bntratox, scrub is what you are looking for instead of toggleActions From the docs: So when you set scrub to true on a ScrollTrigger, it will stretch out the entire linked animation between the ScrollTrigger's start and end, and thus advance the progress of the linked animation with the scroll-position in between those points on the page. This section here explains in a bit more detail how that interacts with durations of tweens, which will be helpful to know when you e.g. want to wok with timelines: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub Some little sidenotes: markers belong inside the ScrollTrigger object, not on the tween For ScrollTriggers there is no stagger setting - this would belong on your tweens - but since you are using a forEach loop, stagger actually wouldn't make much sense anyway because you will always be targetting a single element When using booleans (true/false) as 'values', they do not go in quotation marks, and... ... stagger does not accept booleans to begin with. You'll find more information on how to use stagger here: https://greensock.com/docs/v3/Staggers https://codepen.io/akapowl/pen/wvxMKKZ As you can see, with scrub the animation will only advance in one direction though. So if you want to reverse it later on while scrolling in the same direction, you have different options. In your case, a repeat on the tween with yoyo and repeatDelay could work: https://codepen.io/akapowl/pen/abjdvdW Alternatively you could set up one more scroll-triggered tween to 'reverse' things later on with the start and end of the ScrollTriggers set as needed - in this case you would also need to set immediateRender to false on the latter ScrollTrigger though, because otherwise you'd run into some slight logic issues. https://codepen.io/akapowl/pen/poZgjyJ Or last, but very much not least, use a timeline and position your tweens on there appropriately by e.g. making use of the position parameter. https://codepen.io/akapowl/pen/WNKrQGe I hope this will clear things up a bit - altough it's a lot to take in. Especially the use of scrub with timelines, the concept of how drations work with scrubbed ScrollTriggers and the use of the position parameter on top of it, can be sort of hard to wrap around. But once you get the hang of it, you'll feel your animation superpowers go to over 9000! It just needs some getting used to - and a bit of practice. Happy scrolling! One thing I missed: By default, gsap will set an ease of 'power1.out' to every tween, so if you want any scrubbed tween's progress to advance absolutely in sync with the scroll-progress, you will need to specifically set ease: 'none' on that tween.

With the setup as it is in any of the demos above, probably not. First you'll need some sort of way to target any specific character on hover - for that, I would suggest having a look at SplitText, which is a Premium Plugin for Club GreenSock members of the ShockinglyGreen tier and above, so you might want to consider joining the club. Of course, you could somehow try splitting your text into individual characters yourself by wrapping each character manually, but SplitText will spare you quite some time and headache - plus you will get support for it here, whereas that likely won't apply to issues with your own implementation or a 3rd party script. If you have the basic setup done you will need to adjust the ScrollTriger logic to accomodate for those changes AND to work alongside some logic you'll need to add for the hovering of a character. Instead of tweening on a clip-path via ScrollTrigger, you could e.g. tween on the color of each individual character in a staggered manner (this will not result in the exact same effect you see above, but it should generally be pretty similar) and then maybe add logic for overwriting tweens on mouseenter/mouseleave of any specific character to change its color when hovering. If you have any GSAP specific questions along the way, please make sure to create a new thread with a minimal demo of what you have tried. Good luck and happy tweening!

Hey there, alternatively for a case like this, where you only need that one value to change (and if you don't need support for old browsers), it might be feasible to just set up your clip-path with a CSS variable in the place of the value you want to tween on, and then tween on that CSS variable instead. https://codepen.io/akapowl/pen/poZJENZ