dogzzz

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