Jump to content
GreenSock

ektorp

HTML5...is it or isn't it?

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 would like to get the community’s input on some thoughts about the current state of interactive development. I have been a flash developer for the past decade, and like the rest of us, have adapted to industry dynamics now using JavaScript & CSS for interactive work previously done in Flash. Coming from a Flash background GSAP JS has been amazing and I have been able to do awesome work with it. My work, like the rest of us, involves using GSAP JS to animate and manipulate DOM elements to create interactive effects. My question is…is this really and truly HTML5?

 

I was recently in a project team meeting getting compliments on the HTML5 project I recently did using GSAP JS. I’m sure it’s not uncommon for those of us using GSAP JS to get similar responses. Although I appreciate the positive feedback, I feel it is a bit misleading as I do not feel it is true HTML5. Yes, TweenMax can manipulate any JS property and canvas elements but I, and I believe the most of us, are simply using JavaScript to manipulate simple page DOM elements. As long as everything looks and works fine, a part of me wants to let people say and think what they like, but faced in front of a client is this appropriate to sell a feature or technology I do not feel is truly and technically HTML5? I would appreciate feedback on this subject.

Link to comment
Share on other sites

Thanks for the comments and question.

 

Yeah, we're well aware that HTML5 is strictly the latest version of HTML and on its own HTML5 is just a matured markup language that doesn't really do anything terribly visually fancy for the end user. And I'm sure as you know, right or wrong, HTML5 also has taken on more of a generic meaning of a combination of HTML5, CSS3 and JavaScript. 

 

Regardless of how technically accurate you want to be, at the end of the day, when you tell your client (or anyone) that you are building a site with HTML5, it basically boils down to "it's not Flash". 

 

HTML5 animation could mean CSS-driven animations, JS DOM animations, or JS canvas animations.

 

Personally I've seen the phrase HTML5 Canvas Animations quite often. Is JavaScript doing the heavy lifting? Yes, is canvas an HTML5 element? Yes. Can GSAP run HTML5 canvas elements? Yes. Can GSAP animate HTML5 DOM elements? Yes. 

 

So even from a technical view, it can be argued that GSAP does do HTML5 animations.

 

Do a google search for HTML5 Animation. Millions of results, none of them have anything to do with any native animation capabilities of the HTML5 language as they don't exist. Like it or not HTML5 has taken on new meaning. 

 

Trust me, I definitely know where you are coming from and appreciate you asking.

I'm interested to hear what more of the community members think.

 

And don't worry, if you want to avoid the HTML5 label, there is nothing wrong with telling your clients you will be using the same JavaScript animation engine as the FWA Site of the Year:)  http://www.thefwa.com/articles (sorry, had to throw that in there).

  • Like 3
Link to comment
Share on other sites

This is certainly something that can go depending on what you think HTML5 is.

 

The way I see it is that CSS3 2D/3D support, as well as Canvas and SVG are accepted as part of the specification of HTML5. All of them have animation/transition capabilities, therefore the use of a JS tool (like GSAP) in order to animate DOM elements, doesn't fall far away of being considered HTML5.

 

Also you should consider the fact that there are several code tools used for CSS animations, so in that case the question could be, if there's DOM element manipulation but the manipulation is used to animate that DOM element via CSS animations, can that be considered HTML5 even if the technology (CSS animations) is HTML5?.

 

Of course GSAP has it's own way but the end result is change the CSS properties of DOM elements, something CSS animations do as well. Perhaps the road is not the same (and you can tell that when it comes to performance) but at the end the result IS the same, DOM elements being animated in different ways, but being animated nonetheless.

 

Just my two cents.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I don't have much to add to the excellent comments already shared - "HTML5" is just a bucket that people have dumped a lot of stuff into (meaning-wise). It really bothered me at first too, like "wait, JavaScript isn't HTML...neither is CSS3...what the heck are people talking about? Am I missing something?" But like most industries, our's has coined some terms and phrases (for better or worse) and "HTML5" is a lot more convenient to say than "JavaScript, CSS3, HTML5, WebGL...." you get the point. 

 

