Jump to content
Search Community

SplitText fade in, fade out characters ... ?

NubieHere test
Moderator Tag

Recommended Posts

I don't know why I always end up in an extremely complicated setup when trying to do very simple stuff (stupid, maybe?)

 

HOW, do I simply fade out all characters of a text (in any given element) one by one ... then, when done change text (not visibly) ... then fade in the new characters of the new text one by one. Fade in, fade out, fade in, fade out, wax on, wax off, wax on, wax off ...

 

I'm doing stuff like this:

```

function swapText ( element, content ) {
    var myText = new SplitText( element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.to(chars, {duration: 0.1, opacity:0, stagger: 0.02, onComplete: changeText, onCompleteParams: [ { element, content } ] }, "+=0");
}

function changeText ( params ) {

    // How do I start out with an invisible text that I can fade in?
    $( params.element ).html( params.content );

    showText( params );
}

function showText ( params ) {
    var myText = new SplitText( params.element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.to(chars, {duration: 0.1, opacity:1, stagger: 0.02 }, "+=0");
}

```

Which becomes overly complicated ...

Link to comment
Share on other sites

Yes, and as always: only when I post here I find the answer. I'm going to write a paper on the phenomenon of asking a question and then immediately find the answer.

 

function swapText ( element, content ) {
    var myText = new SplitText( element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.to(chars, {duration: 0.1, opacity:0, autoAlpha: 1, stagger: 0.02, onComplete: showText, onCompleteParams: [ { element, content } ] }, "+=0");
}

 

function showText ( params ) {
    $( params.element ).html( params.content );

    var myText = new SplitText( params.element, { type: "words, chars" } ),
        tl = gsap.timeline(),
        chars = myText.chars;

        tl.from(chars, {duration: 0.1, opacity:0, stagger: 0.02 }, "+=0");
}

 

Sigh!

 

Still not very elegant, though.

Link to comment
Share on other sites

Hey NubieHere,

 

I think an easier way to do this would be to not worry about switching the actual text but instead just hiding existing elements. Then you can set it up at the start and not worry about all the details. I modified an existing SplitText demo to show how that could work:

 

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

Link to comment
Share on other sites

4 minutes ago, NubieHere said:

I'm still wrapping my head around using this thing properly ...

Feel free to ask questions :)

 

At the core, what I'm doing in the above is creating a timeline for each paragraph that will be split. Then I'm adding those timelines in a sequence (to the master timeline) with a 1.5 second gap between them. I make use of a few GSAP 3 features like the ">" operator which places the tween relative to the end of the tween before it.

 

I also repeat that master timeline so it's an infinite effect. Not sure if you need that part.

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