Jump to content
Search Community

Make a condition on an animation

Adel Kamel test
Moderator Tag

Recommended Posts

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

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