akapowl

The way I see it, the positioning of the leaves is being done once in a loop for each of the leaves in a gsap.set() call, which is totally independent of the timeline, based on a random progress variable, that also only gets populated/overridden once for each of the leaves when things are being set up. That progress variable will never again change, once all of the leaves are processed in the loop. Also will the leaves never be .set() to a different position than they were before, so a repeatRefresh will do nothing much here, I suppose. Since the position of the tween for each leaf on the timeline would then of course change (because it is dependent on the progress variable's value), I think repeatRefresh is not the way to go here anyway. Although I might as well be wrong with that, I think you might have to clear/invalidate the timeline every other repetition, do what is neccessary to randomly reposition the leaves (visually), and then re-create the timeline's tweens, with the tween for each leaf positioned on the timeline with respect to the new random value you assign for it. Since that example is rather complex and it is kind of hard to see through all the logic from outside, especially with an otherwise cluttered mind, all that is nothing I can do for you though. Maybe I'm even totally wrong and somebody else can offer a better viewing angle on this.

Welcome to the forum @Its_Frostz. I think you were on the right track, already. GSAP applies a default ease of 'power1.out' to every tween - if you want a linear movement on your tween, set the ease to 'none', that should help with what you are experiencing. If it doesn't, please provide a minimal demo, that demonstrates your issue. I hope that will already help you, though. gsap.to('.thisOrThat', { rotation: '+=360cw', repeat: -1, ease: 'none'}) https://greensock.com/docs/v3/Eases

Hello @fcdobbs Instead of values in your motionPath object, just use path and you seem to be good to go. // motionPath = gsap.to(p, {duration: 1, motionPath:{type:"cubic", values:stem.motionPath}, paused:true}); motionPath = gsap.to(p, {duration: 1, motionPath:{type:"cubic", path:stem.motionPath}, paused:true}); https://greensock.com/docs/v3/Plugins/MotionPathPlugin https://codepen.io/akapowl/pen/vYzBJxq

Hello @Romanus You have your timeline set up to repeat infinitely into the future. When at some point in time you tell gsap to reverse that timeline, it will reverse it with every repitition that was played up until that point - so I do think it's behaving just like you tell it to. What you could do instead of reversing it in your example, is to e.g. tween the time to 0 via tl.tweenTo(0)to make it go back to its initial position. https://greensock.com/docs/v3/GSAP/Timeline/tweenTo() In that context it might also be helpful to get familiar with the different variations of time measured by GSAP, like e.g. .time() vs .totalTime(). https://codepen.io/akapowl/pen/NWLKgyQ

That looks to be the same problem, as in your last thread, @Manvel. You forget to load the Plugin - in this case, the CustomEase Plugin. Here's a CDN link for you: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/CustomEase.min.js It also looks like you are loading ScrollTrigger twice - I'm not sure that is neccessary. Loading it once should be enough.

If I recall correctly, ScrollTrigger's snapping never worked with locomotive-scroll due to locomotive-scroll's method to 'set' its scroll-position - and that doesn't seem to have changed even with the latest version(s) of locomotive-scroll, although they changed that method a bit. Just another good reason for ScrollSmoother. [It works fine in the preview, since locomotive-scroll reverts back to native browser-scrolling at certain window widths, but once the smooth-scrolling is active (on wider windows), it won't work anymore] https://codepen.io/akapowl/pen/mdjNeqo

Hello Piet. That is because you have a click event listener on the parent, that tells the timeline to play - you can check in your example by putting a console.log on that parent's eventListener, and you will see, that the parents' function will be called, too, when you click your .closer: https://codepen.io/akapowl/pen/gOjVaPZ So basically you are giving contradicting instructions on clicking your .closer. The best would be to just put the eventListener to play your timeline on a different element (like maybe the header).

Hi there. If all you want is for the position of the red text to fit the position of the blue text, in you case you might be better off with offsetLeft/offsetTop instead of getBoundingClientRect(). https://codepen.io/akapowl/pen/qByedvj

Hello @slik I removed the link for your example for now, since you pushed your .npmrc file with your private npm token in it. Please remove that and instead use the gsap-trial package in Codesandbox. When you updated your example, add another post in this thread with the new URL, and I'm sure, once one of the Admins finds the time then, they will come in to help you out. Thanks! https://www.npmjs.com/package/gsap-trial

