[GSAP powered Canvas gallery]

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.

[Stretch letter animation]

2 hours ago, Cassie said:

Hey! This is either going to be variable fonts or SVG

 

Here's an example of a variable font

Otherwise you can save text as paths in a graphics editor and then stretch out specific parts of it.

The SVG route will be harder to set up, but more performant, less expensive and more flexible.

The variable font way - you're going to be limited by the fonts capabilities, it's quite perf intensive, but it's actual HTML text, so it'll flow with the page and can be set around inline elements.

Hope this helps!

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

[Stretch letter animation]

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 ?

[GSAP in NuxtJS]

2 hours ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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

[Draggable and ScrollTrigger issue.]

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! ♥

 

See the Pen bGLjNdJ by VahahBio (@VahahBio) on CodePen

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

See the Pen GRQQwbK by VahahBio (@VahahBio) on CodePen

[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 😕

See the Pen GRQQwbK by VahahBio (@VahahBio) on CodePen

Thanks again for support.💓

[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

[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! 

 

See the Pen RwQQygW by VahahBio (@VahahBio) on CodePen