Share Posted February 23, 2021 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 More sharing options...
Share Posted February 23, 2021 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 6 Link to comment Share on other sites More sharing options...
Share Posted February 23, 2021 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 7 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2021 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now