Hello @Romanus These articles should give you an idea for how to approach things with GSAP in React. It's also worth mentioning, that GSAP's .context() will be your best friend when it comes to React. https://greensock.com/docs/v3/GSAP/gsap.context() I'm not the most versed with React, but here is your example with GSAP tweening on the cubes' x-rotation. https://codepen.io/akapowl/pen/VwBJYLw

Hello Pauline. That is because you set it up to be triggered, when each quote's top hits the vertical center of the viewport - since all of them are positioned in a way, that they already are past that point (vertically), the tweens will trigger on load. For triggering tweens on individual parts of a fake-horizontal scrolling tween, you'll want to have a look at containerAnimation https://greensock.com/docs/v3/Plugins/ScrollTrigger containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. If you want the tween to snap to a certain point, once a user has stopped scrolling, you'll want to have a look at snap. https://greensock.com/docs/v3/Plugins/ScrollTrigger snap Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following: [...] I only just hardcoded the values that would work in your demo in an array just to give you an idea with the example below. But you could also calculate the values inside a function - although, of course that would be a bit more advanced and you'd have to figure out the logic for that to work with your scenario. I hope that this will help. https://codepen.io/akapowl/pen/VwBOWEZ

Here's an explanation for why that happens, and suggestions for how to work around that, from the documentation, @Tomas100 https://greensock.com/docs/v3/Plugins/ScrollSmoother Caveats position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

Hello Laurence. The way your demo is set up, the onToggle callback of your fake-horizontal ScrollTrigger, will (except for when the STs are being created) never be called, because that ScrollTrigger will always be active - you can check that by adding some console.log() to that callback. [Some slight correction: It will trigger at the end in this scenario - you just did not add the onToggle callback to the scrollTrigger object, but outside of it instead.] But if you want to trigger something for individual sections inside that container, using that callback wouldn't be the way to go to begin with, as it would only trigger when that ScrollTrigger toggled between active/inactive - not the individual parts inside of it. If you want to trigger something on individual parts of your fake-horizontal tweening container/sections, you should have a look at containerAnimation. https://greensock.com/docs/v3/Plugins/ScrollTrigger containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

Judging from the descripiton in the docs, I don't think so, as it says that those are global events. Based on that description of yours, maybe on of these threads below can help. If they don't, a minimal demo of your scenario would be really helpful.

There is a 'scrollEnd' event. ScrollTrigger.addEventListener("scrollEnd", () => console.log("scrolling ended!")); https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

Like @mvaneijgen mentioned, vw units are not valid in ScrollTrigger's start/end, so you could just use JS to get the value you need. Just a headsup; This (as suggested)... end: `start+=${window.innerWidth * 2.5}px` ...doesn't look quite right to me. If you want to use a value relative to the start, it should start with '+=' end: `+=${window.innerWidth * 2.5}px` Also, I'd suggest to use function based values, when you get the value like that, so ScrollTrigger will properly adjust the value on resize. Here is another rather simple example. Hope it will help. https://codepen.io/akapowl/pen/jOpJdBW

Hello @amitr95 I think the problems you are having might just be related to the general processing of the code's logic you run inside your function, and not really to GSAP measuring the height incorrectly. Here is an approach, that is a bit different on the logic side of things, which works fine for me with regard to the height. I also added overwrite: 'auto' to the tweens, so GSAP can sort out conflicting tweens that might be created along the way. [Note: this approach is not meant to be 100% bullet-proof. It is mainly to show, that the height gets tweened to the proper value.] https://codepen.io/akapowl/pen/VwBqJmj Edit: Since getting the logic right for something like this can become a bit tricky, here's another example of your setup, using an approach by OSUBlake - which works a lot better. Hope that will help. https://codepen.io/akapowl/pen/BaPvXQM Based on this demo. https://codepen.io/osublake/pen/JYQqZr

Loops can help with that. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach This article may help, too. https://css-tricks.com/tips-for-writing-animation-code-efficiently/

