Leaderboard

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!

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

Sorry, you're right, the animation of the pink section does looks a little shaky. I though you meant staggering as in the pink section starts animating later. No ideas myself, the code looks right. I hope someone else can help!

@barthendrix, don't you see the pink section jumping/staggering against the blue aqua pie bit? For me it jumps a lot. What browser do you use? Ah, thanks! I misspelled that. pie-chart.mov

Yup, it's all silky smooth again. Thanks again @GreenSock and @Cassie, that was really quick! Looking forward to the next release.

Thanks for the demo. transformOrigin only applies to transforms like x, y, rotation, skew, scale. width and height are not transforms for what you want to do I suggest using scaleX. I wasn't sure where you want the line to start and end, but hopefully this demo points you in the right direction. feel free to play with the values. https://codepen.io/snorkltv/pen/WNKVYGV?editors=1010

Hi, In that case you can use the callbacks from the ScrollTrigger that is pinning the section. https://codepen.io/GreenSock/pen/WNKVYrq Hopefully this helps. Happy Tweening!

Thanks for reporting that @barthendrix! The minimal demo was great. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll need to clear your cache) Better?

If you can't do what Cassie suggested, here's how you could handle it: https://codepen.io/GreenSock/pen/PoBMBXM?editors=0010 Basically, put it all into a timeline, then when the screen resizes record the current progress, revert() the timeline, create a new one and populate it so that it can map all the new path positions, and skip to the recorded progress value.

We'll look into it and get back to you asap!

Happy to help! Yeah, Club GreenSock members make all of what we do possible (and the generous moderators in these forums). Our goal is to give GSAP users the sense that "we've got your back" - something very rare in the JavaScript library space. When it comes to building animations on the web, it's pretty terrible when you find yourself stuck and can't get help. Anyway, enjoy the tools! 👍

Hi @h-amad and welcome to the GreenSock forums! You can update the position using GSAP, just keep in mind that the position property cannot be animated: const myElement = document.getElementById("myElement"); myElement.addEventListener("mouseenter", () => { gsap.set(myElement, { position: "relative" }); /* Then create the animation */ }); Hopefully this helps. If you have more questions please remember to include a minimal demo so we can take a better look at what could be the problem. Happy Tweening!

I've updated your property to `textContent` and set a `snap` value to `1`, so that it snaps to whole numbers. https://codepen.io/mvaneijgen/pen/WNzvgOE?editors=0010

Everyone was a beginner at some point, even the super smart folks like Blake. ☺️ You have to be bad at something before you're good at it! There's no magic matrix knowledge-download.

Nailed it.

You can use .isActive() to check if the animation is running. http://codepen.io/osublake/pen/dpVRqX?editors=0010