Daniel Park

Has anyone worked with a library for scroll-based callback functions to use with GSAP in ReactJS? I've been working with a small library but I'm looking for a more robust solution and don't have the time to write my own. I'd rather not use CSS animations with popular libraries like AOS. The goal is to find a library that fires a callback function (which I would use to fire an animation function) when an element reaches a certain offset, exits/enters viewport.

First of all, everyone thanks so much for your help! I solved the issue by using the parent div as a proxy for scroll animations instead of having each animated element track themselves. Does anyone know why the initial animation on chrome seems really jerky? Firefox has no issues with smooth animations even on the first render, but on Chrome the first animations seem to jerk a little before they get smooth and then they get better on subsequent runs.

Hmm, i'm only using css transitions for page transitions. I don't believe i have any css transitions happening for elements being animated by GSAP. do you see any that are? Just checked, i'm not applying any opacity or initial transform properties using CSS for the parent elements that are being tweened. I am however using css transitions to animate child elements for when hovers occur and stuff like that. I don't see why this would cause any issues with the parent element that's being tweened though.

Just noticed something, if I remove the transform properties, everything works well. The continued updates after scroll is stopped doesn't occur when I'm animating just opacity.

@Carl - Hmm, is there a specific way to post a performance bar recording onto Github as an issue? Would I just create a GIF? If so are there any tools that developers use to create snippets like this, I've never done this before. @Sahil - Interesting, thanks for that insight. I definitely should've thought about checking the demo on that page to see if the effect is happening there as well. I'll look into that. Thank you! @Acccent - I'll try and come out with a CodePen when I have time heh. Thanks for the compliment!

https://danielpark.me Hey guys, just published my new portfolio site built with ReactJS and a lot of GSAP for animations! So far I'm liking how it's turned out, but I am seeing some weird behavior happen with some onScroll tween effects I doing. Behavior #1: On the landing page of my site, you can scroll down to the work section. If you scroll through, each work item should animate opacity and translate properties. I'm seeing a weird behavior however when you stop scrolling through, each work item does some weird thing where the properties are still animating and move up little by little. If you inspect the DOM and watch the properties after you scroll and look at each item, you can see the opacity and translate properties being updated for some items little by little even after scroll has come to a complete stop. Behavior #2: This is related to number one. On mobile devices if you do the same thing, it causes the whole div to actually flicker in and out. This is really bizarre to me and I'm not an expert on GSAP and why something like this might happen. I am using a third party library to fire onScroll animations with React, could that be the culprit? The library is here: React Spark Scroll Any insight, feedback, or ideas are welcome. I've been pulling my hair out because of this issue for days now. Any feedback on the usage of GSAP on my site is welcome as well! Also if anyone could provide some insight as to why the images get huge fps lag on the first scroll through. Is it because these images are set to an opacity of 0 and they haven't been loaded yet? They seem to be smooth after the initial scroll through. Thanks community!

Question about using TweenMax for scroll based animations. Is it better to set the initial position of an element in CSS and then animate using Tween or is it better to do everything using GSAP. For example, I have a scroll based animation where the opacity and transform properties are animated from 0 to 1, and translate3d(0,80px,0) to translate3d(0,0,0). Even though all these DOM elements will be animated from an opacity of 0 and translate3d(0,80px,0), I do not set initial starting properties in CSS. Is this more costly in the browser? Would it be more prudent to explicitly set the opacity and transform properties of all to-be animated elements using a CSS class instead? I guess what I'm asking is, is setting an initial opacity of 0, and transform: translate3d(0, 80px, 0) for all to-be animated elements and then using Tween to animate to opacity: 1 and translate3d(0, 0, 0) less/more costly in terms of browser performance vs not setting initial properties in CSS? Are these even correlated? I'm asking this question because I've been inspecting my sites performance tab in the debugger and there are several instances of severe FPS drops during these Tween animations. I'm wondering if setting/not-setting the initial values is causing the issue, due to repaints and composite layers, etc. In my head, it makes sense that initial position values would have an effect, but then again I could be totally wrong and these might not be correlated at all. Any experienced, know-all gurus willing to shed some knowledge and insight into this topic?

Interesting, that's the same thought process I had. Yeah I'm using a transform: translateY(100px) instead of the top property. Made the change after inspecting performance in the browser. Cheers!

You're right. Had an extra object and the ease function wasn't working either. All is working as it should be!!

Let's say we have a div that contains two child elements. If we wanted to animate the opacity from 0 => 1, and also the top property from 50 => 0. Is it more efficient to just animate the parent div element or animate each of the children directly? Some thoughts on this and why?

Ahhh, interesting. Some oversight on my part! I simply changed the 0 to '0%' and it works as it should. Interestingly enough though, when I use xPercent the Tween doesn't work. openContactAside = () => { this.setState({ asideOpen: true }, () => { TweenMax.to(this.overlayEl, 0.5, { xPercent: 0 }, { ease: Cubic.easeIn, yoyo: true }); }); }; closeContactAside = () => { TweenMax.to(this.overlayEl, 0.5, { xPercent: 100 }, { ease: Cubic.easeIn, yoyo: true }); }; However when I use the %-based string value of '0%' everything works fine. Thanks for the detailed answer!

openContactAside = () => { this.setState({ asideOpen: true }, () => { TweenMax.to(this.overlayEl, 0.5, { x: '0' }, { ease: Cubic.easeIn, yoyo: true }); }); }; closeContactAside = () => { TweenMax.to(this.overlayEl, 0.5, { x: '100%' }, { ease: Cubic.easeIn, yoyo: true }); }; I have these two functions. When a button is clicked, the overlay element (this.overlayEl) animates from an initial position set by CSS of .overlay { transform: translate3d(100%, 0, 0); } The animation works as desired the first time the button is clicked to open the overlay. The overlay slides out and populates the full width and height of the viewport as desired. The animation to slide the overlay back to its original position works the first time its clicked. The user presses the close button and it slides back to its original position as it should. However, once both the open and close animations have fired once, I try to open the overlay again but nothing happens. I've inspected the dom and its stuck at <div className="overlay" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);" /> I don't see the translate property being animated back to 0% again. It's as if its stuck there. Am I completely missing how TweenMax's to/from methods work? Is there something I have to do to reset or set the positions of an element that's been animated for it to work properly?