When Kleenex came out, they advertised well and whenever someone sneezed, they'd ask "may I have a Kleenex?" Everyone knew what they meant. It was part of our cultural vernacular. It'd sound clunky to say "facial tissue" even if that's more accurate. It isn't like you'd go "um, no, I have facial tissues from another brand...no Kleenex. Sorry."

 

Good question. And congrats on getting the positive feedback on your work. Please feel free to share :)

  • Like 3
Link to comment
Share on other sites

I thought i would chime in to add to all the great minds before me.

 

If you look at the HTML5 specification, you will see there are actually 2 different versions of the HTML5 specification. One was published by the W3C and the other by the WHATWG. The HTML5 specification maintained by the WHATWG has additional APIs than the W3C HTML5 spec. Even though they are maintained by the W3C, but just in separate specs.

 

Some of the API's have been around for awhile, but there was no documentation for them, so here comes HTML5 to rescue! The different HTML5 API's actually use JavaScript to interact and perform tasks. Like the Web Workers API (W3C, WHATWG), Web Storage API (W3C, WHATWG), Canvas 2D Context (W3C, WHATWG), and many more HTML5 API's.

 

So the fact that just because JavaScript is mentioned when people refer to HTML5, I think is trivial at best . Since HTML5 is much more than just new semantic tags, but a broader range of web technologies and specifications to deliver a great web experience. So i guess my point is that a majority of HTML5 API's need JavaScript to work, since that is the syntax used by those HTML5 API's.

 

I would have to agree with the above posts by Jack, Carl, and Rodrigo.. that the term HTML5 is a broad term that can mean a lot of different web technologies. GSAP JS has a broad range of uses in animating Canvas elements, DOM elements, CSS3 properties, and any other object or property. So GSAP JS isn't just limited to animating CSS3 properties. It uses JavaScript syntax just like HTML5 API's to animate HTML5 DOM &, SVG, Canvas elements, and so much more.

 

But in my opinion i would consider GSAP JS, HTML5 .. because it gives you a great way to interact with HTML5 assets, and parts of the HTML5 API specifications that use JavaScript syntax.

 

GSAP allows you to interpolate between starting and ending values in simple or complex ways... animating with timelines, which is where Animation has its roots in.. Timing is everything!

 

But that's just my opinion, Thanks for starting this Topic! :)

  • Like 2
Link to comment
Share on other sites

In light of Jonathan's great comment I'd like to share another piece of my mind here regarding specifications.

 

Specifications is just a word to refer to standards. Standards set the common tongue in a specific area, what you do and how you do it among others. Due to my college studies (chemical engineering) and the work I had for more than 8 years in fluid transport and mechanics, I dealt with standards almost every single day. Since there are some people sitting all day behind a desk thinking about the best way to do stuff, they sometimes forget about how the standards are finally used in a real life scenario. A little example, an electric pump for non newtonian fluid (like yoghurt for example) comes with a manual of over 200 pages, with all sort of recommendations, some of them international standards created and tested by ISO. But at the end the pump must be installed in a specific location and conditions that sometimes don't meet the standards. You'll find examples like this one everywhere in the world, just like everyone I had my stupid moments when I made everything "by the book" and some guy with 20 years of experience tells you:"Hey kid, this is how you do it".

 

Here's the same thing, although HTML5 is a language specification, the fifth revision of it, but because of the features tolerated by it (CSS3, Canvas, SVG, etc) and the possibilities emerged by this new technologies, the whole package is now known as HTML5 even if theory states that HTML5 is a code specification.

 

My point is that practice always leads to the "real standard" which ultimately a mix of theory and practice, and is the way to say:"this is how it gets done", and the good folks of W3C do a really great job and some purists would like that everything would be like the standards says, but the reality is that we are in a moment when you have to meet the needs of different users, with different browsers (even IE6 or IE7 sometimes), which means that the use of the specification will vary, even from one developer to another. Even here in the forums you'll find a lot of different approaches for the same issue.

 

To summarize HTML5 is a spec but also a mix of technologies used for web development and some of the most influential people in this area call this mix HTML5. Perhaps when the next HTML and CSS specs comes up, we'll be referring to another terminology, we'll have to sit and wait.

 

Rodrigo.

  • Like 1
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.
×