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!

Thank you very much! I'm checking that article! in the meanwhile I've tried doing some experiment and I came up with this code, it's just a raw version but it kind of makes that "shrink effect" I'm looking for. The problem is that I'm not sure how to loop it and how to make the cursor interact with it https://codepen.io/archemede/pen/GRWErEe

Hi everyone, I would like to build an image gallery like this where pictures keep looping automatically but at the same time, it's possible to interact through the gallery using the mouse wheel as well. I would also achieve an effect like that where images, instead of scrolling out of the screen shrink on the side. So I was trying to understand where to start, I'm sure if it's better to try to replicate that effect from scratch with vanilla js or if GSAP could help me with this case. Of course, I'm not asking the code for it, I just wanted some help to understand where would be better to start and whether GSAP could be helpful for this task or not. Thanks!

Thank you for your reply, unfortunately I can't see the animation on your codepen

Hi everyone, I made a simple animation where 3 shapes bounce around the screen (my inspiration was the dvd logo effect). I'd like to use this animation as a background for a website homepage's section. The thing is that I'm afraid it is too heavy and browser resources consuming, so I was thinking to make the same thing but GSAP. Do you think that would be effective? is there a way to actually increase the performance of my animtion? can you help me understand how to achieve it with GSAP? Thank you!

Hi everyone, I'd like to make a word appear letter by letter, like this https://brunoarizio.com/work/area-g/ where the letters from the word 'Area G' appears sequentially and form the word. The thing is that when they appear, letters seems to have already 100% opacity, and it's like they're coming up from an invisible div. Can this effect be achieved with GSAP? which way would you reccomend me to follow? Thank you so much!

Hi everyone, I have a page with few elements with same class name, I'd like to apply a scroll trigger effect to them: basically, when they appear in the bottom of the screen a message on them will appear and when the bottom of this element surpass the bottom of the screen, the message would disappear. I've tried to achieve this using scroll trigger and it seems to work fine but just for the first element. Is there a way to keep just one animation and apply them to every div with same class name or should I add a scroll trigger effect manually to each of this element? Thank you!

Thank you so much!

is there a way to reverse the animation when scrolling up again?

Thank you so much for your help!!

Hi everyone, I've been having some troubles trying to use scrolltrigger effect inside a scrollable div. I would like to animate the two pictures at the bottom of text when, while scrolling, the bottom of their cointainer div hit the bottom of the viewport. Unfortunately the code I wrote doesn't seem to work, I was wondering if that's because I am scrolling inside a div rather than the body but I couldn't find out yet. Can you help me understand what I'm doing wrong? Thank you!