Jump to content
Search Community

AMPhtml WTF?

somnamblst test

By somnamblst
in Banner Animation

Moderator Tag
 Share

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. 

1
2
Page 2 of 2  

Recommended Posts

Dipscom test

Dipscom

Posted
Posted

The Beef I personally have with AMP is two:

 

1) Is gatekeeping. No matter how you dress it, it is. Ultimately, Google has (possibly) seen how profitable it is to have a walled garden (Facebook) and is going after a similar thing without admiting it.

2) AMP, at the end of the day in the most part, is nothing more than a super strick environment. By controlling the environment, Google can remove all the bloat that third parties inject on whatever page/ad is being served. If one was to strip out the ads and tracking of their sites and do a good job of only serving what's needed to display the page, AMP delivers no significant benefit.

  • Like 1
Link to comment
Share on other sites
somnamblst test

somnamblst

Posted
  • Author
Posted

Do we have ourselves to blame, somewhat, post 40K SWF?

 

Having spent so many years as a K weight Scrooge, I can't not care.

 

However, I know I have coworkers who don't crop bitmaps, or who created an animated cartoon in a banner ad, using bitmaps, that crawled live.

 

Once the 40K limit was lifted, some view the limit as so what, and don't optimize.

 

I on the other hand love to brag about my 20K zipped banners.

Link to comment
Share on other sites
Dipscom test

Dipscom

Posted
Posted

I wouldn't say the blame lie on developers.

 

There will always be the ones who care and the ones who don't.

 

The blame, in my view, is in human nature. The people who don't care are usually far more numerous than the ones who do and unless the ones that care make a ton of noise, crap just builds up in the background until it starts to stink. Then, someone comes up with a *revolutionary* ideas and techs away the problem.

 

Oh.

Link to comment
Share on other sites
flysi3000 test

flysi3000

Posted
Posted

Nah, if there's blame, I think it can be divided between the excessive use of tracking scripts by publishers, and the scummy ad platforms that try to inflate their ad views to rake in more $$. And, yes, devs that are sloppy and get lax about best practices. (raises hand)

  • Like 1
Link to comment
Share on other sites
Vamsee Jasti test

Vamsee Jasti

Posted
Posted

flysi3000, thanks so much for the excellent summary of the workshop. 

 

BTW, it's always possible to hand code an ad that would be faster than an AMPHTML version of the ad. In which case, it's best those developers continue to hand code their own ads. As discussed, AMPHTML ads are simply a well-lit path for writing good ads if one doesn't have the knowledge, time or the capacity to write highly performant ads. 

 

  • Thanks 1
Link to comment
Share on other sites
  • 2 months later...
emmanuelulloa test

emmanuelulloa

Posted
Posted

I have several questions:
1) Do AMP ads run locally? Or do they have to be run in an environment? 

2) How do I go about creating an AMP Ad in code (not GWD).

3) Is there a sample .zip file we can look at? What I have found is https://playground.amp.dev/?url=/static/samples/standalone/amp-ad/ and there is no animation happening there.

I know I go to https://amp.dev and start reading... but at the moment I only want to do ads not general web development.

Link to comment
Share on other sites
joe_midi test

joe_midi

Posted
Posted
 
 
 
12 hours ago, emmanuelulloa said:

1) Do AMP ads run locally? Or do they have to be run in an environment? 

 

AMP Ads should run anywhere, but to actually see the AMP parts in action, it is likely that you'll need a compatible Ad Server to test them. Or you might be able to use the Playground.

 

 
 
1
12 hours ago, emmanuelulloa said:

2) How do I go about creating an AMP Ad in code (not GWD).

 

How you would normally code HTML5 + CSS, just remember to use the appropriate <html amp4ads> meta tag and amp scripts.

https://github.com/ampproject/amphtml/blob/master/extensions/amp-a4a/amp-a4a-format.md

 

 
 
 
12 hours ago, emmanuelulloa said:

3) Is there a sample .zip file we can look at? What I have found is https://playground.amp.dev/?url=/static/samples/standalone/amp-ad/ and there is no animation happening there.

 

There is a limit to JS in A4A, so you'll need to write your animations as CSS keyframes/transitions or compatible WAAPI

 

 

 

  • Like 1
Link to comment
Share on other sites
emmanuelulloa test

emmanuelulloa

Posted
Posted

Thanks @joe_midi!  After a lot of digging through I did find the correct website documentation (that drop down menu gets lost in the website).

 

AMP ADS for beginners:

 

I think we should start in the following order (if you already have a grasp of what the whole AMP thing is about):

Read the basic introduction at: https://amp.dev/documentation/examples/introduction/amphtml_ads_hello_world/?format=ads

Follow the tutorial at: https://amp.dev/documentation/guides-and-tutorials/start/create_amphtml_ad/?format=ads

If you need to render AMPHTML then play around with the code in the playground: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fstyle-layout%2Fbanner_ad&mode=300x250

