Jump to content
Search Community

Weird behavior with Tweens on scroll.

Daniel Park test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Edited by Daniel Park
Additional queries.
Link to comment
Share on other sites

Hi Daniel,

 

great website :)

 

As usual, it would be easier to find out exactly what's happening with a reduced test case. If you could create a small codepen using the React Spark Scroll library and GSAP to animate opacity of just one element on scroll, it would make it way easier to help you out. As it stands, I believe there isn't even a way to see the code you're using unminified, so it's quite impossible to find out where the issue comes from.

  • Like 1
Link to comment
Share on other sites

Yup, everything Acccent said (including the part about it being a great site!).

I spent a few minutes in dev tools and didn't get very far.

 

I haven't heard of that scroll library but it looks like the author put some time into it. It might be worth posting the reduced test as an "issue" on the repo as I highly suspect something in React Spark Scroll is directly related. GSAP's timing is extremely solid and there really aren't reasons why values would be changing when they shouldn't or be lagging on such relatively simple effects (opacity / translation).

Link to comment
Share on other sites

I checked the demo from the github page and I don't see this behavior while opacity is being animated. My guess is, this library gives you option for that smooth movement after scroll finishes and you probably have used it for opacity or misconfigured somehow or using some callback which is causing this side effect.

  • Like 3
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Sorry, I really have no idea. I saw the transitions in the css, I didn't try to figure out which elements had those classes or whether or not those elements were controlled with GSAP.  Are we supposed to be looking in here: https://danielpark.me/static/js/main.1564526b.js for the code that could be causing a problem?

 

Our detective work unfortunately is not very efficient on live sites which is why we ask for reduced test cases on live editors (codepen, plunkr, jsfiddle, etc) that we can easily debug.

 

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

6 hours ago, Daniel Park said:

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. 

 

Have you tried recording the values with progress() before playing the timeline?

 

tl.progress(1).progress(0) // prerecords the values and properties upfront
tl.play();

 

Might be worth a try. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...