Splittext, how to blow letters off screen as if by wind

[sorciereus 8 Likes (Newbie)]

Hello forums. It's been awhile since I got stuck trying to accomplish something in this amazing language, but I must admit I'm a bit rusty in my GSAP and JS. I was hoping one of you might be able to get me back on track.

 

I'm trying to blow letters off screen letter by letter, randomly emulating an effect much like this: 

https://aescripts.com/wind/  (from right to left)

 

Note the letters spin in 360 space and etc. I know this has got to be possible but I just haven't put it together yet, and I'm having trouble even getting my script to compile to start testing. I may be close or I may be way off. Anyway please check out the example codepen I included. https://codepen.io/julia_planetdisco/pen/YzproYJ

See the Pen YzproYJ by julia_planetdisco (@julia_planetdisco) on CodePen

[akapowl 4,435 Likes (Superhero)]

Hey @sorciereus

 

There are some issues in your code; e.g. you get an eror thrown in your console - always a good starting point to debug things.

 

There's a comma missing after the duration in your tween. Also you are missing the hash for the id you want to address when creating the SplitText - and new SplitText1(...) is not a thing as far as I know.

 

var mySplitText1 = new SplitText1("txt1", {  ...	// not good
  
  
var mySplitText1 = new SplitText("#txt1", { ...		// better

 

I changed those, increased the duration and x-value of the tween and added a delay based upon the index of each element and things look like you're good to go.

 

See the Pen 376bac317a55b177dd8d0b3eab3c8b79 by akapowl (@akapowl) on CodePen

 

 

 

I also made another version, using the latest gsap version and new syntax. Migrating is easy and recommended.

And I added a nice ease here so it feels more like the wind has to work to get them letters flowing 

 

See the Pen 11d0c5039ac4ce888db812931c59d57d by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

Cheers,

Paul

 

[mikel 4,742 Likes (Superhero)]

Hey @sorciereus,

 

You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ...

 

See the Pen PobOwjN by mikeK (@mikeK) on CodePen

 

Happy landing ...

Mikel

 

[sorciereus 8 Likes (Newbie)]

On 2/22/2021 at 5:11 PM, akapowl said:

Hey @sorciereus

 

There are some issues in your code; e.g. you get an eror thrown in your console - always a good starting point to debug things.

 

There's a comma missing after the duration in your tween. Also you are missing the hash for the id you want to address when creating the SplitText - and new SplitText1(...) is not a thing as far as I know.

 

var mySplitText1 = new SplitText1("txt1", {  ...	// not good
  
  
var mySplitText1 = new SplitText("#txt1", { ...		// better

 

I changed those, increased the duration and x-value of the tween and added a delay based upon the index of each element and things look like you're good to go.

 

 

 

 

 

 

I also made another version, using the latest gsap version and new syntax. Migrating is easy and recommended.

And I added a nice ease here so it feels more like the wind has to work to get them letters flowing 

 

 

 

 

 

Hope this helps.

Cheers,

Paul

 

Super helpful, thank you! And glad to see I wasn't Really far off! I'll get transitioned into the new syntax, thanks for that as well. That combined with the motion path solution below is exactly what I was looking for I truly appreciate it! This forum rocks. 

[sorciereus 8 Likes (Newbie)]

On 2/22/2021 at 10:40 PM, mikel said:

Hey @sorciereus,

 

You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ...

 

 

 

 

Happy landing ...

Mikel

 

AWESOME! Thank you so much.