Leaderboard

You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️

While you certainly can add those calculations to the start for each of your ScrollTriggers within that pinned element as shown above by Mitchel, actually you do not have to do that. ScrollTrigger does have a built in property to do exactly that for you in cases as such: pinnedContainer https://gsap.com/docs/v3/Plugins/ScrollTrigger/ So the demos below with that property on the ScrollTriggers set to the pinned wrapping element should technically behave exactly the same as those with the calculations for the start shown above. As I see he's been sharing that one demo a couple of times before, I'll also ping @Rodrigo just to make him aware. Of course there's absolutely nothing wrong with calculating things like that, it's just a different way to achieve the same result - but why do it when you can also let ScrollTrigger handle itself [Edit: except for maybe edge cases where you'd have to add some calculations anyway]. 🙃 https://codepen.io/akapowl/pen/mdoxqNL https://codepen.io/akapowl/pen/MWxVrgw

Hi @joshuaaron welcome to the forum! Let's focus the code a bit, to only include the relevant parts. The on hover effect is easy to fix, but for it, the animation needs to work first. Your timeline would never refresh, because you have a tween on that timeline that also gets loop infinitely, so you have two infinities (is your head also spinning thinking about that 🫨) The random function you've found has a few settings that make it either get a random value in your specified range and hold on to it or it creates a function that when it gets called gets a new value each time. See the docs: https://gsap.com/docs/v3/GSAP/UtilityMethods/random()/. If you're using it in a tween you can wrap in a string "random(-100, 100)" which has the same effect as an function based random function (must include repeatRefresh: true) For both the .from and .to values I would use x or xPercent not mixing them, so that the one overwrites the other. You also need to set opacity back to 1 in the .from otherwise when the tween is done, it will get the new values see that it is set to 0 and you'll never see the item again. I hope this makes sense. You probably want to play with the animation a bit to get it more inline with what you want, but if you have any further questions feel free to post back here with an updated demo. Happy tweening! https://codepen.io/mvaneijgen/pen/QWomMje?editors=0010

Hi all, first post and just getting into GSAP. I'm trying to recreate the effect seen in This Hyperplexed video. Essentially, when hovering the parent wrapper of the gradient text, elements should be placed random relative to that wrapper each animation iteration, and from there I just want to animate them up ~20px, and fade them out. I've tried using the repeatRefresh property on the timeline, but I'm assuming that doesn't work for setting the 'from' values? I also want this to run infinitely while the mouseenter event has fired until the mouseleave event fires, but to ensure the final iteration fires before it finishes so it doesn't end abruptly for each child/item. May need some help here, TYIA!

This is a lovely video explaining toggleActions from @Carl

CodeSandbox seems to be broken at the moment, and they've updated their business model so now they're forcing people to pay in order to fork a project (well, they give you a minimal threshold of those) which makes it pretty difficult to troubleshoot here. I noticed you're importing BOTH "gsap" AND "gsap-trial" and you're using ScrollTrigger from the trial on one page, and the regular "gsap" one on the other. Can you try importing everything from the trial package please? Does that resolve things? If not, would you mind providing a Stackblitz instead of a CodeSandbox since that seems to be broken at the moment?

I noticed several issues: You're not doing proper cleanup. Every time you change the text, you're creating an entirely new animation and ScrollTrigger, and all the old ones are sticking around. So you end up with more and more and more that are all trying to operate on the same elements. It looks like you're using a setTimeout() to work around the fact that React doesn't immediately apply the changes when you setText(). If you're trying to run an animation when that text changes, you should do it the proper way in React which is to set up an effect with that text as a dependency (this is totally unrelated to GSAP, FYI). You appear to be hard-coding onEnter/EnterBack/onLeaveBack callbacks on your ScrollTrigger to do exactly what you can do more easily with toggleActions. // old onLeave: () => tl.reverse(), onEnterBack: () => tl.play(), onLeaveBack: () => tl.reverse() // new toggleActions: "none reverse play reverse" There seem to be logic issues - I don't really understand what you're expecting to happen. Here's my best guess at what you're trying to do: https://stackblitz.com/edit/stackblitz-starters-8ab6xd?description=React TypeScript starter project&file=src%2FApp.tsx&title=React Starter

Ok, I rewrote the logic of assigning timelines to elements and now the pinnedContainer param works fine too. Thanks @akapowl!

