scrolltrigger Stack images in container and choose position

[Prydz]

Hi,

im trying to stack images on scroll and pin (which i've succeeded) however now what happends is they stack on top of each other centrally. I want to choose the position of the image that is stacking. Within the container.

Maybe my images will explain better:

This is what i get now: 

 

And this is what i want:

 

 

 

See the Pen gOjjyoL by kevmorales (@kevmorales) on CodePen

[Cassie]

Hi there! This looks like a CSS/positioning issue.

I would recommend positioning your elements where you want them to end up - then using a .from tween to animate them from a transformed initial position.

It's often helpful to create the animation without scrollTrigger first to make sure it's correct, then add scrolltrigger.

Your demo also looks very different to the image screengrabs you've added so I'm a little stumped on how to help you in the codepen

[Prydz]

Hi @Cassie
I will check into that! 

 

And regarding the codepen it is now updated so that it looks like the image screengrabs! Sorry for that

[Cassie]

You have a ton of CSS in there so it's a little hard to tweak. But something like this.

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

 

fyi - I wouldn't use vh on that container as the final solution, it feels a bit messy - I just couldn't add percentage height as the parent's styling also didn't have a height so it was automatically collapsed.

[Prydz]

@Cassie

It worked out and looks like I wish! Thanks alot cassie!

Quick question. If i were to have several containers that need to get pinned . Meaning several ".way-cards", should i do a for loop of 

gsap.fromTo(
  ".way-card",
  {
    y: () => window.innerHeight + 100,
rotate: -90,
  },
 {
    y: 0,
    stagger: 0.5,
    rotate: 0,
    scrollTrigger: {
      pin: ".container",
      markers: false,
      scrub: true,
      start: "top top",
      end: "+=1000",
      invalidateOnRefresh: true
    }
  }
);

That part or is there a better way ?

 

 

 

Edit: So i tried using:

Quote

gsap.utils.toArray(".container").forEach((container, i) => {

But that just makes the whole animation go bananas. Can you see where i went wrong ? 

Edited January 31 by Prydz
Added more explanation

[Cassie]

Sure! So you've almost got the right idea. You're using a loop, but then you're using a global selector inside it.
 

gsap.utils.toArray(".way-cards").forEach((container, i) => {
 
  gsap.fromTo(
   ".way-card", // this is global! It's grabbing all the way-cards 
    {
    y: () => window.innerHeight + 100,
rotate: -90,
  },
 {
    y: 0,
    stagger: 0.5,
    rotate: 0,
    scrollTrigger: {
      pin: container,
      markers: false,
      scrub: true,
      start: "top top",
      end: "+=1000",
      invalidateOnRefresh: true
    }
  }
);
});

you'll want to do this instead. Grab that scoped container.

gsap.utils.toArray(".way-cards").forEach((container, i) => {
 
  gsap.from(container, {
    y: () => window.innerHeight + 100,
    rotate: -90,
    stagger: 0.5,
    scrollTrigger: {
      pin: container,
      markers: false,
      scrub: true,
      start: "top top",
      end: "+=1000",
      invalidateOnRefresh: true
    }
  });
  
});

 

You also don't need a fromTo. You can just use from, it'll automatically go 'to' your starting values. fromTo is only needed if your 'from' and 'to' values are different from where your element is set up.

[Prydz]

Hey @Cassie

Really appreciate the help you're a hero! 

So i changed the names of the classes to avoid confusion. 

I actually want to animate this line:

Quote

 ".way-card", // this is global! It's grabbing all the way-cards 

 

But of course not globally, but changing it to the way you showed just animates the container. Is the way maybe to use a loop inside the loop for every card? 

 

 

EDIT: I figured it out: 

 

gsap.utils.toArray(".way-cards-container").forEach((container, i) => {
  const cards = container.querySelectorAll(".way-card"); //loop through each .way-card within its respective container
  gsap.fromTo(
   cards, 
    {
    y: () => window.innerHeight + 100,
rotate: -90,
  },
 {
    y: 0,
    stagger: 0.5,
    rotate: 0,
    scrollTrigger: {
      pin: container,
      markers: false,
      scrub: true,
      start: "top top",
      end: "+=1000",
      invalidateOnRefresh: true
    }
  }
);
});
  

 

 

Edited January 31 by Prydz
answer

[Cassie]

Nicely done!

[Prydz]

Hi again @Cassie

Here comes a tricky question, maybe you could lead me in the right way.

Every li element under the ul "sessions" have a border of 1px. What would be the best way to animate this border like a progress bar? So when you scroll the border slowly goes from heigth 0% to 100% 

[Cassie]

Hey again!

So - you can't animate the height of borders - I'd make a span instead and animate fromscaleY:0