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

Thanks ok so - if you compare the GSAP one https://codepen.io/zrrrrr/pen/wvXrWJr with the other package https://codepen.io/zrrrrr/pen/JjvxMbv the difference is huge Thank you

Hi there, I've done a comparison video to show, the quality is noticeably different, I was wondering if anyone knew why or how to improve the quality? I like the way gsap draggable animates between the images but I need them to be higher quality. Not sure why the other package makes them so crisp and this one doesn't. The images are much larger than the canvas size so the images themselves aren't the problem. Thank you Untitled (2).mp4

Ah, I see, the .call method made all the difference, didn't know about it. Thank you so much. Yes definitely a good idea Best

Ok there's another bit to this animation which is an image sequence that runs alongside; each of the text blocks have an accompanying video to go with it. I managed to get the videos to animate to each other in sequence without scrolltrigger, but as soon as I put scroll trigger in I had loads of issues. I couldn't use pin because of the css it affected the 'top' property so the images went off screen. The sequence is: Main title goes to opacity 1 then opacity 0 Start first video First text block goes from opacity 1 to 0 Start next video Second text block goes from 1 to 0 etc etc For some reason the only sequence that seems to work properly is the second text and video, the first one you can't even see it run, then when you get to the third one it's already finished by the time you get there. When you try to scroll back up it doesnt reset the videos and sometimes the opacity doesnt go back in sequence properly. I've tried multiple things like pausing all 3 videos at first then playing them at the correct point in the sequence (as I thought the issue might be the next 2 videos play out as you get there as its only the opacity changing). I also had to set a defined end point for the scrolltrigger which I don't think is ideal either. I don't know if there is something special that needs to be done with videos? Is the trigger set up correctly? I also looked at the onEnter callbacks etc but that didn't solve the issue Many thanks

That's brilliant thank you!

Carl you are a pure legend! I did what you said, sat back and got the animation working as I liked properly without scrolltrigger, then added it on at the end and it worked! Thank you!! Not sure if this is useful to anyone but codepen here https://codepen.io/zrrrrr/pen/mdLvwOX !

Thanks a lot thats really helpful. Just wondering why the images seem quite low quality. They are 1080 * 1080 jpgs on a 320 px screen. On the polestar site they look really high quality (https://www.polestar.com/uk/) and when I was trying this with another library they are coming out really nice but for some reason they are aren't very clear with this implementation, is there a reason? I made a codepen here, there's a massive difference in image quality between the two? https://codepen.io/zrrrrr/pen/JjvxMbv?editors=1111 Thank you

Thank you Ok so I've made a codepen here: https://codepen.io/zrrrrr/pen/mdLvwOX What I want is to have is: You scroll down until you hit the top of the scroll container. The Main title starts to fade out. Then the first item (#seq-1) fades in to take its place. That lasts for a bit then it fades out and section 2 (seq2) fades in. then that fades out for seq 3. Then the same for seq 4 except that doesnt have to fade out at the end I think I'm partly there but I'm getting overlapping text. I was hoping the timeline would prevent overlap? Thank you

Thanks. Sorry I'm going to add a scrub to it with scrolltrigger as well forgot to mention

Hi there, Probably quite simple but how do I collect a group of sub divs into an array and then animate over them one by one in order? ie: <div> <div class="class">First Item</div> <div class="class">Second Item</div> <div class="class">Third Item</div> <div class="class">Fourth Item</div> </div> I believe you could do let targets = gsap.utils.toArray(".class"); to group them into an array Can you then do const tl = new gsap.timeline(); tl.to(".class", 3, {opacity: 1}) and it will go one by one mapping over the array to animate each one to opacity one? Thanks