How to disable GSAP on all other pages but not the homepage?

[Galanthus88]

Hi guys,

 

I am using GSAP for 3 months now. Most say it makes adding animations to the website is way more easier and cleaner. Compliments to you guys!

 

My question is I am working on a WordPress website. I have implemented GSAP and using animations on the homepage. My problem is the site header and site search div on the homepage is set to opacity of 0 in SCSS.

 

This works fine, however when i go to other pages I would like to totally disable all animations and opacity should be 1 by default.

 

Can someone help me out?

Thanks in advance!

This is my JS file:

(() => {
    const intro = document.querySelector('[data-intro-active="true"]');

    if (!intro) {
        return;
    }

    const tl = gsap.timeline({
        defaults: { ease: 'ease', duration: 0.5, delay: 0 }
    });

    const animation = bodymovin.loadAnimation({
        container: intro,
        path: lottiePath,
        renderer: 'svg',
        loop: false,
        autoplay: false
    });

    const onAnimationLoad = () => {
        animation.play();
    };

    const runGSAP = () => {
        tl.to('.header', { y: -30 }, '+=2.4');
        tl.to('.header', { opacity: 1, y: 0 });
        tl.to('.search__image', { y: 60 }, '-=1.5');
        tl.to('.search__image', { opacity: 1, y: 0 });
        tl.to('.search__content', {
            scaleX: 0,
            transformOrigin: 'left'
        });
        tl.to(
            '.search__content',
            {
                scaleX: 1,
                visibility: 'visible'
            },
            '-=.5'
        );
        tl.to('.search__inner', { opacity: 1 });
        tl.to('.btn', { opacity: 1, stagger: 0.3, duration: 0.3 });
    };

    window.addEventListener('load', onAnimationLoad);
    window.addEventListener('load', runGSAP);
})();

 

This is my code in SCSS:

 

@mixin Search {
    .search {
        $this: &;
        position: relative;
        overflow: hidden;

        &__image {
            opacity: 0;
        }

        &__box {
            background-color: v(color-pearl-base);
            padding: 5rem 4rem;

            @include media-breakpoint-down(sm) {
                padding: 2.5rem 2rem;
            }
        }

        &__inner {
            opacity: 0;
        }

        &__form {
            width: 100%;
            display: grid;
            align-content: center;
            grid-template-columns: 1fr auto;
            border-bottom: 0.2rem solid currentColor;
            margin-bottom: 3rem;
        }

        &__content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            visibility: hidden;
            max-width: 80%;
            margin: 0 auto;
            transform: translate(-50%, -50%) scaleX(0);
        }

        &__tags {
            display: grid;
            grid-template-columns: repeat(4, auto);
            grid-gap: 2rem;
            justify-content: flex-start;

            .btn {
                opacity: 0;
            }
        }

        &__input {
            background-color: transparent;
            caret-color: v(color-scarlet-base);
            line-height: 1.2;
            cursor: pointer;
            width: 100%;
            font-size: 4rem;
            font-family: 'resolve-sans-semibold';
            color: v(color-wine-berry-base);
            @include input-placeholder {
                color: v(color-wine-berry-base);
            }

            @include media-breakpoint-down(sm) {
                line-height: 1.5;
                font-size: 2rem;
            }
        }

        &__submit {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 1.8rem;
            font-family: 'resolve-sans-medium';
            text-transform: uppercase;
            color: v(color-scarlet-base);
            background-color: transparent;

            @include media-breakpoint-down(sm) {
                font-size: 1.6rem;
            }
        }

        &__arrow {
            width: 2rem;
            height: 1.3rem;
            background: {
                image: get-icon('arrow-submit', #ff1e00);
                repeat: no-repeat;
                size: contain;
                position: center center;
            }
        }
    }
}

@include Search;

 

[iDad5]

You could do this in a lot of ways, you could use an extra header for the homepage so that the other headers don't react to your script. You could let your scritp only continue it the body has the class 'home', you could even include gsap in functions only if(is_front_page()....)

Actually a lot of ways, but all of this only partly related to gsap. 

[ZachSaucier]

Hey Galanthus88. This isn't really a GSAP question...

 

With that being said, if you know that these files are included on every page of your website the way to go forward would be to detect what the current page is with JavaScript. If the page is the home page, then you set up what you need for the animations. If it's not the homepage, you set up what you need for those pages. You can detect what the page is by using the window's location.

[iDad5]

@ZachSaucier : window.location would work, but it's not really a good and flexible way. WordPress adds certain classes by default to the body 'home' would indicate the front-page (of the top of my head) and as jQuery is included with WP also, I'd suggest to  ad the following line to the js:

 

if(!jQuery('body').hasClass('home')) return;

[Visual-Q]

I usually use if is front page: https://developer.wordpress.org/reference/functions/is_front_page/ to detect home page.

[iDad5]

7 minutes ago, Visual-Q said:

I usually use if is front page: https://developer.wordpress.org/reference/functions/is_front_page/ to detect home page.

I agree that would be the best way, only to register GSAP and his/her own script if(is_front_page()...) in functions.php but from the way the question is asked I surmised that this would probably lead to more questions and those would be to 'wordpressy'  

[Visual-Q]

20 minutes ago, iDad5 said:

I agree that would be the best way, only to register GSAP and his/her own script if(is_front_page()...) in functions.php but from the way the question is asked I surmised that this would probably lead to more questions and those would be to 'wordpressy'  

 

Assuming assets are propery enueued in php they would already be accustomed to working in the functions file.

 

If they are manually added then yeah you could do it all in js something like:

 

if ($("body").hasClass("home")) { //check your home page to see what unique classes are appended to the body
    // do stuff
}

or

 

if (document.body.classList.contains('home"')) { //check your home page to see what unique classes are appended to the body
    // do stuff
}