Jump to content
Search Community

Splittext flow when word/s removed

NDF test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

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

 

 

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

Link to comment
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: 

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? 

 

  • Like 3
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...