Jump to content

Nikos Xenakis

Scroll fade animation with pinned container

Go to solution Solved by Rodrigo,

Recommended Posts

I want to create a simple opacity animation to my text (".pinned-img-fade-card__text") , while the container (".pinned-img-fade-card") is pinned.
As soon as the animation finishes I want to move to the next container (".pinned-img-fade-card").

The problem is everything moves too fast and if I change the end property the animation experience is good, but the I get a huge gap until the next container.
Duration and Delay have no effect. I sense that it has something to do with scrub, but I cannot figure it out.
Could you please help me have a slow-mo kind of animation without huge gaps in between sections?


See the Pen JjBwXvQ by straktormedia (@straktormedia) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Nikos Xenakis and welcome to the GreenSock forums!


First thank for being a Club GreenSock member and supporting GreenSock!


The main issue is that you're looping through all the texts in all the cards. What you should do is select all the texts for each card in your loop and then use those to create the instances inside each section's timeline:

cards.forEach((card, index) => {
  const cardTexts = card.querySelectorAll(".pinned-img-fade-card__text");
  const animationTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: card,
      start: "top 15%",
      end: "+=240%",
      toggleActions: "restart none restart none",
      markers: true,
      scrub: true,
      pin: true

  cardTexts.forEach((text) => {
      { opacity: 0 },
      { opacity: 1, ease: "none", repeat: 1, yoyo: true }

Here is a live example:

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


As for the spacing between elements using pin: true, that comes with the territory I'm afraid. What you could do is make each card's height 100vh so you don't get that feeling like this:

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


Another option you could explore is pin the entire section and switch the images and animate the text, like this:

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


Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

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