dogzzz

Hi, I'm using exactly the same code in my project as on the codepen but I'm getting different results; the panels are sliding in from the side instead of down to up (the codepen is the right behaviour, my project with the same code is being weird), wondering if that's to do with gsap or is that something else? videos of unexpected behaviour on mobile and desktop: https://tinyurl.com/yb93d4t3 https://tinyurl.com/2xhnfv22 Thank you

Yeah true, Maybe there’s a way to stack the titles as you scroll through the variable height stacked pinning example Yeah ok will think Thanks

Yeah trying to do exactly that, but also be able to read each card to the end (eg the first card is quite long) thank you

Which part of the animation there would control if you wanted each new panel to be offset by the height of the title ( first card) then the height of two titles (next card) etc etc? Thanks

Nice thank you

Yes but also be able to scroll each card to the end before the next one comes up is it better to absolute the cards and bring them to top: 0 then? But they again need to come up from the bottom, then I tried that they came in from the top ? also to deal with different lengths I was going to overflow:hide the box that holds all the cards which kind of works but again you only get to see the length of a card up to 100vh which is tricky. I know the example above has shorter cards that all Fit in 100vh so it’s ok but doesn’t work for my case thank you

Hopefully scroll trigger is working on this demo, any idea even why the cards are going left to right not bottom to top? Thank you

Sorry don't know what happened there, it should be working now: https://codepen.io/zdogg/pen/XWoQmrJ Thank you

Thanks Rodrigo, Yeah I know -- I've updated my codepen, why do the cards fly in left to right instead of from down to up? That's the main issue Then there's another issue that the cards get pinned so you can't read anything below the viewport cut off Sorry I realised scrolltrigger wasn't loaded correctly in the codepen before so hard to see the issue Thank you

Hi there, I'm trying to replicate this effect on the scrolling cards: https://aawum.com/about/ In the example all the cards are the same length I can't seem to get it to work , I've tried so many things: * setting a timeline to start on the pinPanel element and then bringing the cards up. The problem is when I pin the first card you cant scroll down and read it all * animating each card one by one * using position absolute and setting what position to go to (it animates in the wrong direction) * animating each card upwards by the height of the previous card. The problem is they all overlap The goal is the be able to scroll the first card and read it, then each card comes over the top still showing the title behind. Problem is you can't seem to pin the first card without losing the content that overspills the viewheight of the screen. Then if you do scroll down the content of any card that is too long is visible behind. I thought about maybe allowing scroll through the first card and losing the title as it scrolls off screen, then starting from card 2 to keep the titles in but I'm not sure that can work either. Trying to apply the effect of the site above to this, can't seem to get it to work, spent a week on it and completely stymied. Any help greatly appreciated. Have looked through the forums but can't seem to apply a working solution. Thank you

Fantastic thank you! Was able to time it out setting a duration for the image sequence and then dividing the text up based on that with the position parameter the toArray util is quite a nice little feature to know! - Dogzzz

That looks really good , thank you. Would that work if you had more than 3 blocks of text? I wondered how to deal with that scenario There was one other scenario as well; if you wanted to not split it exactly but perhaps have the first one say 20% then the next one 60% then the final one the remaining 20% of the duration , how could the code be adapted for that? Many thanks

Hi there, I have an image sequence of 75 images. I want the first text to be full opacity for 33% of the scrolltrigger length. Then I want the opacity of the first text to fade to 0 as the second text fades in and I want the second text to stay on for the next 33% (it may take 1% for the changeover) and then I want that to fade out and for the third text to fade in and remain on screen. How can I control a second animation in line with an image sequence scrolltrigger on the first? I know scrolltrigger swaps time for scroll so I want to use that to time the text relative to the scroll sequence so I can control when text comes in and out (I'm using the opacity property to do this) Many thanks

sizing the images on drawing seems to help a bit

Yeah if you look at this one its massive - it seems to render the placeholder fine but once you start scrolling its an issue - the gsap one is all pixelated versus the other one is crisp On the logic issues ideally I'd like when you scroll that it doesn't go back to the first frame but it goes on from wherever you are but thats a separate issue yes! Thank you