All Activity

Hi, I don't have time now to dig into your code, but you could check @Carl's video on staggers and sequences: Hopefully this helps. Happy Tweenig!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/VwOwymP Hopefully this helps. Happy Tweening!

I feel like I'm close to achieving at least the vertical slide animation, the cards appear one at a time correctly and go up, but I have 2 problems. The snap is not positioned well, since the card is not centered in the scroll, and when I scroll up, it seems that there is a glitch in the animation, could you guide me a little with that? https://codepen.io/designfenix/pen/bGybyrd?editors=0010

Does it solve it for you if you set immediateRender: false on the ScrollTrigger?: https://stackblitz.com/edit/stackblitz-starters-vynow2?file=src%2Fcomponents%2FHeroIntro%2FHeroIntro.js,src%2Fservices%2Fgsap.js

Howdy, brothers and sisters of the green sock. I'm getting up to speed on GSAP and while trying to dial in the type of ease I want for something, I was playing around with the Easing Visualizer of course. I noticed some of them take parameters but I cannot for the life of me find any documentation on what those parameters are in the official docs. After much searching outside the forum I found one or two old references mentioning amplitude and frequency for elastic but I like to be able to see the docs for the others as well. Are they right under my nose and I'm just overlooking them? Are they not documented? Appreciate any help!

Hey Fernando! I don't know if there is a single demo around that does everything you need, so most likely this will reduce to get inspiration and bits from several of them. Here are others that can definitely help: https://codepen.io/GreenSock/pen/poBRQRj https://codepen.io/GreenSock/pen/BaMOapv https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/xxjErmp https://codepen.io/GreenSock/pen/wvrXRdZ It's always a good idea to keep these collections in your bookmarks just in case: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Hopefully this helps, Happy Tweening!

Hi @BiKe and welcome to the GSAP Forums! Maybe this demo can help: https://codepen.io/GreenSock/pen/YzgGwpM Hopefully this helps, Happy Tweening!

Hi, Sorry but I really don't understand what the issue is here exactly. I tested your demo and tried different screen sizes and everything is working as it should. The only advice I would offer is to not make the body tag a flex container. Also I would advice you to create the ScrollTrigger that is pinning the container after creating the ScrollTriggers of the tabs, since those are not pinned they don't affect the start/end position of the pinned one, but the pinned one does have an impact because of the pin space is created. I'm not sure if you're looking for something like this: https://codepen.io/GreenSock/pen/GRaROvZ Hopefully this helps. Happy Tweening!

Hey Rodrigo - totally understood, and hope my comment wasn't rude. The machine I mentioned indeed struggles (when my hundred+ tab browsers are open anyway). Since perf is my north star, it comes in handing for testing and setting a reliable criterion for acceptable frames. But woah, yeah, I would've def gone with canvas or three - didn't realize that was all SVG! Totally get it with clients sometimes tho - dealing with a headache right now as well (unrelated to the SVG question above).

I found the error... it's on an import.

Hi, thanks, I should have made a pen, it's true. I'll try it with what you send and if I'm still struggling I'll come back with a demo.

So just trying to get any GSAP animation to work with in an Angular 17 component. I'm sure it's something simple that the community can help with. Here is the code: https://stackblitz.com/edit/stackblitz-starters-rqwwcj?file=src%2Fmain.ts

Hola Rodrigo!! Thanks for the help, the problem is that basically I need it to behave like a vertical slider with navigation etc., but for the timeline to be the scroll, and in the examples you gave me I don't see that it's close to what I'm looking for .. but hey, thanks anyway, I'll keep trying

Hi, That solution is much better, thank you. I wouldn't have thought of that. Thanks a lot.

Hi, I believe the issue starts with the first error you have in the console there, then it kinds of dominoes in the wrong way with ScrollTrigger somehow. Without a minimal demo that clearly illustrates the issue, there is not a lot we can do I'm afraid. I haven't seen any issue like that when deploying to Netlify react/next and vue/nuxt apps before, so I couldn't tell you what the issue is 🤷‍♂️ Sorry I can't be of more assistance 😞 Happy Tweening!

Hi, Use autoAlpha instead of opacity: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#autoalpha Hopefully this helps. Happy Tweening!

Hi, I think you should simplify your approach a little bit, get the animation with ScrollTrigger working first and then add snapping to the mix. I recommend you to have a look at this threads in order to better grasp the stacking card concept: Hopefully this helps. Happy Tweening!

Hi, That demo uses ScrollTrigger's observe which has been ported into the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ Here are a couple of demos that show how to integrate ScrollTrigger and Observer: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Sorry about the issues but without a minimal demo that clearly illustrates the problem there is not a lot we can do. The only thing I can see in your code is that you have the isTweening boolean commented out in your onUp and onDown callbacks, so that will definitely won't work: // let isTweening = false; // console.log(isTweening); // Observer For Timeline Observer.create({ type: "wheel, touch, pointer, touchmove", target: window, preventDefault: true, wheelSpeed: -1, tolerance: 100, dragMinimum: window.innerWidth >= 480 ? 100 : 20, onUp: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() < 1) { mastertl.play(); } }, onDown: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() <= 1) { mastertl.reverse(); } }, }); Sorry I can't be of more assistance. Happy Tweening!

Hi @WEB1995. That's actually a super complex thing to try to do because you've got some wild variation in the direction and pacing of the line. At some points the line is going UP...but you're scrolling DOWN. And sometimes it's going directly horizontal (so no vertical movement at all), while the page is scrolling down. So logically, it's literally impossible to have it "centered" the whole time (if the page is moving down and the line is moving up, see the problem?). You can sort of approximate things with the magic of that pathEase() helper, but it'll never be perfect: https://codepen.io/GreenSock/pen/BaeaZqd?editors=1010 The only way to have it perfectly centered is to take an entirely different approach, like by putting everything in a container that you then translate it dynamically to keep it centered. That's not a super simple thing either, and it's well beyond the kind of help we can provide for free in these forums, but you can contact us for paid consulting services. I hope that helps!

Hi @AntonioNB4, You could try the dragClickables config option in the Draggable instance created in the helper function: https://gsap.com/docs/v3/Plugins/Draggable/#dragClickables Hopefully this helps. Happy Tweening!

Here is a basic codepen showing the issue (you'll need to go though to the codepen site to change the browser window to make it break) https://codepen.io/nitrokev/pen/zYQYZMB

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/dyEyRLG Hopefully this helps. Happy Tweening!

Honestly I couldn't tell you. There must be something in your HTML/CSS, but unfortunately we don't have the time resources to go through the HTML structure and styles and find what could be causing this in your setup, as you can see in this demo: https://codepen.io/GreenSock/pen/MWzeJow Take a look at it and see the differences and how everything works in order to find the problem in your setup. Happy Tweening!

https://codepen.io/Andy-Adamson/pen/pomowEd Hi GSAP Gurus 👨‍🎓, As you can see by scrolling the pathline sometimes phases in and out of the viewport depending on if its doing loop da loops or sideways moves, is there a way to keep it centered no matter what it is doing? Thanks 🙏 Paul