Jump to content
GreenSock

justjonny

Need a GreenSock / JS developer :-)

Recommended Posts

Hello

 

We are a young design agency looking to enhance our Green Sock knowledge. Can you DM if you are interested in working with us through some bug fixes and then long term bigger projects?

 

One problem is the jank loading effect on here - http://bit.ly/1kWlmbM - we've been told its due to repainting elements. 

 

Thanks

 

Jonny

Link to comment
Share on other sites

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

Are you guys based in the UK?

 

I'm in the middle of a contract now but if you guys are in this side of the pond, I would be interested in hooking up.

Link to comment
Share on other sites

Thanks Jonathan! That's really helpful.

 

@dipscom yes! Drop me a mail jonny@kotacreative.co.uk

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