ethansuero Posted May 14, 2024 Posted May 14, 2024 Hi, I want to animate several elements within a page that have the same class across multiple sections, however, my animation only animates the first element on the page, and not the rest (maybe it animates all of them at once but I don't see them as they are down the page). I want to animate these as they scroll in view. The code I have is: <script> gsap.from(".outer_card", { scrollTrigger: { trigger: '.outer_card', markers: true, start: 'top 80%', }, duration: 1, ease: 'power2.out', y: 48, opacity: 0, stagger: 0.1, }) </script> Is this possible? Or do I need 1 animation per section? Also, I use rems when building in Webflow, but it seems that GSAP only works with pixels and %, right? Thanks
mvaneijgen Posted May 14, 2024 Posted May 14, 2024 Hi @ethansuero welcome to the forum! 3 minutes ago, ethansuero said: maybe it animates all of them at once but I don't see them as they are down the page This is indeed what is happening! You'll need to create a loop of all your elements, this is just basic Javascript, something like a forEach() loop will do document.querySelectorAll('.outer_card').forEach((card) => { // we name the refrence to the current .outer_card "card", you can name this what ever you like gsap.from(card, { // Everywhere we used .outer_card we now change to that refrence. scrollTrigger: { trigger: card, // ⚠️ You should never animatie your trigger elment markers: true, start: 'top 80%', }, duration: 1, ease: 'power2.out', y: 48, opacity: 0, stagger: 0.1, // In this case there only will be one element, so stagger will do nothing }) }) I've placed some comments in the code above, pay special attention to the trigger. To prevent future issues you should never animate your trigger element, ScrollTrigger uses this for its calculations, but if you move the element these calculations will be off. So it is recommend to wrap the element you want to animate in an extra element and use that as the trigger. Usually we ask for a minimal demo, so that we can directly dive in to the code to help you debug. We are arware that you can't create a minimal demo in Webflow, but that brings me to a point I often emphasis on this forums: all my animations always start in Codepen, because this allows you to just focus on the basics HTML, CSS, and Javascript and don't have to worry about your framework or platform trowing errors. When you got your code working on Codepen it will be trivial to implement it in your live site. Also you've got an easy version you can share on places like this. So I highly recommend for your next animation to start on Codepen. 6 minutes ago, ethansuero said: Also, I use rems when building in Webflow, but it seems that GSAP only works with pixels and %, right? You should be able to use rems, but you then need to convert your values to strings by wrapping them in quote characters eg y: 48 becomes y: "48rem" Hope it helps and happy tweening!
ethansuero Posted May 14, 2024 Author Posted May 14, 2024 Hi @mvaneijgen thanks for the welcome, excited to start learning GSAP. The page I'm trying to animate is here https://robinai-test.webflow.io/security Basically, all cards on the page use the class .outer-card so I'd like to animate these as they come in view, but keeping the stagger is important as I want to animate them from left to right when they come in, similar to this mini demo I did last night: https://basic-gsap-weblow.webflow.io/ Is that possible? Or do I need to create a tween per section to use the stagger? Thanks
mvaneijgen Posted May 14, 2024 Posted May 14, 2024 Yeah then you need to create a tween per section. The same logic as above applies, change .outer_card to .section (if that is the container). GSAP has a utils selector function build in https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() let q = gsap.utils.selector(myElement) and then in your tween you can use q('.card') to scope to the cards in the current section. If you after this still need help please provide a minimal demo, so that we can dive in to the code directly. We've code a Codepen with all the plugins (even the bonus plugins) loaded up for you See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen. Happy tweening! 2
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now