ericnguyen23

hmm ok this makes sense and getting me one step closer. So what I did now is wrap the animation into a named function, passing the new width as a parameter. I'm calling the animation function within window.onresize, passing new width state. It's not working but I like where it's taking me. Going to call it a night and start fresh tomorrow or the next day. @ZachSaucier @OSUblake Any tips would be appreciated. Codepen

Yes, here's the codepen: https://codepen.io/ericnguyen23/pen/vwORxr

Thanks for the links @mikel I updated my codepen and thinking I'm really close. I created a state and set it to empty: constructor(props) { super(props); this.state = { winWidth: '' }; } I then set state to window.innerWidth value everytime window resizes: componentDidMount() { window.onresize = () => { this.setState({ winWidth: window.innerWidth, }); console.log(this.state.winWidth); // just so I can see that state is changing }; } I then assigned GSAP timeline x position to new state thinking this would work but doesn't. this.tl .fromTo(this.moped, 4, { x: '-400', ease: 'Linear.easeNone', }, { x: this.state.winWidth, ease: 'Linear.easeNone', }) the Moped is dissappearing early into animation. any help would be appreciated.

Anyone happen to know how I can store/update window width variable as user changes browser size? Right now I'm just setting it up like this const deviceWidth = window.innerWidth; Variable only updates when browser refreshes. I'd like it to update AS user resizes.

I was able to implement timeline and Scrollmagic using useEffect( ) and passing animation configs into setAnimation( ) and getting it to work in my local react project. Although I'm unable to reproduce this in Codepen for some reason so here's the setup in case anyone is wondering: const NavBar = () => { const [animation, setAnimation] = useState(null); let tl = new TimelineMax(); let controller = new ScrollMagic.Controller(); useEffect(() => { setAnimation( // GSAP timeline config tl .to('.navbar', 0.25, { css: { borderBottom: '1px solid rgba(200, 200, 200, 1)', backgroundColor: '#ffffff', }, }) ); setAnimation( // ScrollMagic config new ScrollMagic.Scene({ triggerElement: '#trig', triggerHook: 0.2, offset: 140, }) .setTween(tl) .addTo(controller) ); }, []); return( // Rendering code here ) };

I prefer using class components myself when implementing GSAP timeline and ScrollMagic however this is an existing component that (w/o going into too much detail) cannot be changed to a class component.

Another layer to add on top of initial question: I'm trying to implement Scrollmagic therefor need to convert my TweenLite animation into a timeline. The only issue is this is a React functional component which uses Hooks instead of class component features. Any GSAP React developers know how to implement?

I removed Bootstrap's "bg-light" class and now animating background color works. That class seemed to override any background-color values.

Hi animators! I'm attempting to animate Bootstraps navbar in my create-react-app. I'm able to animate border, however cannot animate background color. I have 2 questions: Most pressing: How to I animate .navbar background-color? How do I animate border-bottom so that it appears from left to right instead of just fading in? Thanks!

Once again, thanks @ZachSaucier !! Is the array issue only with React? Because I noticed Stagger documentation uses jQuery which simply selected all .btn classes.

How do I get stagger animations working? My CodePen will work if I change staggerFrom to from (will animate the last card), but can't seem to get any staggering animation.

Nicely done, thanks again!

@ZachSaucier Many thanks for fromTo method and TweenMax's repeat and repeatDelay properties!! A side question: what do you recommend for making this animation more believable/organic? ie bumps on the road.

I'm attempting to animate something traveling across the left side of screen to right side and repeating infinitely. The only issue is, I'm setting the same animation speed but one animation is rendering faster than the other. Two questions: With the way I've set it up, how can I ensure consistent speed? Is there a better way of setting up this animation? I feel it's a bit strange to split up the animations like I've done, but couldn't figure out a cleaner way. thanks, I'm using React btw. Extracting the GSAP stuff for those who want a quick look: constructor(props) { super(props); this.tl = new TimelineLite({ onComplete: function() { this.restart(); }, }); this.moped = null; } componentDidMount() { this.tl .from(this.moped, 2, { delay: 2, }) .from(this.moped, 2, { x: '-400', ease: 'Linear.easeNone', }) .to(this.moped, 2, { x: deviceWidth, ease: 'Linear.easeNone', }); }