Want to know if your code is valid? Test it on the validator: https://validator.ampproject.org/#htmlFormat=AMP4ADS

 

With this said there another set of questions that came up:

 

How can a developer set up some sort of environment to test the files without the playground?  Like a local Ad Server.

Are AMPAds supposed to be responsive? Looking in the playground it seems not?

Is there a spec sheet for ads? Animation time limited to 15 seconds? Every ad must have an exit? Can we do multiple clicktags?

 

 

Link to comment
Share on other sites
Vamsee Jasti test

Vamsee Jasti

Posted
Posted
On 6/7/2019 at 8:42 AM, emmanuelulloa said:

How can a developer set up some sort of environment to test the files without the playground?  Like a local Ad Server.

This depends entirely on your development setup. From AMP's POV, all you need is an editor and and a browser - just like any other web development. 

On 6/7/2019 at 8:42 AM, emmanuelulloa said:

Are AMPAds supposed to be responsive? Looking in the playground it seems not?

Responsive can mean many things but at a high-level, AMP does support responsive layouts, media queries and srcsets: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/art_direction

On 6/7/2019 at 8:42 AM, emmanuelulloa said:

Is there a spec sheet for ads? Animation time limited to 15 seconds? Every ad must have an exit? Can we do multiple clicktags?

It's useful to understand that AMPHTML ads is a generic framework that allows you build the display ad. The display ad then needs to be uploaded to an ad interface for delivery which might have their own restrictions. 

For the former, the best way to ensure that the AMPHTML ad is valid is to make sure that the Ad validator is good: https://validator.ampproject.org/#htmlFormat=AMP4ADS (there are also more developer friendly ways to integrate the validator into you workflow). For the latter, you should lookup instructions for where you are uploading the ad to. For example: https://support.google.com/admanager/answer/9342115?hl=en&ref_topic=7643690 and https://developers.google.com/authorized-buyers/rtb/amp-ads and https://support.google.com/google-ads/answer/1722096 etc.

 

Hope that helps.

On 6/7/2019 at 8:42 AM, emmanuelulloa said:

 

 

Thanks @joe_midi!  After a lot of digging through I did find the correct website documentation (that drop down menu gets lost in the website).

On 6/7/2019 at 8:42 AM, emmanuelulloa said:

Thanks @joe_midi!  After a lot of digging through I did find the correct website documentation (that drop down menu gets lost in the website).

 

AMP ADS for beginners:

 

I think we should start in the following order (if you already have a grasp of what the whole AMP thing is about):

Read the basic introduction at: https://amp.dev/documentation/examples/introduction/amphtml_ads_hello_world/?format=ads

Follow the tutorial at: https://amp.dev/documentation/guides-and-tutorials/start/create_amphtml_ad/?format=ads

If you need to render AMPHTML then play around with the code in the playground: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fstyle-layout%2Fbanner_ad&mode=300x250

Want to know if your code is valid? Test it on the validator: https://validator.ampproject.org/#htmlFormat=AMP4ADS

 

With this said there another set of questions that came up:

 

How can a developer set up some sort of environment to test the files without the playground?  Like a local Ad Server.

Are AMPAds supposed to be responsive? Looking in the playground it seems not?

Is there a spec sheet for ads? Animation time limited to 15 seconds? Every ad must have an exit? Can we do multiple clicktags?

 

 

AMP ADS for beginners:

 

I think we should start in the following order (if you already have a grasp of what the whole AMP thing is about):

Read the basic introduction at: https://amp.dev/documentation/examples/introduction/amphtml_ads_hello_world/?format=ads

Follow the tutorial at: https://amp.dev/documentation/guides-and-tutorials/start/create_amphtml_ad/?format=ads

If you need to render AMPHTML then play around with the code in the playground: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fstyle-layout%2Fbanner_ad&mode=300x250

Want to know if your code is valid? Test it on the validator: https://validator.ampproject.org/#htmlFormat=AMP4ADS

 

With this said there another set of questions that came up:

 

How can a developer set up some sort of environment to test the files without the playground?  Like a local Ad Server.

Are AMPAds supposed to be responsive? Looking in the playground it seems not?

Is there a spec sheet for ads? Animation time limited to 15 seconds? Every ad must have an exit? Can we do multiple clicktags?

 

 

 

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

Onlymegallc

Posted
Posted

We have recently added AMPHML animated ads export for Google Ads https://onlymega.com/amphtml-banner-maker/ and the only way to create animations is to use https://amp.dev/documentation/components/amp-animation component that controls CSS animations. GreenSock is not supported because no JavaScript is allowed in A4A.

For Google Ads Exits are not required because your banner will be placed in a special iframe with an overlay that will handle all mouse interactions and clicks using landing urls from Google Ads campaign.

BTW it's still possible to use normal html5 banners (150kb) and even hosted html5 banners with 2.5mb size limit (with google certified technical vendor like https://bannernow.com/ ).

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

