Help with Load Time(s) and Scrolling Gallery

[Guest epstudio]

Hey everyone,  just want to say thank you so much, I'm super stoked on this amazing animation platform! My journey to discovering Greensock started with me building this site in Flash, then trying to export through Google Swiffy for IOS compatibility, then realizing I couldn't do half of what I wanted to... So I started searching and voila! Greensock to the rescue! haha... of course now I had to teach myself Java and wrap my brain around canvas and everything else that goes along with it... :S

 

I am having some issues with loading time(s), and my scrolling gallery page behaves strangely once it's looped through the first or second time... Any suggestions on how I could better implement the scrolling gallery?

 

Here's the url where the site is viewable:

 

http://www3.telus.net/public/epstudio/LandingPageDev.html

 

and here's a link to the site files themselves... 

 

http://www3.telus.net/epstudio/

 

Thanks in advance,

 

Kind Regards!

 

Lee Billwiller

[Guest epstudio]

Any thoughts, really would be appreciated.  If anyone can look at my code and please  tell me if I'm doing anything glaringly wrong...

 

Especially the .html files (I'm not sure if I'm implementing things in the right order or most efficient manner etc... )

 

Specifically the Ticker function (I tried to use the TweenLite Ticker as I read it may perform better than the createJS Ticker, but couldn't get it to work..) and the resize bit, doesn't center in some browsers... any ideas??

 

Don't be afraid to tear it all to shreds everyone, please I am looking for honest criticism and assistance here folks. 

 

Thanks!

[Carl]

Hi and welcome to the GreenSock forums.

 

Here is an example of using TweenLite's Ticker with EaselJS:

http://jsfiddle.net/geekambassador/vYAT5/

 

It uses quite old versions of TweenMax and Easel, but the same concepts apply today.

 

As for the rest of your site, it's a bit beyond the range of support services that we offer to dig through all your JavaScript and suggest optimization techniques. We really have to focus on helping people with specific questions relating to the use of the GreenSock Animation Platform. 

There very well may be some community members with extra time on a weekend to take on the challenge. 

 

That said, there doesn't seem to be anything wrong with the way you are loading the TweenLite and TimelineLite files. On a cursory glance nothing jumped out at me in your scripts as being glaringly wrong except that a few pages are throwing a number of JavaScript errors repeatedly due to the calling of non-existent functions. Would be a good idea to track those down. 

 

As for the jitters in your scroll, I really don't know but it may be caused by sub-pixel rendering. If you try to place your image values that aren't integers, the browser will "get creative" and blur the edges.

Read this article: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

 

Experiment with using GreenSock's roundProps plugin

http://api.greensock.com/js/com/greensock/plugins/RoundPropsPlugin.html

 

If you aren't using TweenMax.js, you will have to load the RoundPropsPlugin.js file.

 

Hope this information is of some help. 

[Guest epstudio]

Hey, Thanks so much for your response Carl. Yes, I fully understand that you fine folks don't have time to re-write everybody's code for them...    hahaha

 

I think I was just seeking some validation that I wasn't way off base with my scripting (This is all very new to me...) and you provided me with just that. Cheers!

 

And thanks for those other suggestions too, I will see if I can give em' a try and figure them out. 

 

Much appreciated!