GSAP Animations in & out are flickering?

[Tony Geek]

Hey guys.

Essentially, I've got an animation to fade in and slide up, whilst staggering elements, and then to fade out and slide down when exiting. A relatively simple animation. For some reason though, this seems to be bugging out.

I built a simple function to use as a base for my animations, which you can see here:

function fadeInDownOutUp(elements, trigger, start, end) {
    let animation = gsap.timeline({
        yoyo: true,
        autoAlpha: 1,
        scrollTrigger: {
            trigger: trigger,
            start: start,
            end: end,
            scrub: 1,
            markers: true,
        },
    }, 0);

    // fade in the elements from bottom, then fade out again to top
    animation.from(elements, {
        duration: .8,
        opacity: 0,
        y: 150,
        stagger: 0.1,
        immediateRender: false,
        ease: "power2.inOut",
        onEnter: function (elements, trigger) {
            console.log('enter', elements, trigger)
        }
    });
    animation.to(elements, {
        duration: 1,
        opacity: 1,
        y: 0,
        stagger: 0.1,
        immediateRender: false,
        ease: "power2.inOut",
    });
    animation.to(elements, {
        duration: .8,
        opacity: 0,
        y: -150,
        stagger: 0.1,
        immediateRender: false,
        ease: "power2.inOut"
    });
}

Now you might notice that I've got an onEnter console log in that animation, when I open the site it looks like all of my animations are triggered all at once, which might be the cause of the problem (but I'm not too sure).

 

Just for reference, here is how that animation function is being used, like in the codepen:

function animateServices() {
    let services = gsap.utils.toArray("#services .wpb_text_column");
    
    if(checkMobile()) {
        fadeInDownOutUp(services ,"#services", "top 700", "bottom 300");
    } else {
        fadeInDownOutUp(services, "#services", "top 400", "bottom 300");
    }
}

We very clearly set the elements, set a trigger point, and set the start and end positions. I believe the positions are working fine, but something about the script is just triggering all the elements to get to opacity 1, before then switching quickly back to 0 and resetting the Y position. It's causing this flicker and I'm not really sure how to set this issue right. Any help would be greatly appreciated as to why this is an issue.

 

EDIT: I thought the codepen was replicating my issue pretty well, but it looks like when I embed it here the issue goes away - so I've got a quick video on what the issue looks like on the site I'm working on:
https://clipchamp.com/watch/PMjhYQf9aQA

See the Pen YzJooEY by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[mvaneijgen]

Hi @Tony Geek you've set all your tweens to immediateRender: false, which means: don't render this animation until it is triggered. Which means GSAP will only start the animation when the ScrollTrigger start marker hits the top of the element. Which will get you flashing animations. If you remove these settings it seems fine to me. I've also add some comments to some lines of code in your javascript, please also check those. Hope it helps and happy tweening! 

 

I would also recommend reading the following article/video 

 

See the Pen WNaVoLJ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen