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% https://codepen.io/kevmorales/pen/gOjjyoL

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

@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: But that just makes the whole animation go bananas. Can you see where i went wrong ? https://codepen.io/kevmorales/pen/gOjjyoL

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

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:

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 https://codepen.io/kevmorales/pen/gOjjyoL 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