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