Jump to content
Search Community

Minor problem only in chrome

mackay2588 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

I've been using GSAP by itself and also with ScrollMagic.

I have a small issued with scrolling being a bit rough only when using the chrome browser. 

I am not sure if the issue is being caused by GSAP or ScrollMagic but I suspect it is.

If anyone has had a similar issue or has any ideas on what I might try to fix it I would appreciate the feedback.

 

I don't have a codepen for the page but I do have it hosted on github at 

https://mackay2588@github.io

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Your link re-directed me to: https://pages.github.com/

 

Without seeing a reduced test-case, my first suggestion would be to remove ScrollMagic from the project entirely and see if the troublesome animations exhibit the same behavior on their own. If not, then its a pretty clear signal that ScrollMagic (or scrolling in general) is causing the issue.

 

If your animations aren't performing well without ScrollMagic, then you can make a super reduced CodePen demo that only has enough code to replicate the problem and we should be able to advise you fairly quickly.

  • Like 2
Link to comment
Share on other sites

Hello @mackay2588, and welcome to the GreenSock forum!

 

When i go to your page I got redirected like @Carl did. Thanks @OSUblake for providing the right link.

 

But when i go to the right link I see errors first thing in the browser console.

 

jquery.mobile.js:3337 Uncaught TypeError: Cannot read property 'concat' of undefined
    at jquery.mobile.js:3337
    at jquery.mobile.js:3814
    at jquery.mobile.js:22
    at jquery.mobile.js:22

jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined
    at animateDiv (https://mackay2588.github.io/scripts/randomMove.js:31:33)
    at HTMLDocument.<anonymous> (https://mackay2588.github.io/scripts/randomMove.js:9:9)
    at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)
    at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

jquery.min.js:2 Uncaught TypeError: Cannot read property 'top' of undefined
    at animateDiv (randomMove.js:31)
    at HTMLDocument.<anonymous> (randomMove.js:9)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

dbLogoB&W.png:1 GET https://mackay2588.github.io/dbLogoB&W.png 404 ()
                  

 

You might want to also handle those console errors. But like Blake advised above you might want to use x (translateY) instead of using top. And reduce the amount of animated elements. I have also seen with that particles.js library being a great resource hog, especially on mobile draining my battery.

 

Just my two cents :)

  • Like 4
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...