Welcome to the GreenSock forum, @oveRuns7777. Maybe that's just a typo on your end? You are missing a closing bracket. ScrollTrigger.matchMedia({ "(min-width:1184px": () => { // <--- you have this ... ScrollTrigger.matchMedia({ "(min-width:1184px)": () => { // <--- should be this ... Also, ScrollTrigger.matchMedia() is deprecated if I recall correctly. You'll probably want to have a look at the newer gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Welcome to the forum @agsymonds If I understand you correctly, the advanced stagger object has you covered. Does that work like you imagined? https://greensock.com/docs/v3/Staggers [I justed increased the stagger value a bit in this demo to make the randomness more apparent.] // simple ... stagger: 0.1, ... // advanced ... stagger: { each: 0.1, from: 'random' } ... https://codepen.io/akapowl/pen/NWBOxjR

Posting your question once is enough, @Juan Munoz But I'm not sure what exactly you mean by 'responsive', as the example I posted above, should be fully working after resizes and there is nothing in it that would need recalculation of any sort. It would be best to add a minimal demo alongside your question, to make it easier to understand. Thanks.

Once you have a proper layout set up, the GSAP side of things could look something like this; gsap.to(".theContentYouWantToTweenOn", { y: () => { return -(document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight) }, ease: "none", scrollTrigger: { trigger: ".someWrappingElement", start: () => "left left", end: () => "+=" + document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight, pin: true, pinSpacing: true, scrub: true, horizontal: true, invalidateOnRefresh: true } }); It's pretty much similar to what you can see with fake-horizontal-scrolling tweens in vertical scrolling scenarios, like the one shown below, except for all the x-related values being exchanged with y-related values and vice versa; additionaly you'll want to set horizontal to true on your ScrollTrigger, when you are moving in a native horizontal scrolling environment. Once you have tried something yourself, we'll be happily helping with the GSAP side of things you tried out and got stuck on - but again, please keep in mind, that these forums are not intended for requests á la 'please give me an example for how to do this effect'. https://codepen.io/akapowl/pen/dyvygmj

Hello weinde, you are calling a function without passing any of the parameters neccessary for that function's logic to be processed, that's why you get that error. But also, nowhere does your code include anything related to GSAP, except for you registering the ScrollTrigger plugin. These forums try to stay focussed on GSAP specififc questions. If you have any of those, we'll be happy to help, but we can not provide general JavaScript or in your case also jQuery consulting.

https://imgur.com/a/0IBWb7T Works just fine for me. Maybe you need to resize your viewing-window and reload, to make sure locomotive-scroll actually uses the transform-smooth-scrolling ? ...because as already mentioned, it will revert back to native browser scrolling when loaded below a certain window width. Which is also why you should not remove this line pinType: document.querySelector(".App").style.transform ? "transform" : "fixed" because that line makes sure that when locomotive-scroll reverts back to native browser scrolling, ST will use position fixed for the pinning. As your scroller is not the body, otherwise it will be using 'transform' by default, which will make your pins appear rather jittery when locomotive-scroll reverts back to native browser scrolling. Edit: My demo actually still does have some issues - with regard to things not working quite right on resize - but for the time being I don't have time to tinker with this some more.

Well, as with everything, the devil is in the detail, which is why it is very hard to give general recommendations for a more complex scenario like yours. Since you are concerned about things not working when reloading the page when it's scrolled down, you might want to reconsider the general approach of how you implement the change of the backgroundColor, too, because the way you are doing it in the demos you posted, things will not work as you might intend in that case. One logical problem is the following: You are changing the playstate of pre-built timelines with.to() tweens in callbacks of ScrollTriggers, when the page is loaded at the very bottom, ScrollTrigger will make sure that those callbacks get called. So now you have multiple tweens being called quickly one after the other, which are all tweening on the same property of the same element, so you are creating conflicting tweens. When you scroll back up then, the .to() tween is supposed to be reversed, but it will probably reverse back to the color that it was at the time when that tween was being created - which very likely is not the color you'd expect but some value of a color in between all those colors. Creating your tweens upfront can be quite the tricky scenario to begin with, when you are going to tween on the same property of the same element with multiple different instances. So one way you could prevent all those logical hurdles, would be to create the tweens in the callbacks directly instead of pre-building them. Then you could either use .fromTo() tweens to make sure you always tween from one specific color to another specific color, when the callback runs, or .to() tweens with overwrite set to 'auto' to prevent conflicts I mentioned above. In this pen with the lottie-scrolltriggers handling the pinning themselves, things seem to work fine even if I create those ScrollTriggers before all the lottie-scrolltriggers, but your mileage may vary. https://codepen.io/akapowl/pen/gOjKLqy