Home » Javascript » ScrollMagic and TimelineMax running automatically in React

ScrollMagic and TimelineMax running automatically in React

Posted by: admin October 29, 2018 Leave a comment

Questions:

I am building a slide show that slides left and right using scroll magic. the source code from the animation was pulled directly from this
ScrollMagic Demo

I am trying to implement this same animation in React. I am running the animation in the componentDidMount lifecycle hook so that it will run on load – similar to JQuery’s $(document).ready.

The issue I am having is that the timeline for TimelineMax() is not being controlled by the ScrollMagic animation or scroll position. The function is firing immediately moving the slides all the way through to the end as if ScrollMagic didn’t even exist. It fires regardless of whether I am scrolling or not. I need to figure out a way to make this animation behave exactly like this demo using React.

A few things to note:

  1. I am using innerRef as a selector instead of “id” so that I don’t directly manipulate the DOM in React. This is standard for GSAP.
  2. I have tried implementing JQuery and running it that way, but I had the same result. The function ran automatically.
  3. I am using styled-components for styling.

Here is my code:

import React, { Component } from 'react'
import styled from 'styled-components'
import { TimelineMax } from 'gsap'
import ScrollMagic from 'scrollmagic'

export default class SlidesContainer extends Component {

  componentDidMount = () => {

      //Create Timeline Animation
      let wipeAnimation = new TimelineMax()
      .to(this.slidesRef, 0.5, {z: -150})
      .to(this.slidesRef, 1, {x: "-25%"})
      .to(this.slidesRef, 0.5, {z: 0})
      .to(this.slidesRef, 0.5, {z: -150, delay: 1})
      .to(this.slidesRef, 1, {x: "-50%"})
      .to(this.slidesRef, 0.5, {z: 0})
      .to(this.slidesRef, 0.5, {z: -150, delay: 1})
      .to(this.slidesRef, 1, {x: "-75%"})
      .to(this.slidesRef, 0.5, {z: 0})

      //Create ScrollMagic Controller
      let controller = new ScrollMagic.Controller()

      //Create ScrollMagic Scene
      new ScrollMagic.Scene({
        triggerElement: this.containerRef,
        triggerHook: "onLeave",
        duration: "500%"
      })
      .setPin(this.containerRef)
      .setTween(wipeAnimation)
      .addTo(controller)
  }

  render() {
    const { slideImages } = this.props

    return (
        <Container innerRef={x => {this.containerRef = x}}>
          <Slides innerRef={x => {this.slidesRef = x}}>
            {slideImages.map((image, i) => (
              <Slide
                key={i}
                image={image.src}
              />
            ))}
          </Slides>
        </Container>
    )
  }
}
const Container = styled.div`
  width: 100%;
  height: 100vh;
  overflow: hidden;
  perspective: 1000;
  background: black;
`
const Slides = styled.div`
  width: 400%;
  height: 100%;
  display: flex;
`
const Slide = styled.div`
  width: 25%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-image: url(${props => props.image});
`
Answers: