Vahan0799

Hi everyone. Is there any possible solutions to create such gallery animation? https://www.imgnstudio.com/ It seems to be inside the canvas + gsap, but I have totally no idea how to achieve that. Need an advice of what library should I use to create such thing or is there any examples? Thanks.

Ohhh I see now! So it would be better to ask the animated SVG instead of wasting time on this I guess. THANKS! ♥

Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?

hmm, I use the wrapper of tsParticle third-party package. and in the console I can see that scrollTrigger can't detect the div wrapper of it, no matter how I change it. But the other scrolltrigger that I used, works perfectly. Unfortunatly I can't create a demo since it doesn't want to work properly. Do I need to install gsap itself if i have nuxt-gsap-module?

Gsap works incorrectly in Nuxt. It doesn't run the functions on page load, but when I modify or comment/uncomment the code it starts to work after flash reload by framework, but after page reload it doesn't. I've installed nuxt-gsap-module and followed the instructions. ScrollTrigger is not working and I'm not sure, do I need to have regular gsap module if I already installed nuxt-gsap or not ? I kept both of them. ScrollTrigger and Ticker are the ones yet, I haven't transfered the other pages from Vue app to test stagger and rest

Hey everyone!? This is my first attempt on using Draggable. And I have a few problems here. Is there a way to increase the speed of dragged slide and decrease the speed of scrolling? With fast scroll they are flying instead of smooth slow scroll ? And I have absolutely no clue, is it possible to stop ScrollTrigger and Draggable on last Element? There is a white huge gap appears at the end based on window width ? And Happy Tweeining everyone, GSAP is AWESOME! ♥

@PointC Unfortunately not, they should light up all at the same time, not one by one. I think stagger animates elements one by one ? I've managed to do this in CSS, but there is no delay between shifting the square animations. I want to get this same thing with GSAP but can't figure out how to stop first animation while 2nd has begun and restart it once 2nd is done and so on infinite. This CodePen is exactly what I'm trying to achieve with GSAP, but with delay in between of '.white' and '.black' animation toggles. https://codepen.io/VahahBio/pen/GRQQwbK

@PointC This is the last question, I promise ? Here I tried to use your tip, but I've digged around 2-3 hrs to try and figure out, how to animate all black squares together, after end delay for 2 seconds and start white squares and so on. But seems `Stagger` animates all the elements one by one, instead of all together ? To make the code easier and cleaner, i tried to give 'white' and 'black' classes to each square to combine the animation of those somehow, but still no progress, mind to check what am I doing wrong here? Long story short, for ex. I need all squares of 1 color to animate first, after the end stop and begin the other and so on and yet can't figure out ? https://codepen.io/VahahBio/pen/GRQQwbK Thanks again for support.?

Hi @PointC YES! This was exactly what I was looking for! But I have a couple of questions which cause this solution. I'm about to use this in complicated strcuture. It's gonna be a Chessboard, where white squares will turn into black, and after black into white. It's gonna be like <div class="chessboard--container"> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> </div> <div class="chessboard--container"> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> <div class="chessboard--square"></div> </div> And I'm gonna need to get access them like .chessboard--container:nth-child(odd) .chessboard--square:nth-child(even){} .chessboard--container:nth-child(even) .chessboard--square:nth-child(odd){} Would that snippet work for this case? And could you explain a little bit or guide a link, why you gave a negative `repeat` outside the stagger and repeatDelay value inside stagger? I've only read documentation about 'Stagger' and haven't used it yet. Thanks for the help a lot

I'm using 1 timeline to animate 2 squares here. Square should go from white to gray, as it is. But my issue is, first square should go from white to gray and hold for around 3 seconds, then change the color back to white, and timeline should pause for 2 seconds then 2nd square start doing the same animation as first did, is it possible to do, or i need 2 seperate timelines for them? Thanks for the attention!