GSAP анимация с реакции не работает в браузере IE - PullRequest
Новая
       25

GSAP анимация с реакции не работает в браузере IE

0 голосов
/ 26 октября 2018

Я пытался добавить вступительную анимацию в проект веб-сайта, используя GSAP, все отлично работает в Chrome и Firefox, Safari. Однако анимация не запускается в IE. Я пытался определить источник проблемы, но безуспешно. Вот сайт тестирования

Вот моя настройка компонента индексной страницы: 

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

А вот компонент предварительного загрузчика и файл sass 

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

Sass 

.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
...