Jump to content
Search Community

Stack images in container and choose position

Prydz test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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: 556304633_Screenshot2023-01-30at15_23_31.thumb.png.5af3c30437d72d7bf04350789e93f4d7.png

 

And this is what i want:

1058401107_Screenshot2023-01-30at15_22_39.thumb.png.ad5d679289f0f9c92fa7242a0e82638f.png

 

 

 

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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 by Prydz
Added more explanation
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 by Prydz
answer
  • Like 1
Link to comment
Share on other sites

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% 

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