GreenSock

Posted
Posted
44 minutes ago, emmanuelulloa said:

It would be nice to have some sort of js functionality into GSAP where I would put in a regular tween and it will output an amp-animation JSON.

 

Are you saying you'd like us to spend time developing something that'd help you NOT use GSAP? ;)

 

Doesn't this assume that amp-animation can match all of GSAP's capabilities? I'm pretty sure it can't even come close, so how would such a tool work? Would it have to find all the missing capabilities and console.warn() about each and every one and then leave it to you to find alternate solution? Sounds pretty fraught with headaches. 

 

I'm hopeful that the AMP folks just allow/whitelist GSAP, especially given its marketshare and performance. I'm working on 3.0 right now and am pretty excited about all the features plus we're reducing file size by dropping support for super old browsers like IE8. It's shaping up nicely. But it won't be ready for probably a couple of months (it's a lot of work). 

  • Haha 2
Link to comment
Share on other sites
emmanuelulloa test

emmanuelulloa

Posted
Posted
Quote

Doesn't this assume that amp-animation can match all of GSAP's capabilities? I'm pretty sure it can't even come close, so how would such a tool work? Would it have to find all the missing capabilities and console.warn() about each and every one and then leave it to you to find alternate solution? Sounds pretty fraught with headaches. 

 

Nope, it will only "render" opacity and transform.  So you put in a tween and it spits out from 2 to 100 css keyframes.

Quote

I'm hopeful that the AMP folks just allow/whitelist GSAP, especially given its marketshare and performance.

Hopefully they do (since they got "bodymovin" there).  If you hear something let us know please ?

Quote

I'm working on 3.0 right now and am pretty excited about all the features plus we're reducing file size by dropping support for super old browsers like IE8.

Nice!

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted
3 hours ago, emmanuelulloa said:

Nope, it will only "render" opacity and transform.  So you put in a tween and it spits out from 2 to 100 css keyframes.

 

I'm sure that sounds pretty simple, but there are actually all kinds of problems:

  1. What about eases that simply can't be replicated in CSS keyframes, like Elastic, Bounce, CustomEase, etc.?
  2. What about situations where individual transform components like rotation, scaleX, scaleY, x, y, etc. are animating independently, like in overlapping ways? CSS animation keyframes can't do that properly. 
  3. What about browser quirks and inconsistencies, like animating SVG transforms? For example, transform-origin is notoriously buggy across browsers and percentage-based values simply aren't supported. 
  4. Are we really considering it a "win" to output 100 CSS keyframes to avoid 1 line of GSAP code (and loading the GSAP library...which could easily be cached ubiquitously) ? 

I could go on :)

 

Are you saying they allowed "Bodymovin'" but they won't allow GSAP yet? [scratches head] Do you know what the reasoning is there? I'm genuinely curious. 

  • Like 2
Link to comment
Share on other sites
emmanuelulloa test

emmanuelulloa

Posted
Posted
13 hours ago, GreenSock said:

 

I'm sure that sounds pretty simple, but there are actually all kinds of problems:

  1. What about eases that simply can't be replicated in CSS keyframes, like Elastic, Bounce, CustomEase, etc.?
  2. What about situations where individual transform components like rotation, scaleX, scaleY, x, y, etc. are animating independently, like in overlapping ways? CSS animation keyframes can't do that properly. 
  3. What about browser quirks and inconsistencies, like animating SVG transforms? For example, transform-origin is notoriously buggy across browsers and percentage-based values simply aren't supported. 
  4. Are we really considering it a "win" to output 100 CSS keyframes to avoid 1 line of GSAP code (and loading the GSAP library...which could easily be cached ubiquitously) ? 

I could go on :)

 

Are you saying they allowed "Bodymovin'" but they won't allow GSAP yet? [scratches head] Do you know what the reasoning is there? I'm genuinely curious. 

 

Excellent and valid points ?.  And until we know that GSAP is whitelisted we have to still do all that by hand while trying to convince the client to reduce the scope of the animation in the banner ?.

  • Like 1
Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

@Vamsee Jasti I'd welcome your input here. Has there been any movement toward whitelisting GSAP? If not, is there a particular thing getting in the way? As I mentioned above, I'm working on a complete rewrite for GSAP 3.0 with an aim to make it even smaller, more efficient, and we're adding some features as well as making the API more concise. Perhaps with the launch of 3.0, that can also serve as an opportunity for your team to whitelist it for AMP (if there isn't willingness to do it for 2.x)? 

 

Again, if there are sticking points that need to be addressed, I'm all ears. I'd also be curious to hear your input regarding the last few comments above and why it's not feasible to just port GSAP to CSS code or a minimalistic tool. 

  • Like 3
Link to comment
Share on other sites
1
2
Page 2 of 2  

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.
×
×
  • Create New...