Leaderboard

hello, i need support from a gsap expert for two website elements (slider & scrolltriggered sections). the implementation and construction of the html framework should be done in webflow. who has the time and inclination?

For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here 1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr

That's exactly why - you put it outside the wrapper. Why would you do that? If your goal is to have a position: fixed element (not pinned with ScrollTrigger), that's fine to have it outside the wrapper. Otherwise, it should be inside. https://codepen.io/GreenSock/pen/KKYvbRw

Even though there was no demo, only lines of code, you still helped, and it worked very well in my case. I am very grateful for this. Have a good day my brothers!!!

thank you , it worked like a charm 🙏 gonna stick it into Nextjs now 🫡

Yeah is right there at the top of your log, splitScreenSlideshow is actually a collection of DOM nodes and not a single DOM node. Most likely you're using document.querySelectorAll()when you should be using document.querySelector() instead. Hopefully this helps. Happy Tweening!

I built a helper function specifically for this: https://codepen.io/GreenSock/pen/vYMJdjB?editors=0010 Related forums post: I hope that helps!

You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011

Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!

This is totally not to be mean, but check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I know it sounds really boring, but just read the page once and you’ll be surprised how much knowledge is in there that you didn’t even know you needed. If you after reading it still need help just post back here with what you’ve tried and we’ll be happy to help you out