alwayzambitious

Now on Lynda.com Creating an HTML5 Banner Ad with GreenSock (GSAP)

Recommended Posts

Maybe the GreenSock developers can make some more video tutorials and examples to spread faster the lib.

Congratullations to be in Lynda.com

Share this post


Link to post
Share on other sites

Thanks for the comments, guys.

 

Cormack,

 

Anything in particular (basics, advanced concepts, games, banners) you would like to see covered in a video? 

We definitely take those suggestions seriously.

 

Fortunately (for everyone) it seems a lot more training is becoming available.

We just released our eBook: https://www.nobledesktop.com/books/gsap and Petr Tichy is putting out some great videos soon too: https://ihatetomatoes.net/greensock-workshop-coming-soon/

Share this post


Link to post
Share on other sites

Cormack,

 

Anything in particular (basics, advanced concepts, games, banners) you would like to see covered in a video? 

We definitely take those suggestions seriously.

------------------------------------

 

@Carl:

 

Yes, i think that the reality has showed that people likes video tutorials, for many reasons, but video tutorials are easier to follow and learn, thats why people goes to lynda.com. 

 

(In fact the video explanations that you offer in the site are great, very easy to understand).

GSAP is a great tool, but some video course that covers the most important concepts will be great for all the new people that are searching how to develop all this things. Specially now that people are looking massively for a kind of replacement for Flash.

 

Just like a comment, but that shows a lot behind the "video tutorial" thing, i found GSAP watching  some video tutorials about Flash first and latter about CreateJS in video2brain. This last one video was the one that makes me understand that i could do similar things in HTML5/CSS3 with the javascript version of GSAP.

 

 

Thanks

 

 

 

 

Share this post


Link to post
Share on other sites

Thanks for the comments, guys.

 

Cormack,

 

Anything in particular (basics, advanced concepts, games, banners) you would like to see covered in a video? 

We definitely take those suggestions seriously.

 

Fortunately (for everyone) it seems a lot more training is becoming available.

We just released our eBook: https://www.nobledesktop.com/books/gsap and Petr Tichy is putting out some great videos soon too: https://ihatetomatoes.net/greensock-workshop-coming-soon/

 

hi Carl,

 

is the ebook any different than the printed version? At my job we have few members that have purchased the print version of the book and would love to be able to get the e-book version. If it's a new version, how much content has changed?

Share this post


Link to post
Share on other sites

HI FunkyBudda,

 

Great question. It depends on when you bought the printed books. When we started making the eBook version (early 2015) we made the following changes

  1. 95% of the lessons were updated to use transforms (x,y) instead of (left, top). At the time the book was originally printed transforms did not have as much of a clear advantage across browsers and devices as they do today. 
  2. We removed about 5 lessons to make it a more compact and focused 2 day training manual as opposed to 3 days. 
  3. Addressed the issue that you no longer need to rely on jQuery as much for selecting elements since GSAP will tap into querySelectorAll() if not selector engine (like jQuery, Sizzle, or Zepto) is present. 

Other than very little was changed or added.

 

As of now the eBook and printed books are exactly the same. If your printed books have over 200 pages you have the old, larger, out-dated version.

Frankly, if you have the old version I do not think enough has changed that it really warrants purchasing new books or eBooks. 

 

If you have recently bought the printed books and would also like to have the eBook version, I'd suggest reaching out to Noble Desktop. I know they have upgrade pricing in place (for those who want to add the eBooks to an existing print purchase) and there might be some bulk options as well. They have excellent customer service.

Share this post


Link to post
Share on other sites

I watched it. Chris Converse said: "We don't want to use standard HTML, like H1 tags and paragraph tags, for example, because we don't want our ad to be picked up by other style sheets."

 

I had an ad that changed the site navigation to pink... So I started purposely misspelling common words like wrapper by adding an extra r, so it was wrapperr, or contenttt

Share this post


Link to post
Share on other sites

I watched this tutorial as my first step into learning GSAP and animating with HTML5/CSS/JS. Was super helpful. I would definitely recommend it to people. 

Share this post


Link to post
Share on other sites

Great tutorial. I was hoping at the end that it would cover some of the particulars for serving these ads that are created using GSAP. I have a client who uses FlashTalk  and I haven't been able to find any info about how (or if) I can serve the ads I create with GSAP into the flashTalk server tool.

Does anyone have any info about flashTalk and GSAP integration?

Share this post


Link to post
Share on other sites

Great tutorial. I was hoping at the end that it would cover some of the particulars for serving these ads that are created using GSAP. I have a client who uses FlashTalk  and I haven't been able to find any info about how (or if) I can serve the ads I create with GSAP into the flashTalk server tool.

Does anyone have any info about flashTalk and GSAP integration?

Do you mean FlashTalking? If so, they're definitely GSAP friendly & even host a copy of Greensock on their own CDN.

  • Like 1

Share this post


Link to post
Share on other sites

I watched it. Chris Converse said: "We don't want to use standard HTML, like H1 tags and paragraph tags, for example, because we don't want our ad to be picked up by other style sheets."

 

I had an ad that changed the site navigation to pink... So I started purposely misspelling common words like wrapper by adding an extra r, so it was wrapperr, or contenttt

 

I think an easier way to prevent your styles from being picked up is to just create your own elements. Any element that has a hypen "-" in its name inherits from the HTML.Element prototype, so it's totally valid. Just make sure you set it's display property to something like block or it won't have a size. It's also a good a idea to use some unique prefix for them. 

<gs-header>I'm a header</gs-header>
<gs-section>Other stuff</gs-section>

Check out the semantic sandwich...

http://codepen.io/fbrz/pen/nKCsI/

  • Like 2

Share this post


Link to post
Share on other sites

Lynda.com is hands-down one of the best sources for online learning. The videos let you work at your own pace, and the website is designed extremely well to help you keep track of what you want to learn and what you have already learned.

Share this post


Link to post
Share on other sites

Hi there,

Getting to grips with GS. Has anyone finished this Lynda tutorial? All was well until I started the animation part and I can't get it to work. I have triple checked all the code and it just won't animate, I'm stumped. Anyone see what I am doing wrong here?

Files attached.

Thanks in advance. 

01_01.zip

Share this post


Link to post
Share on other sites

Press F12 to bring up browser console and you will see the bugs. You forgot to place 2 commas.

Share this post


Link to post
Share on other sites
On 1/16/2016 at 3:03 PM, OSUblake said:

 

I think an easier way to prevent your styles from being picked up is to just create your own elements. Any element that has a hypen "-" in its name inherits from the HTML.Element prototype, so it's totally valid. Just make sure you set it's display property to something like block or it won't have a size. It's also a good a idea to use some unique prefix for them. 


<gs-header>I'm a header</gs-header>
<gs-section>Other stuff</gs-section>

Check out the semantic sandwich...

http://codepen.io/fbrz/pen/nKCsI/

 

My brain just exploded. --Never knew this.

Share this post


Link to post
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.