GSAP animation with react does not work in IE browser

[sniperyork]

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

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

This seems to be something related to other parts of your code and not GSAP-related.

 

What I can see in IE 11 is this error:

 

Unhandled promise rejection TypeError: Object doesn't support this action

 

I did a quick google search and this seems to be originated in a promise you're writing somewhere in your code without a .catch() method or a try-catch using async/await, as this is reported in Babel, React, Vue and some other repos as well, so is not exclusive of React and definitely not something about the GSAP part of your code.

 

Check some of this reports, do a search of your own and let us know how it goes:

 

https://stackoverflow.com/questions/50476994/unhandled-promise-rejection-syntaxerror-internet-explorer

 

https://github.com/babel/babel/issues/8111

 

https://github.com/facebook/create-react-app/issues/2856

 

Happy tweening!!

[sniperyork]

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!

[Rodrigo]

Have you tried Create React App. That seems to be the most popular React generator and they just released a new version this week.

 

They do have a polyfill for IE 9 - 11:

 

https://facebook.github.io/create-react-app/docs/supported-browsers-features

 

Perhaps Gatsby also has a polyfill for IE as well.

 

Honestly I can't tell you about this. I just don't like app generators since they tend to bloat things. I prefer to bake my own start-up packages for my apps.

 

Happy Tweening!!!

[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

[Rodrigo]

Yeah, I totally understand. This whole bundling-babel-ES2015+-webpack-loaders-plugins madness can make you wish to change your area of work some times, is quite a handful.

 

This article from two years ago still reflects how convoluted some things have become:

 

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f