Suddenly SplitText text briefly flashes after updating WP website!?

[NubieHere 13 Likes (Newbie)]

I created this smooth image slider with animated text on top using SplitText ... all was fine ... until this morning when I updated WordPress. Now, I guess this has nothing to do with WP ... and I've been trying all morning to fix it ... without any luck (as that seems to be what's needed now). Now, recreating a codepen from 441 lines of code would be a no go. But I'm basically using two methods for showing and hiding the text respectively after a certain amount of time.

 

I've added a delay to the .from to see where the actual flashing occurs. And I can see that the text that is about to get 'animated on' (shown), briefly show up in the browser (full opacity) before the actual tween begins from an opacity of 0. Now, I've messed around with all I can think of – also the autoAlpha, which seem to make absolutely no difference whether it's set to 0 or 1.

 

Can anyone spot WHY a sudden flashing would occur from the code below?

 

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

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

function showText ( element, content ) {
    $( element ).text( content );

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

        tl.from(chars, { delay: .5, duration: fadeDuration, opacity: 0, autoAlpha: 1, stagger: 0.02, onComplete: revertText, onCompleteParams: [ myText ] }, "+=0");
}

function revertText ( myText ) {
    myText.revert();
}

 

 

Disabling the .revert() doesn't make any difference either by the way.

[OSUblake 18,533 Likes (Superhero)]

This can't be good. Choose one or the other.

opacity: 0, autoAlpha: 1

 

Quote

autoAlpha

Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want.

 

[OSUblake 18,533 Likes (Superhero)]

It's best to set the opacity to 0 in your css and then animate to an opacity of 1. That will prevent the flash, which is caused by the delay it takes for the JS to load.

 

So change the .from() animation to a .to() animation.

[NubieHere 13 Likes (Newbie)]

Thanks, that was just a spill over from all my attempt at getting it to work ... I've tried ALL variations; with, without, both, none ... it doesn't make a difference ... I'm out of options. OK, will try your suggestion of setting it to 0 ... just weird, at it's been working just fine for more than a year.

[NubieHere 13 Likes (Newbie)]

Erhm, ok ... my problem is that I animate it both IN AND OUT ... that is; initially I animate .from opacity: 0 and then .to opacity: 1 ... now I guess the problem would kick me either one way.

[NubieHere 13 Likes (Newbie)]

Yeah, that made it even worse, now nothing is showing up ... hmm. Seriously can't figure out why this became such a mess from a WP update ... but hey, I guess that comes with the job ...

[NubieHere 13 Likes (Newbie)]

And it has nothing to do with FOUC, as it keeps occurring in the slider (the content is loaded just fine).

[NubieHere 13 Likes (Newbie)]

OOOOOOOOK! Found the bugger ... not GSAP (as usual) at all. But why it 'suddenly' happened I don't know ... but; if you use promises (the jQuery equivalent that is), by doing stuff like this:

 

$.when( header.text( slideObj.post_title ) )
.then(function () {
    showText( header, slideObj.post_title );

    charsCount += slideObj.post_title.length;
});

 

You basically 'delay' the events ... do this instead:

 

    header.text( slideObj.post_title;
    showText( header, slideObj.post_title );

    charsCount += slideObj.post_title.length;
 

Basically remove the $.when wrapper ... sigh. Another day wasted on front end land ...