Jump to content
Search Community

Suddenly SplitText text briefly flashes after updating WP website!?

NubieHere test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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