Combining SplitText and TextPlugin

[ochalmers]

Hi all,

 

I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline).

 

What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. 

Any ideas?

 

See the Pen doLzpb by olichalmers (@olichalmers) on CodePen

[Carl]

Thanks for the demo.

 

I couldn't figure out why the huge blockletters timeline was there so I removed it and simplified things quite a bit.

 

 

The tricky part of this is that SplitText and TextPlugin can't really work in conjunction the way you have planned because SplitText literally sucks all the content out of a div and breaks it apart into new divs - replacing whatever was there before. The problem with your approach in simple terms is that you are using the variable chars to refer to radically different elements throughout the life of your timeline. When your timeline is first created, chars means one things... but as it plays you are attempting to change those values by using TextPlugin and SplitText.

 

Trust me, its not the easiest thing wrap your head around. Again the basic idea is that SplitText radically modifies the DOM by creating new elements and replacing old ones. 

 

I'm assuming you want to have an end result like this:

 

http://codepen.io/GreenSock/pen/eNoyYr?editors=001 (edit was originally wrong)

 

The key here is that there is a function that generates a timeline based on the existence of some text in an Array. 

 

Since each animation is in essence breaking apart text in the same DOM node it is imperative that the second sequence isn't created until AFTER the first sequence is played. 

 

So the timeline-creating function creates timelines that check to see what the next timeline should be when they are done playing and then the next timeline gets created and played.

 

You will notice this works pretty well, however there are some serious drawbacks, most importantly, you can't really control this sequence, especially you can not reverse it or restart it. 

 

If you want one timeline that you can play, pause, reverse, restart you will have to abandon the notion of replacing the text in a single DOM node for each sequence. It would be much better in my opinion to create new container divs for each sentence of text that you need to animate.

 

I might be able to find or produce a demo that does that a little later today (or if someone else has one, cool).

[Rodrigo]

Hi and thanks for the codepen!!!

 

There are several things happening here and while I was working on a solution Master Carl beat me to it... but I crafted a different approach

 

Well, I'll skip the explanation of the DOM being changed and becoming useless for the Text Plugin after SplitText does it's magic. Thanks Carl, now I have less text to type

 

Basically I went for a set up that allows to use an array of strings to replace and animate and that could help you to use it at any given point:

 

See the Pen pJBpNa by rhernando (@rhernando) on CodePen

 

Basically it'll keep going until the last item in the array and then you can restart the strings sequence by calling the revert function at any point.

[ochalmers]

Thanks so much for your responses Carl and Rodrigo. Both are very clever alternatives.

I guess, as Carl stated, if I wanted to control each line through one timeline, i'd have to separate them up into individual divs. Updated pen with my take on things (if a bit messy!)

 

[Carl]

Rodrigo, nice to battle with you again my friend!

Really nice job. Scary how similar our approaches were.

 

ochalmers,

Yeah, separate divs are the key. Your latest is perfectly fine. Absolutely nothing wrong with it. 

 

I took another go at it, just in case you someday want to animate 50 lines of text or something.

Using the power of jQuery to loop through the Array of messages and spit out new divs and then chuck a bunch of tweens into a timeline.

 

var fullText = $("#splitThis"),
    index = 0;
    messages = ["Rodrigo", "and ochalmers", "are", "swell guys!"],
    numMessages = messages.length;


var main = new TimelineMax({repeat:-1, yoyo:true});

function createTextDivs(){
  for(var i = 0; i < numMessages; i++){
    var textDiv = $("<div/>", {class:"headline"}).text(messages[i]).appendTo($("#messages"))
    var textSplit = new SplitText(textDiv, {type:"chars, words"})
    main.staggerFrom(textSplit.chars, 0.3, {autoAlpha:0, y: -20}, 0.1)
        .staggerTo(textSplit.chars, 0.3, {autoAlpha:0, y: 20}, 0.05)
  }
}


createTextDivs();

 

http://codepen.io/GreenSock/pen/vOMdJW?editors=001

 

its set to repeat just show that it can be reversed and controlled in all the ways we love

[ochalmers]

Mine works as I want it to, but damn am I jealous of how streamlined your code is!

Love the work guys, thanks for your input.