Jump to content
Search Community

Need a GreenSock / JS developer :-)

justjonny 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

Hello justjonny, and Welcome to the GreenSock Forum!

 

What elements exactly are you seeing that is jank.

 

I tested that link in Firefox and Chrome and it loaded without jank on Windows 10.

 

But i tested the link in MS Edge and IE11 and did indeed see the jank you describe.

 

I could debug this but unfortunately you have so much code it would take to long to cypher through all your JS and CSS to see where your GSAP custom code even is.

 

I do see that your using ScrollMagic but i also see your using jQuery animate(). You want to be careful about mixing jQuery animate or even JQuery css() with GSAP. Meaning you dont want to change properties outside of GSAP with jQuery, which could cause some conflicts.

 

Also i noticed your animating properties like top and left. For better performance and to prevent jank use transforms instead.

 

For example

  • instead of using top use y (translateY)
  • instead of using left use x (translateX)

So you would use CSS position offsets like top and left to set your initial position. Then animate with transform, since transforms can animate using the GPU. Unlike top and left that use the CPU and always cause re-layout for rendering due to geometry changes in the DOM.

 

I would suggest you read these articles on why its better:

 

Myth Busting: CSS Animations vs. JavaScript

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

I hope the following helps!

 

:)

  • Like 4
Link to comment
Share on other sites

The images in the main slideshow are rather large one is over 500k.  They work fine on my desktop which is connected to 100 megabit internet connection over either net.  When I run on a old laptop using wifi it doesn't work so well.  I reduced some images to smaller size without changing their dimensions they may help.  post-5743-0-99827100-1478216098_thumb.jpg

post-5743-0-70403100-1478216135_thumb.jpg

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...