kanguyen-vn

These different threads all contain pens that implement similar things to what you're trying to accomplish.

I think I figured it out after wrestling with it for a few hours. Basically I had to make new ScrollTriggers that pin every group of n cards on top of the screen, alongside those that pin the cards in each group at their respective y coordinates. The math got kind of confusing but luckily I worked my way through it. If anybody asks me to explain the code though,... ?‍♂️?‍♂️ I also made it dynamic so that the number of cards shown at once can be replaced just via the cardCount variable. I don't know if this is the cleanest code (maybe there is a way to make it even more compact), but this does exactly what I want it to do. Thank you @darkus again for the nudge in the right direction ? Would still love to see if anybody has a cleaner solution to this problem! https://codepen.io/Kiet-Nguyen-the-bashful/pen/BaGZGxj

Hi, thank you! This is almost what I'm after, although I'd like every pinned group of 3 cards to also move to the top of the viewport. This is a great starting point though -- I'm currently still playing with it to figure this out.

Hi! I forked some GreenSock code and made a stack of pinned cards like in the CodePen below. As each card comes in, it stacks on top of the one before with just a short section hanging out that indicates the card number. What I am trying and failing to accomplish is to pin only a certain number of cards at a time -- let's say 3, so that when cards 2, 3, and 4 are pinned and card 5 goes on the top of the stack, it should push one card off the stack (first in first out); the pinned cards would then become 3, 4, and 5. It feels doable but I can't come up with some kind of formula that will help me accomplish this. I'd appreciate any help with this issue. If it helps, in my JS code, the markerHeight variable indicates the height of the black-background section that says what number a card is. There's also one other issue which I could not replicate in CodePen but hopefully I can describe it well enough. In the CodePen, after all the cards are stacked and I scroll up, the entirety of the last card (100vh) also scrolls up; this is the desired behavior. However, in my own project, the last card cuts off so that the height becomes only (100vh - n * markerHeight), if n is the 0-based index of the last card. I have made sure my project code is consistent with the CodePen code. I'd love any pointers w.r.t. this issue as well. I understand that this second one is hard to debug without the issue being replicated successfully, but hopefully somebody has run into something similar and can suggest a workaround. If not, that is totally fine. Thank you all so much!

Hi! Hopefully I understood your question correctly, but it seems like this Pen does exactly what you want to accomplish: https://codepen.io/GreenSock/pen/GRXdGGq

Hi! I think the issue may lie in the slicing of your items array. I haven't had time to really deeply debug your code to figure out the true source of your problem -- perhaps somebody else who knows more could help you do so better than I can, and also it's about 2:30am where I'm at ? -- but I was able to provide a quick fix. Instead of making all slides except the one being shown invisible, you can just tween a consecutive pair at a time, which results in cleaner code. I added some CSS just to make everything invisible except the first slide, then tweened the appearance and disappearance of a consecutive pair of slides for however long the items array is. I used a for loop to make it dynamic, although there is commented out hard code that's a little easier to read. https://codepen.io/Kiet-Nguyen-the-bashful/pen/OJamVwL

Hi! The first issue is caused by the fact that even though you only have 3 visual items (1 video and 2 images), you have the container width in the CSS set to 400%, so each item is actually occupying a width of 133.33%. To fix this, just change the container width to 300%. The second issue is caused by the snap value in your tween. Just get rid of that line and you should be good. I hope this helps! https://codepen.io/Kiet-Nguyen-the-bashful/pen/QWJvbEW

Hey, that is precisely the reason why you probably should reproduce your project in a CodePen (and maybe elaborate on the context your question a bit more). You provided only part of the code with no imports that dealed with extra context that you didn't explain beforehand (e.g., the camera position). Until you do so, unless somebody else is already really well-acquainted with what you're implementing, I'm afraid people won't be able to help you much. I personally am at a total loss as to what you're trying to accomplish with the code. Not meaning to be harsh at all, but that's just part of the GSAP forum etiquette ?, I hope you understand.

Without a CodePen, it is very hard to experiment with your code to see what should be done to improve it; I would attach a CodePen to any of my questions on this forum to help people help you more easily. That said, I think you can maybe use a class that indicates loading and gives every other section BUT the landing page a display value of none. Then you can add an onComplete to your first animation that toggles the display back to block for the other sections. I learned this from Petr Tichy (@Ihatetomatoes); linking his response to a similar question here ?.

Oh no I wasn't requesting you to go through the code at all! Thank you again. I was just wondering if it was some kind of side effect I'd need to look into, which I might if I have time, but since it's working for my project, I'll just assume that it's not ?.

So that is the fabled parallax effect! It's obvious I'm still very new to all of this ?. I wasn't able to look it up because I was associating parallax with something very particular, but this makes sense! Thanks so much @Carl, for the quick response too! One very minute thing is I don't know why in your CodePen the z-indices don't work quite right, although I applied this change to my actual project code and it works perfectly. Thank you anyway again!

Hi! I am very new to GSAP and have been exploring its ScrollTrigger library. This may be a very nooby question, but I am trying to recreate the hero design from this page: Reveal Studio. I feel like I am almost there; however, I don't know how to make it so that the animation goes until even after the hero section has ended like in the website. In other words, I want there to still be images floating upward after the end marker has met scroller-end. In my CodePen, the animation ends prematurely (vs. how I want it to) when the two markers meet, and there's basically an awkward silence as I wait for the hero section to finally go up ?. Basically, I have 3 main questions: Am I even doing the right thing by using ScrollTrigger in this manner, or is there a much better way to accomplish this? If I am, how can I improve my current code? What is the optimal way to achieve the staggered effect in the linked website, if my method of changing the durations is not? Sorry I didn't explain that the best, I'm still new to GSAP nomenclature. Please let me know if you need clarification on anything! Thank you all very much! Also, sorry if the answer to this problem already exists somewhere, I promise I tried my best to look around ?