Adel Kamel Posted August 11, 2022 Share Posted August 11, 2022 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/sGMY0enNYSZ1https://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 More sharing options...
elegantseagulls Posted August 11, 2022 Share Posted August 11, 2022 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. 2 Link to comment Share on other sites More sharing options...
Solution Adel Kamel Posted August 11, 2022 Author Solution Share Posted August 11, 2022 I found solution .to(imageProduct, { className: 'image-product blur'}, "-=.5") Link to comment Share on other sites More sharing options...
GreenSock Posted August 11, 2022 Share Posted August 11, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now