reactjs (react.js) with scrollmagic

[funkybudda]

any developers using scrollmagic with react.js?

[krnlde]

No, but do you have a specific issue?

[abelovic]

What is the correct way to use this with React and what will achieve the best performance?

See my demo here:

http://www.webpackbin.com/N1uIxlW8f

I have tried 2 ways:

1. I send in the progress using the scrollmagic update event and then in my component I tween it based on the percentage of the timeline like:

ScrollMagic controller in React container:

            .on("progress", (e) => {

                 let slideProgress = this.state.slideAnimations;

                 slideAnimations[i].progress = parseFloat(e.progress.toFixed(3));

                 this.setState({slideAnimations: slideAnimations});
            }) 

...

React slide component:

    let duration = 0.3;
  
    this.introAnimation.tweenTo(duration * this.props.progress);

This works but there is a lot of updating going on i.e. setting props every time update fires them animating it inside the component to the position based on the progress. You can see this working in slides 3 & 4 in the demo

2. I also tried to use the enter leave events to pass props to my component (either play or reverse it's intro animation). This seemed like it would be faster in theory since you would only fire events when entering or leaving a scene. Then you would let the component do its thing. The problem I get is the scrollDirection is not getting set correctly just like here: https://github.com/janpaepke/ScrollMagic/issues/271 Is this not fixed or am I doing something wrong? If I uncomment my check for direction the component will animate. See slides 1 & 2 in the demo

ScrollMagic controller in React container:

            .on("enter", (e) => {

                // Doesn't run because always PAUSED!!!
                if(e.scrollDirection === 'FORWARD') {

                    let slideAnimations = this.state.slideAnimations;

                    slideAnimations[i].playIntro = true;

                    this.setState({slideAnimations: slideAnimations});
                }
            })

...

React slide component:

this.props.playIntro ? this.introAnimation.play() : this.introAnimation.reverse();

[jamesryan-dev]

would you guys recommend using scroll.magic at component or container level?

edit: decided component level.. my app is relatively simple with little to no changes in state which in turn reflects my ability x experience with React.js also.. lol..

Got component level working however now my start/end are at the same point.. 🤔 Any ideas as to how to print different s/e's for each component??

[abelovic]

The dilemma is if you leave it at the container level you can use scrollmagic's hooks for animations but the downside is that component becomes complex which goes against the concept of making small pure components in React. If I put all those slides in the home.js (from the example) it would be one big mess. On the other hand, if you break it out like I did you have to handle all the animations yourself inside the component and have scrollmagic in the container pass in props based on its events. I like the progress prop value approach, but obviously this only works because I can leverage greensock's tweenTo method. This wouldn't work if you wanted to do css animations for example. Also I have not done much performance testing so not sure if the amount of re-renders affect the smoothness of the animations.

I personally am going with the the latter because I would much rather have clear and concise components but I would be interested in what the scrollmagic gurus think of this approach :)

[yumyo]

It seems this is a reliable port https://github.com/bitworking/react-scrollmagic

[squalvj]

any update on this ?

[janpaepke]

heyho.

ScrollMagic 3.0 is a lot react friendlier. In fact, here's a demo: https://github.com/janpaepke/sm-test-react

Alas it's still in alpha and atm I can't seem to find the time to polish & finish it.