Passing props to progress not working in React

[Code Hippie]

Hello!

 

I am just getting in GSAP and immediately find myself running into problems. I am using React, which I think might be somewhere at the source of the trouble.

 

I am passing scrollmagic props (between 0 and 1) from a parent component to child component with has a GSAP animation tween. I am trying to use the props to update the progress attribute of the tween. The desired effect is to cycle back and forth through the animation as I scroll up and down.

 

I have been hammering this thing for hours, read just about everything Google could offer and got nowhere. I would really appreciate any help!

 

Many thanks!

 

Parent: 

import React from 'react';
import {Controller, Scene} from 'react-scrollmagic';
import Styled from 'styled-components';
import Anime from "./Anime";

const WrapperDiv = Styled.div`
    height: 4000px;
    width: 100vw;
    .blah {
    background-color: pink;
    }
`;

const ClassTrigger = Styled.div`
    position: relative;
    top: 600px;
    height: 100px;
    width: 100vw;
`;

const Scroll = () => {


    return (
        <WrapperDiv>
            <ClassTrigger className={'trigger'}/>
            <Controller>
                <Scene duration={200} classToggle={'blah'} triggerElement={'.trigger'} indicators={true}>
                    {(progress, event) => (
                        <Anime progress={progress} event={event.type}/>
                    )}
                </Scene>
            </Controller>
        </WrapperDiv>
    )
};

export default Scroll;

 

Child:

import React, {useEffect} from 'react';
import gsap from "gsap";
import './style.css'

export default (props) => {


    useEffect(() => {

        gsap.to('.plaything', {
            rotation: 360, paused: true, x:1000
        }).progress(props.progress);

    }, [props] )

    return <div className={'plaything'}><p>{props.progress} {props.event}</p></div>
}

css:

.plaything {
    position: relative;
    top: 500px;
    height: 100px;
    width: 100px;
    background-color: blue;
}

 

[ZachSaucier]

Hey Code Hippie and welcome to the GreenSock forums!

 

Given your request deals with both ScrollMagic (which isn't a GreenSock product and none of us really use it) and React (which most of our regulars don't really use), your question may be slow to get answered. 

 

General debugging questions:  What error(s) are you running into? Are you sure that the correct value between 0 and 1 is being passed down to the child component as it should be? 

 

If you add a demo of the setup in a sandbox like CodeSandbox or StackBlitz your question is much more likely to get answered.

[Code Hippie]

Does code pen allow more than one js file?

[ZachSaucier]

2 minutes ago, Code Hippie said:

Does code pen allow more than one js file?

Of course!

 

Maybe this thread can help:

 

[kimipt]

On 1/31/2020 at 6:03 PM, ZachSaucier said:

Given your request deals with both ScrollMagic (which isn't a GreenSock product and none of us really use it)

@ZachSaucier Is there a guide here somewhere on ways to replace scrollmagic with GSAP only features?

[ZachSaucier]

There's not one feature that replaces it. What effect are you trying to have exactly, @kimipt?

[kimipt]

Oh I get that, I was curious if there was a guide of sorts to replicate the core features of ScrollMagic given how prevalent questions about it happen on the forum. Things like:

• Sync scrolling to timeline scrubbing 
• Trigger animation at scroll positions
• Pin elements while scrolling

Probably there's not a single source, just wishful thinking on my part

 

[Code Hippie]

Thanks all for the support. I managed to fix the problem by replacing the gsap.to to a gsap.fromTo(!). All working very nicely now. Learned a lot trying to figure it out.

 

I do agree that some dedicated support for Scrollmagic (and react-scrollmagic, which I am using) would be very handy. Perhaps the Greensock crew could integrate the scrolling functionality one of these days!

 

Thanks again!

[ZachSaucier]

On 2/2/2020 at 5:07 AM, kimipt said:

Sync scrolling to timeline scrubbing

Update a tween or timeline's .progress() based on the scroll position.

 

On 2/2/2020 at 5:07 AM, kimipt said:

Trigger animation at scroll positions

Use the intersection observer API or just a numerical value inside of a scroll listener to fire it when you want it to fire.

 

On 2/2/2020 at 5:07 AM, kimipt said:

Pin elements while scrolling

More difficult, but possible. Depends on exactly what you need:

 

[kimipt]

Thank you @ZachSaucier

For anyone that finds this, you may also want to give a look into https://github.com/jonkwheeler/ScrollScene
They have ported some of ScrollMagic's functionality but using IntersectionObserver.