Splittext animation not running.

[jesper.landberg]

Hi,

 

I have a site, which on page load animates a title using splittext. After the animation is done I revert the animation. The site is using "ajax" transitions, so no hard refresh between pages. When I go to a new page I'm also doing a splitText animation on the same title element. Going from the initially loaded page to another page works fine, however, when going back to the original page, the splitText animation wont run. The element is split and the initial tween values are setup, but it wont animate. I have a hard time understanding what might cause this. 

I can't link the site here but if anyone want to see what I mean I can PM the link.

[Carl]

I'm guessing that your animation might be a from() or staggerFrom() and perhaps the starting values are the same as the existing values.

 

Unfortunately, I can't look at your full production site. However if you make a super simple reduced test case (publicly accessible) that doesn't include your protected images and stuff specific to your client then we can take a look. This reduced test case just needs enough code to replicate the issue... a single div that you populate with different text, split and animate. If you can set that up using CodePen... fantastic. I'm guessing you can probably fake the ajax calls and just call a function that simulates new text coming into the title.  Perhaps something as simple as a single H1 element and 2 buttons that change the text and trigger a new animation.

[jesper.landberg]

20 hours ago, Carl said:

I'm guessing that your animation might be a from() or staggerFrom() and perhaps the starting values are the same as the existing values.

 

Unfortunately, I can't look at your full production site. However if you make a super simple reduced test case (publicly accessible) that doesn't include your protected images and stuff specific to your client then we can take a look. This reduced test case just needs enough code to replicate the issue... a single div that you populate with different text, split and animate. If you can set that up using CodePen... fantastic. I'm guessing you can probably fake the ajax calls and just call a function that simulates new text coming into the title.  Perhaps something as simple as a single H1 element and 2 buttons that change the text and trigger a new animation.

 

Hmm. But I revert the splittext, and clear all styles from the title. And also when i switch page the title is removed from the dom, and then inserted again. I also to a fromTo, but it only sets the from values, just won't animate.
I will see if I can get a simple demo up.

[PointC]

You don't happen to have a timeline that's already been played, do you? If it's the same timeline, have you tried tl.play(0)? I've no idea if that will help, but thought I'd throw it out there.

 

Happy tweening.