A really crude and fast example is something like this. I’ve placed some comments in your JS to better explain things, please be sure to read through them! I've also changed some of your CSS so that every card has the same styles and sits right on top of each other. The ScrollTrigger code is commented out, but you can easily turn it on to see how it would work on scroll Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BabrJyv?editors=1010

Thanks @mvaneijgen! It works as expected now. I will have to adapt it quite a bit as in my project I have multiple types of sections and animations for them and they can be used or not used in any order on each page but that's doable.

Yes, you can add the total distance of the previous ScrollTrigger to the start of the next ScrollTrigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNRdGYr?editors=0010 And here a more elaborate setup https://codepen.io/GreenSock/pen/qBLRzVX?editors=0010

Hi Jack, I resent the mail just now. Hope this time it finds you. In case you don't get it in the next few minutes, please feel free to answer on the mail address from our advertisement above.

Hi @Reach Digital welcome to the forum and thanks for being a club member 🎉 Your code seems perfect to me, do you have maybe some CSS on that element that sets the transition property? That is the only thing I can think of. Do you have a minimal demo demonstrating the issue, so that we can take a look at your setup in action. Here is a Codepen you can fork and just place your code in. https://codepen.io/GreenSock/pen/aYYOdN You do have extra brackets in your code that are not necessary, but this shouldn't cause any issue. (I think) // Your code gsap.set(('#test'), { opacity: 0 }); // without extra brackets gsap.set('#test', { opacity: 0 });

Hello Everyone, I hope this message finds you all well. I recently sent an email to each of you regarding the opportunity we discussed, but I haven't received any responses yet. I understand everyone has busy schedules, but I wanted to reiterate our interest in hearing from you. If you're still considering the position and would like to discuss further, please don't hesitate to reply to the email or reach out to me here. Your feedback is valuable to us, and we're eager to proceed with those who are interested. Thank you for your time, and I look forward to hearing from you soon. Best regards, Krisztian

Because GSAP records the starting values on page load, this because it is highly optimised and instead of a tween waiting for its turn it to fire and then start figuring out what it needs to do, it already knows and can just focus on doing that thing blazingly fast. In your case this isn't what you want, because there are multiple tweens fighting for the control of that element, so you have to help GSAP out a bit. So in this case you tell some of the tweens to be 'lazy' and wait their turn and only start calculating their values when it is time to do so. Hope that clears things up and happy tweening!

If you just paste the link in your message, it will get converted to an embed when you post your message. I would highly recommend checking out the docs, definitely when you get it linked based on a question you're asking. I know it sounds boring, but the GSAP docs are great, they tell you everything you would ever want to know (about GSAP) with detailed instructions examples and even the odd video here and there. With that knowledge it is just a question of trying things out and experimenting what will fit in your case. https://codepen.io/mvaneijgen/pen/PoLQrQa

Are you maybe overwriting the default scroll behaviour of the browser? I see the fixed header is over the scrollbar as far as I'm aware the scrollbar should lay on top over everything and this not being the case it feels like you're modifying the scroll. In ScrollTrigger you can setup op a scroller property which needs to get set to the element that is scrolling. https://gsap.com/docs/v3/Plugins/ScrollTrigger/ When this happens to me I like to disable big chunks of my code base until the issue goes away. Then I start enabling small things back in, until the issue is back, this allows me to pin point the issue if I have no idea what is causing it. CSS can most certainly cause an issue even more if you don't write the CSS your self, so that would be a great starting point, remove tailwind and see what it does. You are sharing the file layout.tsx, and there is no GSAP code in there. My guess page.js is where your GSAP code resides? I see you have the tween animate an element which is also your trigger element fro ScrollTrigger, this is almost always a bad idea, in this case you're moving the elements only visually or in the x axis, but I would get in to the habit of never animating the trigger elements! Hope it helps and happy tweening!

Sure, that's fine. There's nothing wrong with that code. An alternate option: panels.forEach((panel, index) => { tl.to(panel.querySelectorAll("div:first-child, div:last-child"), { duration: 1, x: (i) => i ? "-80vw" : "80vw" }, index); }); You can also simplify this: document.addEventListener("DOMContentLoaded", () => { const liElements = document.querySelectorAll(".section .panel"); liElements.forEach((li, index) => { li.style.zIndex = liElements.length - index; }); }); To this: gsap.set(panels, { zIndex: (i) => panels.length - i }); https://codepen.io/GreenSock/pen/PoLRzpE?editors=0010 Have fun!

