Wind Effect Particles

[WebDevArtur]

Go to say enjoying GSAP, and done some cool animations already, but stumbled across something that I though would be easier to make.

 

I am trying to figure a best way to create wind particles that turn into one direction as background and be responsive , one that is completed I want them to do some pointing effect where the mouse position is, see image below as to what I am trying to achieve.

 

My idea is that I could possibly create them using canvas, rather than svg(seems more heavier when I exported the file from Adobe XD), and then use GSAP with staggered effect to keep each particle rotating, and then apply mouse follow inside my section.

 

Any ideas how you would go about it?

[Cassie]

Heya! What have you tried so far?

Here's an SVG implementation

See the Pen rNWJJyZ?editors=0010 by natszafraniec (@natszafraniec) on CodePen

 

Canvas will be a bit trickier. If I were you I wouldn't actually look too hard at other people's code. I'd start by writing out some logic in plain old english. Work out what you want to do and then how

[WebDevArtur]

Thanks Cassie for the recommendations and love the recommendation, I was trying canvas but it was a bit trickier to set data for each one.

 

So I did with SVG but getting loads of nodes.. I will though reduce/increase those depending on the size of the screen.

See the Pen KKobeKM by aburkalo (@aburkalo) on CodePen

 

Would you have any suggestions for what GSAP trigger would allow all the elements to point at the cursor?

[Cassie]

Oh no no no - canvas was the right idea here - SVG's going to have perf issues at this scale. I was just saying it's going to be a little trickier.

 

1 hour ago, WebDevArtur said:

Would you have any suggestions for what GSAP trigger would allow all the elements to point at the cursor?

There isn't a GSAP solution for this - this is complex creative coding problem to solve. It's a fun one, but it's going to involve a heck of a lot of thinking time, a bunch of custom code and a lot of tweaking. There isn't a gsap.pointToCursor()

 

As I said - you'll need to start by writing out some logic in plain old english. Work out what you want to do and then how.

[WebDevArtur]

Thank you Cassie, I'll look for another approach with Canvas and possibly just vanilla JS to track mouse events.

[Cassie]

Yep, that's the way, canvas for rendering, vanilla JS to track mouse events, then GSAP for the animation!

There's a bunch of utils GSAP has which can really help with wrangling number into the right range for use in stuff like this

https://greensock.com/docs/v3/GSAP/gsap.utils

This isn't the same effect but it outlines mouse events and clamping numbers into a range

https://www.cassie.codes/posts/making-a-lil-me-part-1

[Cassie]

There's also observer for easier event capturing - but the core of this is going to be the logic. So before going down any of these rabbitholes I really suggest you write down some pseudo logic.

https://greensock.com/docs/v3/Plugins/Observer

 

The coding train is an amazing youtube channel for getting the thought process behind a lot of these sort of challenges

https://www.youtube.com/c/TheCodingTrain