Jump to content
Search Community

Stacking cards - my first GSAP project - hoping to get some constructive feedback / tips

MikeS test
Moderator Tag

Recommended Posts

Hi everyone,
 

I recently created my first script using GSAP to animate a series of cards that stack on top of each other as the user scrolls down the page. I wanted the animation to stop early for the last four cards, so they wouldn't completely fade out like the others. Please keep in mind that this is my first GSAP project and I am not aware of all of the GSAP functions.
 

I would really appreciate it if someone could review my code and let me know if there are any optimizations I could make or if I missed any GSAP functions that could help me achieve my goal. Lastly, I wonder if there's anything I can do to improve performance? It works great on desktops, but gets a bit choppy on mobile phones.. Parhaps because of the opacity rendering?


Here's the code: 

See the Pen bGxqJzd by mikesnoeren (@mikesnoeren) on CodePen

Link to comment
Share on other sites

If it works it works. Why solve problems that aren't there? By using it you'll find new problems to solve, but I would solve them as they arise and not endlessly try to optimise code without using it first. 

 

Two notes: animating top and marginBottom are properties that are less performant. And you could give all the elements that you are tweening with GSAP a css property of will-change with the properties that you know are going to change. 

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