Leaderboard

I think you might be misunderstanding snap. You can't say snap 'true' You have to tell GSAP where to snap! From the docs 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: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users. Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required): snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above) delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number) directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false. duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point. ease [String | Function] - the ease that the snapping animation should use. The default is "power3". inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false onStart [Function] - a function that should be called when snapping starts onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap) onComplete [Function] - a function that should be called when snapping completes

@jadealombro you should change the HTML just create a new section and a new item in the <nav> and the code will dynamically update. https://codepen.io/mvaneijgen/pen/mdGbqaa?editors=0100

Is there a new pen with the updated code or is the original one updated? The frist two tweens have the same animation, so you can also just combine those to be one tween. Also in the .icon tween it states transform: "translate(bottom, bottom)", this does nothing. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate translate wants a number value, bottom is nothing in this case, did you mean transformOrigin? And in rotation you can also direct†y call the number instead of a string "90deg" = 90 An ease should not care about if it is a negative value or not. https://codepen.io/mvaneijgen/pen/PodYJve

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

Hi. It sounds like you are looking for gsap.matchMedia() the docs have an excellent video and a bunch of examples to get you on your way.

Hi, Basically the problem is that you're using CSS Transitions on the elements that GSAP is also animating. First: NEVER use transition: all in your CSS, any style update that can be animated will be animated and you'll end up with unwanted/unexpected results in your app. Second: NEVER use CSS transitions on properties that GSAP is animating. As soon as GSAP applies a style to the element, CSS will fight for control of the element and the GSAP animation won't work as expected. Once you remove all these from your CSS it seems to work: transition: all 0.28s ease-in; Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

Okay, don't mind it. I had wrong selector in my css......

Hi, As far as I can tell the clear props is not working in the case of PIXI display object. Is worth noticing that clear props will remove all the applied styles and set the element back to it's previous state before the animation, with that in mind you could achieve the same result using the revert method: https://greensock.com/docs/v3/GSAP/Timeline/revert() Here is a fork of your codepen: https://codepen.io/GreenSock/pen/OJoLwWB Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

Heya! GSAP actually has a bunch of utils baked in https://greensock.com/docs/v3/GSAP/UtilityMethods/random() Hope this helps! https://codepen.io/GreenSock/pen/MWBLwLX

thank you very much carl, that worked perfectly!

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

@mvaneijgen, this is the updated codepen I changed this: stroke-dashoffset from 0 to -125 <circle class="bottom" cx="50%" cy="50%" r="15.9" stroke="pink" stroke-dasharray="25 100" stroke-dashoffset="-125"></circle> After that the flickering stopped. In the video file in previous post you can see the "flickering". When I just did the animation with CSS it was smooth. After changing from 0 to -125 the ease on the animation seem to happen backwards on the pink area. See video file in this post. Both the green and pink are has ease:"back.in" when I recorded it. Thank you for your tip about the code, I will updated. pie-chart-ease-small.mov

You're position parameter -=1 is 0.5 seconds before the start of the timeline, default duration of tweens if you don't define it is 0.5 seconds, so if you say that a tween should start -=1 it is put on the timeline -0.5 seconds before the start. A timeline starts at 0, so everything before that is not shown. You could change the position parameter to 0, "<" or "myLabel" to have the tweens start all at the same time. I encourage you to the read the post, to get a better understanding of how the position parameter works. https://codepen.io/mvaneijgen/pen/BaOBmrE?editors=0010

I have now removed a backdrop filter and added will-change: transform to the css for the relevant elements. Now the page also runs smoothly on my notebook. Many THANKS

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 Jack, THANK YOU for your help. I will try this and give you feedback. Maybe this will help others too. Regarding GSAP performance: I am sure that GSAP is the best platform for web animations. And you do an incredibly good job.

Sup @Samuele I recently published a tutorial on my channel [EDIT: link removed at request of author]

@codelab yeah, I don't have a lot of time to dig into that (your CodeSandbox won't allow any tweaks/changes without forcing a Github sign-in which is super annoying - it'd be much better to just provide a regular CodeSandbox without that restriction), but my best guess is that maybe Tailwind is assigning CSS transitions to the elements that GSAP is trying to affect. So, for example, part of what ScrollTrigger has to do as a part of its refresh() (to measure start/end positions) is to restore everything to the original state, then go from the top to the bottom in order and measure things, implement pinning, etc. So if GSAP tries setting a CSS property like width/height/top/left/whatever, and then attempts to measure but you've got a CSS transition applied, the browser will REFUSE to render that element in the proper position because it's like "nope, I'm gonna make that change gradually over the course of X seconds due to the CSS transition", making it impossible for GSAP to do its work. Maybe try to overrule any tailwind settings that might be applying CSS transitions or animations. I also noticed that your App element gets a scrollbar (in addition to the main body/viewport) which is odd. Something in the CSS is messing with that. Tailwind seems to make it really hard to decipher, though, as it uses tons of CSS variables. Obviously I'm not a Tailwind guy, so let me know if I'm missing something.

Your sections had no height whatsoever and you set your trigger for each section to be ".fade-item" (which would default to the first one) instead of each individual section element. Is this more like what you wanted?: https://stackblitz.com/edit/angular-jxhmln?file=src%2Fmain.ts