Hey, i solved my problem and It was just an error with the 'scroller' property, i used the incorrect div; now it works fine. Thanks for your time

Hi @mitchsito and welcome to the GSAP forums! As far as I can tell no, is not possible but I could be wrong about it. Also the proposed code you added: start: "#positionInObject #positionInViewport" Seems like a logical impossibility or even a logical nightmare to me. How you track that? When a specific position in the scroller div has passed a specific position in the viewport? For something like this you could use two different ScrollTrigger instances, one for tracking the scroll position in the scroller element and another to check when the scroller element has passed a specific point in the viewport. Also using the same element as the scroller and trigger at the same time also seems like a logical problem to me because at some point the trigger has to pass some point of the scroller, so the scroller has to pass a point within itself? That spells like trouble to me TBH and seems about right that it doesn't work. Finally if you can provide a minimal demo as well it'd be great to see what you're trying to achieve. Happy Tweening!

Hi, It was just as @mvaneijgen suggested in his last post, using immediateRender: false in the fromTo() instance: https://gsap.com/docs/v3/GSAP/gsap.fromTo()#special-properties From the Docs: immediateRender Normally a tween waits to render for the first time until the very next tick (update cycle) unless you specify a delay. Set immediateRender: true to force it to render immediately upon instantiation. Default: false for to() tweens, true for from() and fromTo() tweens or anything with a scrollTrigger applied. Also this is quite wasteful: gsap.utils.toArray(".col1").forEach((relements) => { const q = gsap.utils.selector(relements); ... }); gsap.utils.toArray(".col1").forEach((relements) => { const q = gsap.utils.selector(relements); ... }); Why not run the loop once and be done with it? This seems to work the way you intend: gsap.utils.toArray(".col1").forEach((relements) => { const q = gsap.utils.selector(relements); gsap.fromTo( q(".toSkew"), { skewY: 17, }, { skewY: 0, scrollTrigger: { trigger: relements, scrub: 1, start: "top bottom", end: "top center", } } ); gsap.fromTo( q(".toSkew"), { skewY: 0,}, { skewY: -17, immediateRender: false, scrollTrigger: { trigger: relements, scrub: 1, start: "top 18%", end: "bottom top", } } ); }); gsap.utils.toArray(".col2").forEach((relements) => { const q = gsap.utils.selector(relements); gsap.from( q(".toSkew"), { skewY: -17, scrollTrigger: { trigger: relements, scrub: 1, start: "top bottom", end: "top center" } } ); gsap.to( q(".toSkew"), { skewY: 17, scrollTrigger: { trigger: relements, scrub: 1, start: "top 18%", end: "bottom top", immediateRender: false, } } ); }); Hopefully this helps. Happy Tweening!

Hi @Valerie and welcome to the GSAP Forums! Just some minor changes to the CSS and to ScrollTrigger's start point and it should work as you expect: https://codepen.io/GreenSock/pen/RwdMPMr Is just about checking the height of the panel when the ScrollTrigger instance is either created or refreshed (that's what function-based values are super useful for). Hopefully this helps. Happy Tweening!

If you want to know how to possibly approach something like that, I would suggest having a look at this tutorial on Codrops. https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/ But it looks like they are not using GSAP whatsoever. Anyways, integrating GSAP into that will likely be the smallest part of work you'll have to do and probably the least complex. For the latter, I suggest having a look at https://gsap.com/docs/v3/Plugins/Observer/ But quite frankly, I also wouldn't count on much support here with achieving that yourself, as this will likely become quite the complex task overall, mostly related to logic related on how to handle three.js, and this free support forum just can't handle creating tutorials for any given effect you can find.

I seem to have identified the cause of my problem. At least ScrollToPlugin is now working. As it turns out, it had nothing to do with GSAP, but I'll leave my solution in this forum for anyone else facing the same problem. The cause was the lack of output.format:'iife' in my rollup config. Here is my final rollup.config.mjs code. import { dirname, resolve } from 'path'; import { nodeResolve } from '@rollup/plugin-node-resolve'; export default { input: [ resolve(dirname(new URL(import.meta.url).pathname), './src/index.js'), ], output: { entryFileNames: '[name].js', dir: 'public', format: 'iife', }, plugins: [ nodeResolve({ extensions: ['.js'], }), ], }; Finally, thanks again to @GreenSock for the advice!

Hey Reinoud Adding will-change to smooth-content seems to fix the problem! #smooth-content { will-change: transform; }