NDF

Splittext flow when word/s removed

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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: 

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? 

 

  • Like 3

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

 

Enjoy!

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 1

Share this post


Link to post
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.