Jump to content
Search Community

Animating multiple similar elements in a page (Webflow)

ethansuero test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...