In my experience, 99.99% of the time performance problems have absolutely nothing to do with GSAP and everything to do with graphics rendering in the browser. So it's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: Try setting will-change: transform on the CSS of your moving elements. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" I assume you meant "CSS transitions", right? Transforms are fine. They're much better to animate than things like top/left, for example. We obsess about performance for sure. But we're not miracle workers. The very nature of smooth scrolling is more demanding on the browser rendering-wise. We did the best we could with the features offered, and we definitely didn't "design" it to only run on fast computers. That doesn't mean that you can build a graphics-intensive site with all kinds of effects and expect it to run buttery smooth on slow mobile devices. I hope that helps! And thanks for being a Club GreenSock member! 💚

Hi @codelab, Not sure I understand exactly what the effect is that you want to achieve, but it sounds like you've identified the issue - something to do with styling rules in tailwindCss. It's probably a matter of finding the lines of styling that are causing the problem and overwriting them in your custom stylesheet. Having had a quick look at the css, maybe these are worth a try: - remove the overflow rules for the body tag in the custom stylesheet. Messing with overflow can create weird results, especially when you're combining it with things like scrolltrigger. - remove flex-wrap: wrap; from .container. You want the panels side by side, right? - change the rule for .panel from width: 100vw to flex: 0 0 100vw Hope that helps!

If you watch the video I linked to you'll see that the tween that moves the container along has to be set up a certain way in order to allow for containerAnimation to work properly. Your two approaches are incompatible. You can either use a simple scrollTween and containerAnimation - like so. https://codepen.io/cassie-codes/pen/oNPvNoq/46a560c620a3ce10427be702f7d1cb2b?editors=1010 Or a timeline approach like this https://codepen.io/cassie-codes/pen/eYLOYKg/388b8c2bf70c03f614f2224115379a5b GSAP needs the containerAnimation tween to be set up in a certain way in order to calculate positions, when it isn't set up like that, everything gets thrown off. Hope this helps

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.

Hey Jack - thanks. I think #3 would work great. Working on some alphabet stuff w/ drag & drop, build a word kind of thing for kids. So for words they'll always be lining blocks up horizontally. Just seems a pain to have to calculate and add an offset to each box, depending on where they dragged it from. For this kind of thing absolute works nicely. Have not used Greensock in a while! Look forward to diving back in. I usually end up making things way more animated and cooler just because you guys make it easy

Hi @Asored. Yes, that's working exactly as expected. By setting immediateRender: false, you're telling GSAP to wait until each individual staggered sub-tween starts before setting each initial from() value. From what I can tell, it's doing exactly that. And the same goes for the behavior your seeing when you jump the playhead back to the very start - it's rendering it precisely as it should. When the playhead was at 0, only that very first character had its initial values set from the from() tween. I'm a bit confused about why you think you need to set immediateRender: false because it sounds like you want precisely the behavior that immediateRender: true delivers. Can you help me understand why you're setting it to false? What do you mean by "wait for the initial value"? After thinking about it more, I believe that maybe you're saying that you want the very start of the timeline to show your element's original state (so if you pause(0) all the characters would be opacity: 1), but then almost immediately after the playhead starts moving away from the very start, opacity jumps to 0 and then stagger-fades them in. Is that correct? If so, here's how you could do that: https://codepen.io/GreenSock/pen/BaPXvZz?editors=0010 Does that help?

That's because you're creating your loop BEFORE your image loads, and then when your image loads it causes a document reflow and totally changes the sizes of stuff, throwing it all off. So just create your loop AFTER things finish loading. window.addEventListener("load", () => { const loop = horizontalLoop(boxes, {paused: false,repeat: -1,}); });

You didn't load GSAP in your demo, took me a while to figure out why it wasn't working. Maybe next time share a working demo, so if someone wants to jump it they don't need to first debug your pen. I've set your stroke offset to be a multiple of 60, because your stroke-dasharray is 50 + 10 = 60. 120 seemed like a nice speed. Then I've set the animation to repeat: -1 eg infinite and the ease: "none", so that the animation is linear and perfectly repeats it self. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PoBmXRK

Hi, In the case of server side rendering is better to watch for the window object when registering GSAP plugins: import gsap from "gsap/dist/gsap"; import { Flip } "gsap/dist/Flip"; import { SplitText } "gsap/dist/SplitText"; if (typeof window !== "undefined"){ gsap.registerPlugin(Flip, SplitText); } Also keep in mind that SplitText is a Club GreenSock bonus plugin, so you either have to install GSAP using a private token created in your dashboard or using the provided .tgz file you can download in the dashboard (if you are a Club GreenSock member of course). If you're not a member you can always install the GSAP Trial package in order to test all the bonus plugins locally. Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

function drag(e){ if (e.touches) e.clientX = e.touches[0].clientX; gsap.set('.link-case', {pointerEvents: 'none'}); gsap.to('.ring-cases', { rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ), // onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) } }); xPos = Math.round(e.clientX); } function dragEnd(e){// eslint-disable-line window.removeEventListener('mousemove', drag); window.removeEventListener('touchmove', drag); gsap.set('.ring-cases', {cursor:'grab'}); gsap.set('.link-case', {pointerEvents: 'auto'}) } I don't know if it's the most elegant thing, but I did it by inserting in the drag function a tween of gsap to which I give pointerEvents: 'none' and to the dragEnd function pointerEvents: 'auto'. ty