roryh_199 Posted October 28, 2020 Share Posted October 28, 2020 Here's my codesandbox: https://codesandbox.io/s/lucid-sound-uxk42?file=/src/App.js:232-282 I'm building a text switching for one of my components in React/Gatsby. Is there a smoother and nicer way to make the text switching and not too typewriter-y? Like if it just dissolves or something like that instead. Any one has a better solution for this? Link to comment Share on other sites More sharing options...
mikel Posted October 28, 2020 Share Posted October 28, 2020 Hey @roryh_199, Welcome to the GreenSock Forum. There are many options. For example using ScrambleText See the Pen pobpmGo by mikeK (@mikeK) on CodePen Happy creativity ... Mikel 2 Link to comment Share on other sites More sharing options...
roryh_199 Posted October 28, 2020 Author Share Posted October 28, 2020 Thank you for the suggestion! I think what I'm looking is more dissolving. Any idea how to achieve something like that? Link to comment Share on other sites More sharing options...
mikel Posted October 28, 2020 Share Posted October 28, 2020 Hey @roryh_199, Take a look at splitText and combine it with ... See the Pen gOMoJVQ by mikeK (@mikeK) on CodePen Happy creativity ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 28, 2020 Share Posted October 28, 2020 Using SplitText and animating in each character by character is a good option Alternatively if your background is a solid color like you have in the gif above then you could use an overlaid gradient and animate the gradient to the right, revealing the text underneath. Depending on how dynamic you need the text to be you may or may not need SplitText. 1 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