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!

Does code pen allow more than one js file?

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; }