[Stack images in container and choose position]

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% 

[Stack images in container and choose position]

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
    }
  }
);
});
  

 

 

[Stack images in container and choose position]

@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 ? 

[Stack images in container and choose position]

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

[Stack images in container and choose position]

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

[Stack cards on top of each other with scroll Trigger.]

Hey, sorry if I'm not meant to bump this thread but im having difficulties with this.

So what im trying to accomplish is the following:
I have 2 columns. Left column is with content text. And right column is with the corresponding content images which should use scrolltrigger.
 

I want both contents to pin for the duration it takes to show the last image on the right column. I also want the image to slide in from bottom and not from the right x-axis.

 

This is what i have so far

 

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

Not sure how to fix any of that. Any help ? 

 

EDIT: I have managed to make it come from the y-axis (bottom to top) and pin the left column.
same codepen