bm1k Posted March 5, 2021 Share Posted March 5, 2021 ( Not great with JS + new to GSAP. My pen is very hacky as I don't really know what I'm doing, please forgive if my methods are garbage ) I'm using splittext with scrolltrigger to reveal specific text by line as I scroll the page. After the split animation runs I would like to revert the text to pre split, so that I can avoid the word wrap issues on browser resize ( caused by splitting by line ). I added reverts but they are not working. Can anyone guide me in the right direction? Please and thank you. See the Pen KKNBvLj?editors=0110 by b-rumble (@b-rumble) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 5, 2021 Solution Share Posted March 5, 2021 Hey @bm1k - welcome to the forums. Since you want the revert to fire in the onComplete of the timeline, you should take the onComplete outside of the scrollTrigger object. When reverting, it looks like you'd first have to revert the outerSplit and then the innerSplit. Does that work for you? See the Pen c6e788b2f184e7552ea04a9f74d2f336 by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
bm1k Posted March 5, 2021 Author Share Posted March 5, 2021 That absolutely works for me. Thank you very very much! NOTE: the revert seems to add a very very small but noticeable jitter to the line height when complete. Appears to be easily remedied with a .01-.02 increase to original line height. 2 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