Jump to content
Search Community

SplitText revert(); not removing InnerHTML

Jamesh test
Moderator Tag

Recommended Posts

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

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!

  • Like 2
Link to comment
Share on other sites

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

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...