dom or canvas? and practical website tutes with gsap

[dneckles]

1. unfortunately I see a whole lot of small snippets of code on codepen, but i need to build a full website that i can animate with greensock just like i used to w/ flash but in all of the books i have,

 

csstricks.com is awesome but it doesnt show how to build in conjunction with GSAP.

 

2. also the other frustration is.. should I build in canvas or use the css dom?... css is smoother canvas has performance issues tho kinetic helps that

 

What information am i missing or not considering. I'm sure its my learning style. I see Kinetic looks good but besides an experiment here or there, id like to how its used in a full website.

 

3. id also be interested in sharing this info on others once i learn how to properly structure,

 

Thanks for reading.

[dneckles]

After a little research, it seems as if Kinetic (competitor to Easeljs?) is new standout to build oop like sites. it has that grouping structure like the ability to do Movieclips in flash

 

So there goes the DOM method of building sites.

Also, no other resources out there use canvas for building full sites.

 

Still looking...

[dneckles]

Real World Benefits of OOP with AS3 for the Completely Terrified: GreenSock Homepage Animation Case Study

http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/

 

 

Is there a version of the above tutorial for javascript canvas oop sites.....Most examples were so small that I could not see how they might be applied to the kind of full websites i build.

 

Apologies is my questions werent clear.

[Carl]

Hi and thank you for your interest in using GSAP. 

 

I think the lack of "full site" canvas tutorials is due the fact that not a lot of people are advocating the use of canvas for full sites. A few negatives for building a full site in canvas:

 

- performance

- partial support in IE8

- accessibility 

- search engine optimization

- fixed dimensions

- the larger the canvas, the worse the performance (generally speaking)

 

Many of the same reasons developers (even skilled and loyal Flash developers) would argue that Flash was a poor choice for building full sites apply to building sites with canvas. 

 

My thinking has always been, use canvas and Flash for things that CSS/HTML can't do, don't try to replace what they do (unless there is a significant benefit). 

 

Consider this,  Adobe never used Flash to build adobe.com. KineticJS.com isn't a canvas site and http://createjs.com/#!/EaselJS isn't a canvas site either.

 

----

 

Now as far as tutorials go, keep in mind that GSAP JS is fairly new. Having resources that allow people to learn the API is a huge priority for us. The most important thing for any API is clear and thorough documentation. A tremendous amount of work has gone into describing every property and method of every part of GSAP. Are there areas that may need improvement? Possibly (please let us know).

 

When trying to describe or learn any part of an animation platform, visualization is key. It may take 3 paragraphs to describe how a single feature works, but a simple demo can get the key points across in a matter of seconds. That's where our Jump Start comes in http://www.greensock.com/jump-start-js/

 

You can very quickly get a visual overview of the foundational concepts that all of GSAP is built upon. Is it enough to become a master? Certainly not.

 

We fully acknowledge that people have different learning styles, Some people like things spelled out in verbose chronological order. Our Getting Started Guide contains a tremendous amount of information for those with the patience to read through it all. http://www.greensock.com/get-started-js/

 

Some folks really need to sit back and watch a video. I've created nearly a hundred video tutorials. I love doing it, but you know what? Whenever I'm trying to learn something and all I can find is a video, I often shrug in dismay thinking "I don't have time to sit through all this! Give me a demo and source code"

I can assure you, you will definitely be seeing some videos here as many people find them very valuable and they have a incredible power to break down complex concepts. 

 

Still, you can have the best documentation, videos and articles in the world but people aren't going to learn a thing until they start experimenting on their own. To get started with the simplest of GSAP concepts you have to create an html page, write some css, link up the library and although its fairly easy, its a barrier to people getting their hands dirty and having some fun. This is where codepen demos are of huge value. Many developers don't want to just see something work, they need to tweak it, try to break it and see for themselves exactly how it works. 

 

Our primary goal right now as far as education goes is allowing people to understand the core concepts that drive the platform. To do that  we're experimenting with very simple codepen examples like this: 

See the Pen exGbj by GreenSock (@GreenSock) on CodePen

 

Examples like that allow you to dive right in immediately, tweak some parameters and see what happens instantly. I think a lot of developers find this incredibly valuable. 

 

In order for people to learn these concepts its important that the code is as clear and focused as possible. That staggerFrom() code would lose a lot of its value if it was surrounded by a dozen other tweens, archaic JavaScript functions or 200 lines of css.

 

Also, keep in mind that some of the codepens that we tweet about are also crafted just to show people exactly what GSAP is capable of. Those pens are focused more on grabbing attention than educating, but still people can use them as a starting point for their own exploration. win - win.

 

In summary, our goal now is to get people excited about the platform and quickly educated on how to use it. Sure there is room for more robust tutorials on "building full sites" but before we do tutorials of that scale, its imperative that there is a strong foundation in place. 

 

There can be quite a leap between understanding how something works and applying it in a practical manner on a larger scale. There really aren't any shortcuts to that, most often it takes a fair amount of patience and experience. The logical approach is to show people how to do something on a small scale so that they have a strong starting point for when they need to start scaling. 

 

The animateIn()/animateOut() methods that are discussed in that AS3 tutorial you referenced can be used in phenomenal ways in JS. In fact its one of the techniques that we are most passionate about over here. We will definitely be sharing some sample files on how to do that in the future.

 

Hopefully you have a better understanding of where we are at right now with our training materials. I assure you more are on the way and we are very concerned with offering various formats to suit all styles of learning. Your feedback is important, so don't hesitate to let us know in which ways we can be doing better to serve you.

 

Best,

 

Carl

[dneckles]

Carl. Thank you for writing this. I wasn't clear

 

Please dont mistake my question to mean that you guys aren't doing enough. You guys really are doing a lot. My prev question is not really greensock issue/question but broader html5/js/dom workflow question. I only posted my question on this forum cause using gsap is key to my workflow and i figured greensock users could show me an outside resource they used to learn how to build their sites. I didnt mean to insinuate greensock to create a new tute or learning resource that applies to full sites.

 

I get that canvas is not used for full site. If it is dom, thats fine too. I'm open to whatever the path is to get there. I think i was just trying to get a handle what is better. Thanks for settling it. I will use the animatein/animateout structure and apply it to JS.

 

I coded the first page of my site up and Im going to get started applying gsap: http://dnecklesportfolio.com/testing/index.html

 

Hope this clears up alot.