Jump to content
Search Community

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

sorciereus test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...