Jump to content
Search Community

Animate 3 boxes in a row with Scroll Trigger

Christiemade test
Moderator Tag

Recommended Posts

Hi @Christiemade,

 

The thing that stands out the most to me is that you're tying the tween to `scrub`, meaning it takes scrolling to progress the tween. If you just want them to appear, you can remove that. Also, you don't have to define each tween separately since they share the same selector and are tweening the same properties. You can offset them with a stagger. Have a look,

 

See the Pen abVVowa?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Lastly, if you're going to tween a property that you've defined in CSS (opacity in this case), it's best to pull that out of CSS and either use a set() or fromTo() in GSAP. This is especially true for transforms. And, while opacity is certainly valid, it's best to use the GSAP special property "autoAlpha" as it handles both opacity and visibility.

 

Hope this helps!

 

Shaun

 

 

  • Like 3
Link to comment
Share on other sites

Yep, I think Shaun is right. Also, it looks like you forgot to gsap.registerPlugin(ScrollTrigger) in your project. In other words, make sure you register the plugin before you try to use it :)

 

Another reason your target wasn't found is you might be running that JavaScript code in your <head>, before those elements even exist (the browser hasn't parsed them yet). So make sure you either put your script at the END of your <body> or just wrap it in a "load" or "DOMContentLoaded" event listener so that everything exists before your code executes.

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...