archimedo

thank you very much! I only have a last question, would it be possible to not break the words once they are converted into characters?

I was trying to expand this animation with an extra behaviour: I would like to trigger the animation only when the text element come into view, so I've tried with scrolltrigger but is not working Here's a codepen of what I did, but I'm a bit confused where to add the scroll trigger function https://codepen.io/aieio/pen/NWJNveY Can you help with that please?

thank you so much for your help! I think the batch can work for my case, however I was noticing in your example that only the first row is shown when the page loads even though the second row would be already visible on the viewport. is there a way to trigger the animation when items enter the view port? so for instance if there's a long vertical screen the first 3/4rows will be already triggered without even scrolling

Hi, I'm exploring the possibilities of GSAP + scroll trigger and I'd like to build a grid gallery page where images come on view with a fade-in effect (which I was able to achieve with 'gsap.from' function). I'm also trying to trigger this animation only when images come into the viewport so that If I have a long list, the effect will apply only on elements visible in the screen. For that I used a scrolltrigger function, with the image container as trigger and start at "top bottom" but unfortunately it seems that I'm missing something here because the effect is still applied to all images on the page at once. Can you help me figuring out how to fix this? Thanks!

Thank you so much that was really helpful!

Hi, I'm trying to apply a text reveal effect so that the text will appear letter by letter, I managed to get this effect but I'd like to apply it on multiple text elements at the same time, while now it starts from the first '.animated-text' element an all the others follow. here's a Codepen link of what I have done so far. Can you help me understand what I am doing wrong? Thanks!

Thank you so much for the reply! Actually I wanted to approach it the way you did but I was not sure how to do it. It was really helpful to only have one container and treat the different "scenes" like100vh frames, that helped me create the animation I needed!

Hello, I've been trying to achieve an effect like this one I'm probably doing something wrong with the FromTo function and as you can see from the codepen I can't completely achieve what I'm looking for. Can you help me figuring out what I’m doing wrong? Thanks

I'd like to ask you just one more question: is it possible to add an ease to scrollTrigger animation?

Thank you so much that's exactly was I was looking for. I just tweaked a few things but this is the effect I had in mind

Hello everyone, I was trying to achieve an effect with Scroll trigger. Basically when I start scrolling I would like to logo to start shrinking until it fixes on top center of the screen with a width of 200px, like these screens: screen 1 screen 2 I've tried doing that with scroll trigger setting various start/ending trigger point but I'm not sure how to transform the logo while doing the scroll. Can you help me understand what I'm doing wrong? Thanks!

Thank you so much! I also add a ScaleY: 1.005 in order to fix a small rendering bug I've experienced with Firefox (even when the scroll was horizontal)

Hi I was trying to adapt that code for a vertical scrolling. On mobile I would like the gallery to act a little bit different, instead of scrolling horizontally and "crashing" images on the 2 sides, I'd like to make it scroll vertically with just the image on top shrinking. I've done this codepen where I could achieve the effect without GSAP whereas my GSAP attempt doesn't work right. here it is: https://codepen.io/archemede/pen/yLXyvyR The thing is that I'd like to use GSAP also of the mobile scrolling because I'd like to be able to switch between vertical/horizontal gallery when rotating my mobile device and I couldn't achive this with the other no-gsap version. Can you help me understand what I'm doing wrong? Thanks!

Thanks again for your advice. I've been studying your code and even though it's quite advanced for my knowledge of GSAP I've been learning from it step by step! I was noticing a little issue about the images moving and I couldn't figure out yet what is the cause: in some cases (like between these two pictures) I see a tiny flickering effect along the image side (like a white line 1px wide). On firefox that is quite noticeable while on chrome is less evident. I thought there might be some issue with images not being all the same size to I forced them to be 35vw wide but when trying on Safari I got this new issue. a small question mark appears in an empty space between those two images Can you help understand what can be the cause of this issue? Thanks!

Thank you so much for your detailed answer! your example is super useful, I'm still a beginner with GSAP so I couldn't come out with a solution like yours but I'm studying it thanks to your comment as well! As next step I'd like to try to add a mouse wheel interaction with it so that when I scroll the mouse I can scroll the gallery faster (if scroll up) and scroll the gallery backwards (if scroll down). I was thinking to add a event listener on mouse scroll, do you think I could achieve that just with scrolltrigger? which approach would you reccomend me? Thanks!