Elastic List Scroll Animation

[nfadev]

Would I be able to make an animation similar to the work items on this website using gsap and scrolltrigger?

https://k72.ca/en/work

 

[Rodrigo]

Hi @newdev23 and welcome to the GreenSock forums!

 

Yep, definitely! You might need the ScrollSmoother plugin as well:

https://greensock.com/scrollsmoother/

 

ScrollSmoother is a benefit of Club GreenSock members but you can try it on Codepen, Stackblitz and Codesandbox for free:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

https://stackblitz.com/@GreenSockLearning/collections

 

You can find more examples here:

https://codepen.io/collection/BNMEYN

 

Also you can find ScrollTrigger demos in this page:

https://greensock.com/st-demos/

 

Hopefully this helps. Good luck with your project!

Happy Tweening!

[nfadev]

Thanks @Rodrigo! I didn't know ScrollSmoother was a Plugin, it looks great!

 

I have a starter file going, but I'm having trouble with getting each row to expand one at a time, similar to the way the website I originally posted has it. It also looks like the images are expanding downwards vs upwards. Do you have any suggestions/pointers to help get the animation working more like the way it's done here: https://k72.ca/en/work?

 

I also can't seem to add space above the content. In practice, would all page content have to go within the scroll smoother wrapper?

 

See the Pen LYgeRpZ by newdev23 (@newdev23) on CodePen

[Rodrigo]

Hi,

 

In order to expand one row at a time you need to wrap your cards accordingly in your HTML or use some logic in order to shift the start position of each card. Something like this:

const cards = gsap.utils.toArray(".card");
cards.forEach((card, i) => {
  gsap.fromTo(
    card,
    {
      height: "20px"
    },
    {
      height: "300px",
      scrollTrigger: {
        trigger: card,
        start: (self) => "top+=" + (window.innerHeight * Math.floor(i / 2)) + " top",
        end: "+=100%",
        scrub: true,
        ease: "elastic",
      }
    }
  );
});

Here is a working example of that:

See the Pen oNapywy by GreenSock (@GreenSock) on CodePen

 

As for expanding from the bottom, that requires a bit more work in the setup. Maybe use flex to move everything to the bottom so it looks like the cards are expanding from the bottom. Unfortunately we have limited time resources in these free forums and we can't provide fully working solutions for every user's request.

 

Hopefully this is enough to get you in the right direction.

Happy Tweening!