Splittext flow when word/s removed

[NDF 20 Likes (Newbie)]

Hi,

I have some banners to do where some words are removed from a block of text to give it a different meaning, the remaining words animating to their new position. As I've many to do with different massages and formats I'm trying to use splitText to do the job but so far getting the words to animate from their original position to their new ones once words are removed has eluded me! Got them animating OK but not from the correct, pre-word removal positions to their new ones in the flow. Any ideas or methods much appreciated.

I'm setting innerHTML of spans to "" to remove selected words...

 

Thanks!

[Visual-Q 978 Likes (Leader)]

Thre may be a more sophisticated way to do but off hand I'd say the initiial words would have  to be absolutely positioned so they don't abruptly shift position from reflow when the unwanted text is removed. From here you could determine and record the start position of the word that's removed and animate the other text to that position. 

 

On a case by case basis it would end up being a fair amount of work. Though perhaps you could create a function that would create arrays from the items perhaps by class selectors and loop through animating each instance.

 

 

[NDF 20 Likes (Newbie)]

thanks but the removed words wont be the same widths as the one to reposition

[Visual-Q 978 Likes (Leader)]

Correct you'd have to select the entire block of words following whats removed and shift it. If you recorded the width of the word(s) being removed you could animate the rest by that amount but it wouldn't help with line breaks. 

[NDF 20 Likes (Newbie)]

Yeah, that's the problem I'm having. I'm trying to maintain the flow, thereby avoiding a lot of work, but so far no luck...

 

[Visual-Q 978 Likes (Leader)]

Another way I could think to do it is a typewriter effect for removal. If you removed the letters one at a time setting them to dispaly:none this would allow more of animated transition without abruptly removing entire words and enable natural reflow. Though I suspect this would have a different look than what you're after.

 

From what you describe I envision words fading out and the sentences smoothly closing up the space. 

[NDF 20 Likes (Newbie)]

Yes, already done something similar using the text plugin and fading - it works and may be a fall-back if I can't figure out animating positions.

Assuming the client likes it...

[GreenSock 18,254 Likes (Superhero)]

Here's something I quickly whipped up for you. Not sure if it fits your needs perfectly, but hopefully it gets you moving in the right direction and illustrates the concept: 

See the Pen EQVYMp?editors=0010 by GreenSock (@GreenSock) on CodePen

Notice you can fill those DIVs with whatever text you want and it'll find the matching words and do the transition all automatically for you. It even returns a TimelineLite so you can control it all as a whole, dump it into another sequence, or whatever.

 

Does that help? 

 

[NDF 20 Likes (Newbie)]

Indeed it does! Hats off Sir, you 'quickly whipped up' something that I failed to accomplish in several hours  Many thanks.

[GreenSock 18,254 Likes (Superhero)]

Happy to help! It was kinda fun anyway. I like challenges

 

Enjoy!

[Visual-Q 978 Likes (Leader)]

That is insanely ingenious. It would take me a month to work something out like that.

[Visual-Q 978 Likes (Leader)]

Jacks script is incredibly useful and performant. Deserves some attention from the community. Tweak some values add additional animation adds a whole new dimension to Split Text.

 

See the Pen mXeGYK by Visual-Q (@Visual-Q) on CodePen