Jamesh Posted October 5, 2020 Share Posted October 5, 2020 Hi there Hopefully someone can help? I'm trying to remove the inner HTLML styles and markup when SplitText is done by applying .revert(); but it doesn't seem to be working. I'm probably missing something quite basic but at the same time confident I have coded in the correct way? Thanks James See the Pen dyMBaQm by jame5 (@jame5) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 5, 2020 Share Posted October 5, 2020 Hey Jamesh. The main issue is that you're trying to pass in the function that should be called in the onComplete as the third parameter. I'm not sure why you're doing that, it won't work. You should use the onComplete property of the tween or the timeline (depending on which one you want to do the reverting in). Additionally you're making one of the most common ScrollTrigger mistakes with your tlShrink timeline: putting ScrollTriggers on tweens within timelines. Doing so doesn't make much sense. Either use regular tweens with ScrollTriggers or apply the ScrollTrigger to the timeline itself, not the tweens within it. I'm also not sure what you're trying to do with the onToggle and toggleActions of the splitTimeline ScrollTrigger. ease: 'power4.easeInOut' is an invalid ease. It should be ease: 'power4.inOut'. You can also leave out the px in start: 'top 48px'. Happy tweening! 2 Link to comment Share on other sites More sharing options...
Jamesh Posted October 5, 2020 Author Share Posted October 5, 2020 Hi Zach Thank you for the pointers which all make sense. I've amended the Codepen to reflect what you've said and now have the revert working as I'd like. I found that the font was bouncing/jumping so in case anyone see's this thread, I set font-kerning: none on the body in CSS. Thanks James Link to comment Share on other sites More sharing options...
Jamesh Posted October 5, 2020 Author Share Posted October 5, 2020 Its appears the font is still flashing/jumping/bouncing in Safari and Firefox. Seems fine in Chrome. Any further pointers to avoid this happening? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 5, 2020 Share Posted October 5, 2020 Check out the notes and limitations section of SplitText. 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