Jump to content
GreenSock

alwayzambitious

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

By alwayzambitious, in Banner Animation. Views: 5,061

Recommended Posts

Posted

Thats cool GSAP has a course on Lynda!

 

http://www.lynda.com/HTML-tutorials/Creating-HTML5-Banner-Ad-GreenSock-GSAP/373558-2.html?utm_source=StrongView&utm_medium=Email&utm_campaign=nc-former-nc-20150727&utm_campdate=Mon,%2027%20Jul%202015%2013:34:23%20-0700%2B%7C%2Bid_user&utm_content=Marketing_US&_mid=1674131&_rid=1674131.21403.225523&utm_LDCUID=14044

  • Like 2
Link to comment
Share on other sites
Posted

I've been hoping for this for a long time.  Yeah!

Link to comment
Share on other sites
Posted

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

Congratullations to be in Lynda.com

Link to comment
Share on other sites
Posted

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/

Link to comment
Share on other sites
Posted

Thanks for the mention Carl, the GreenSock Workshop is just behind the corner.

 

Anyone can enter the free giveaway and win a free access to almost 8.5hrs of GreenSock tutorials.

Link to comment
Share on other sites
Posted

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

 

 

 

 

Link to comment
Share on other sites
Posted

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?

Link to comment
Share on other sites
Posted

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.

Link to comment
Share on other sites
  • 3 weeks later...
Posted

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

Link to comment
Share on other sites
  • 2 weeks later...
Posted

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. 

Link to comment
Share on other sites
  • 4 months later...
Posted

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?

Link to comment
Share on other sites
Posted

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
Link to comment
Share on other sites
Posted
On 8/19/2015 at 9:34 AM, somnamblst said:

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

 

See the Pen nKCsI by _fbrz (@_fbrz) on CodePen

 

  • Like 2
Link to comment
Share on other sites
  • 2 weeks later...
Posted

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.

Link to comment
Share on other sites
  • 4 months later...
Posted

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

Link to comment
Share on other sites
Posted

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

Link to comment
Share on other sites
Posted

Thank you! I am learning the hard way  :|

Link to comment
Share on other sites
  • 1 year later...
Posted
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...

See the Pen nKCsI by fbrz (@fbrz) on CodePen

 

My brain just exploded. --Never knew this.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account