[GSAP animation with react does not work in IE browser]

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

[GSAP animation with react does not work in IE browser]

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!

[GSAP animation with react does not work in IE browser]

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