sniperyork

I see your point, but I'm not at the level that I can freely bake my own packages yet. My option right now is to try and absorb as much knowledge possible till I get to that level

Thank you for the reply! um... that is weird. Because I don't recall ever written any promise or async await codes anywhere in my app. However, I am using gatsbyjs, a react based static site generator to build the app. I'm not sure if it has something to do with its default setup. I am new to both GSAP and react, it might take me a while to figure out this problem on my own. I will report back if I ever come across the solution!

Hi guys, I was trying to add an intro animation to a website project using GSAP, everything works fine in Chrome, Firefox and Safari. However, the animation is not firing in IE. All I see is the preloader background, nothing is firing. I've been trying to locate the source of the problem but had no luck. Here's the test link And here's my component setup import React, { Component } from 'react' import { TweenMax } from 'gsap' import Layout from '../components/layout' import MobileSlider from '../components/slider/slider' import ArtPanels from '../components/art-panels/art-panels' import Preloader from '../components/preloader/preloader' import './home.sass' const REGISTER = 'https://xxxx.xxxx' class IndexPage extends Component { componentDidMount() { TweenMax.to('#logo', 1, { opacity: 1, scale: 0.8, delay: 0.2 }) TweenMax.to('.preloader', 0.8, { yPercent: -100, delay: 1.6 }) } render() { return ( <Layout> <Preloader /> <MobileSlider /> <div className="grid-container"> <div className="tagline"> <h1 className="tagline-st">The Fine Art of Smart Living.</h1> <div className="register tagline-st"> <a className="register-btn" href={REGISTER}> register now </a> </div> </div> <div className="art-wall"> <ArtPanels /> </div> </div> </Layout> ) } } export default IndexPage And here is the preloader component and sass file import React from 'react' import './preloader.sass' import logo from '../../images/logo_white.png' const Preloader = () => { return ( <div className="preloader"> <div className="preloader-container"> <img src={logo} alt="logo" id="logo" /> </div> </div> ) } export default Preloader .preloader background: linear-gradient(to right, $brand-dark, $brand) position: absolute top: 0 left: 0 right: 0 bottom: 0 overflow: hidden z-index: 9999 .preloader:parent position: relative .preloader-container position: absolute top: 50% left: 50% transform: translate(-50%, -50%) #logo width: 200px opacity: 0