Jump to content
GreenSock

Adel Kamel

.add not working on IE11

Go to solution Solved by Adel Kamel,

Recommended Posts

Hello everyone, 

 

I have used this code to add a class on an image:

.add(() => {
	imageProduct.classList.add('blur')
})

It works and all browsers except on IE11 when i have a syntaxe error:
https://prnt.sc/sGMY0enNYSZ1
https://prnt.sc/if_ZQMpk0Gvy

You can see here all my JS files:

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

    const logo = document.querySelector('.logo');
    const pastille = document.querySelector('.pastille');
    const cover = document.querySelector('.cover');
    const legalNotice = document.querySelector('.legal-notice');
    const imageProduct = document.querySelector('.image-product');
    const shop = document.querySelector('.shop');
    const cta = document.querySelector('.cta');
    const arrow = document.querySelector('.arrow-black');

    const timeline = gsap.timeline({});

    timeline
        // Image product, pastille, logo and mention ON
        .to([imageProduct, pastille, logo, legalNotice], {delay: .5, opacity: 1, duration: .5})

        // Pastille OFF
        .to([pastille, legalNotice], {delay:4, duration: .5, opacity: 0})

        // Image product OFF
        .to(imageProduct, {duration:.5, y: 10, opacity: 0}, "-=.5")

        // Image product ON and blur
        .add(() => {
            imageProduct.classList.add('blur')
        })
        .to(imageProduct, {y: 0})
        .to(imageProduct, {delay:.2, opacity: 1})

        // Cover ON
        .to(cover, {delay: .1, opacity: 1, duration: .5})
        .to(cover, {y: 10, duration: .5}, "-=.5")

        // Cover OFF
        .to(cover, {delay:4, y: -60, duration: .5, opacity: 0})

        // Shop ON
        .to(shop, {delay: .2, opacity: 1, y:-75, duration: .5})
        .to(cta, { opacity: 1, duration: .5},"-=.5")
});

Thanks for your help

Link to comment
Share on other sites

Hi @Adel Kamel,

 

I don't believe this has anything to do with GSAP. IE11 doesn't support Javascript's ES6 syntax (arrow functions), which you are using in your code.

  • Like 2
Link to comment
Share on other sites

  • Solution

I found solution

.to(imageProduct, { className: 'image-product blur'}, "-=.5")

 

Link to comment
Share on other sites

Just beware that GSAP doesn't animate the changing of classes. You can certainly set the class via GSAP...I just don't want you thinking that it'll analyze every single CSS property, find the differences, and animate those. 

 

Glad you found a solution. 

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