Jump to content
GreenSock

VahanBio

Members
  • Posts

    7
  • Joined

  • Last visited

VahanBio's Achievements

  1. VahanBio

    GSAP in NuxtJS

    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?
  2. VahanBio

    GSAP in NuxtJS

    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
  3. 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! β™₯
  4. VahanBio

    Timeline delay

    @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
  5. VahanBio

    Timeline delay

    @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.πŸ’“
  6. VahanBio

    Timeline delay

    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
  7. VahanBio

    Timeline delay

    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!
Γ—