Make a condition on an animation

[Adel Kamel 0 Likes (Newbie)]

Hello everyone,

 

I hope you are fine, 

First of all, I am sorry but i am unable to make a CodePen demo.

 

I have this Gsap animation and it works perfectly : 
 

document.addEventListener("DOMContentLoaded", function(event){

    const logo = document.querySelector('.logo');
    const titleOp = document.querySelector('.title-op');
    const shop = document.querySelector('.shop');
    const cover = document.querySelector('.cover');
    const tag = document.querySelector('.tag');
    const sideContainer = document.querySelector('.side-container');
    const alma = document.querySelector('.alma');

    const timeline = gsap.timeline({});

    timeline
        // LOGO ON
        .to(logo, {delay: .5, x: 0, opacity: 1, duration: .5})

        // COVER ON
        .to(cover, {x: 0, opacity: 1, duration: .5})

        // TAG ON
        .to(tag, {top: 0, opacity: 1, duration: .5})

        // TITLE OP ON
        .to(titleOp, {x: 0, opacity: 1, duration: .5})

        // SHOP ON
        .to(shop, {x: 0, opacity: 1, duration: .5})

        // COVER OFF
        .to(cover, { delay: 1.5, x: 50, opacity: 0, duration: .5,}, "-=.2")

        // TITLE OP & SHOP OFF
        .to([titleOp, shop], { x: 50, opacity: 0, duration: .5,}, "<")

        // SIDE-CONTAINER ON
        .to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" })

        // PRODUCT DESCRIPTION & IMAGE OFF
        .to(sideContainer, { delay: 2, x: 00, opacity: 0, duration: .5})

        // TITLE OP, SHOP & COVER DISPLAY NONE
         .to([titleOp, shop, cover], { className: 'hidden'}, "-=.5")

        // ALMA DISPLAY FLEX
        .to(alma, { className: 'alma flex'}, "<")

        // ALMA ON
        .to(alma, {x: 0, opacity: 1, duration: .5,})
});

I need to make a condition to bypass this tween when the sidecontainer div is empty

.to(sideContainer, { x:0, opacity: 1, duration: .5, ease: "power4.out" })

I thought to use this JS method to achieve that but I need your help for the syntaxe please
 

Thanks a lot

[geedix 90 Likes (Contributor)]

I would make an array of the elements, then loop through and tween the ones that aren't empty, like this:

See the Pen zYjyyVy?editors=1111 by geedix (@geedix) on CodePen

 

[GreenSock 18,295 Likes (Superhero)]

One other option is to just use a function-based value: 

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

👍