[Creating html5 banners in Adobe Edge, Google GWD or by hand?]

Thanks. Try page on mobile.

Yeah the page will work on mobile, what i ment is, does publisher / ad servers accepts +100kb file size?

I got a Adobe Edge format rejected (by Smart ad if i recall) and have been doing them by hand since then.

[Creating html5 banners in Adobe Edge, Google GWD or by hand?]

I dont understand negative propaganda from some people about the best application for HTML5 animation Adobe Edge Animate.

 

1. IAB recommends 200 kb zipped and biggest ad servers between 150-200 kb zipped.

2. From Adobe Edge Animate CC 2014.1 release, application use only Edge Runtime JS API which is 30 kb zipped.

3. For images of banner stay free between 120-170 kb zipped.

4. Using compressed tiny PNG which preserve quality and transparency and reduce size by 50-80% can have over 20-30 pictures for those 120-170 kb zipped.

 

Take a look what kind of banners is posible with 100 kb zipped and only timeline work without any coding for only 1h work per banner.

http://www.marjantrajkovski.com/html5-banners.html#adobe-edge-animate-html5-banners

Hi,

really nice work, I noticed you have a mobile icone as well next to these banners, did you manage to get your adobe edge formats accepted on mobile?

[usefull resource for html5 ads]

Hi,

 

I use to do a lot of html5 ads for mobile, although I don't think GSAP would be good on mobile ads, I can see it's value on desktop ones.

 

I just got a new request from a client to adapt desktop flash ads to html5, they will serve the ad with DoubleClick.

Doing research, i just came across that cool video about hand coding adword ads and DCM ads an tought i would share it here.

 

https://www.doubleclickbygoogle.com/articles/how-build-html5-ads-step-step-workshop/

 

I can see better now how easy it would be to implement GSAP in the workflow (they are mentioning it briefly around 25:00)

[Typewriter effect]

Hi, thanks for your replies .

I made a couple of changes including your idea Diaco.

 

so now you can specify a easing function when creating the object.

    var easingPower4 = new gsapTypeIt({
      el: document.getElementById('ContainerEl'),
      word: 'simple example',
      easing: Power4.easeInOut
    });

the easing option is set to Linear.easeNone by default.

you can use any easing function, in my codepen I am loading TweenLite, but you can load Tweenmax or EasePack.

 

I also added a charterPerSecond option this would make all rotating words type at the same speed. or will save you test/calculation when working with dynamic text, long paragraphs and such.

 

With a long text:

     var cpsParagraphe = new gsapTypeIt({
      el: document.getElementById('ContainerEl'),
      word: 'Some long string ...............',
      charterPerSecond: 3
    });

With rotating words that have different length ( still have a little bug to fix with the appended words)

var rotating3 = new gsapTypeIt({
      el: document.getElementById('ContainerEl'),
      rotateWords: true,
      delay: 0,
      charterPerSecond: 3,
      rotateWordsOptions : {
        wordsList : ['can', 'have different length','but are typed at the same speed'],
        cycle: false,
        append: true
      }
      
    });

See the Pen doaEOJ by Options-it (@Options-it) on CodePen

[Typewriter effect]

HI,

Nice post I tried as well to achive this effect with GSAP but i wanted an Array of word typed inside a sentence one after the other and cleared each time.

I did not want to use tweenMax to keep the weight as low as possible and trying with SplitText i had wierd results on load.

 

so I tried that with TweenLite, CSSPlugin and TextPlugin. And got completely carried away

 

find bellow the codepen link to a little javascript object I built.

 

I used a touch of css keyframe animation for the blinking of the cursor to avoid using "yoyo" which i belive is only avaliable on TweenMax.

also you will need a css clas .old with "display:none" so the cursor will stay next to the last charter

 

it's currently work in progress but you have the following options :

 

el: a dom element //the element you want to contain the typewriter (should be inline or inline-block)

elClass: string  //the class to apply to that element on start (defaut empty)

rotateWords: boolean // if you want a rotating array of words

rotateWordsOptions: object //an object with the settings of the rotating words animation

                                    inside this object:

                                    wordsList: Array // an array of words to type

                                    cycle: boolean // if the animation starts again after the last word is typed Default false

                                    clear: boolean // if you want the words to be cleared each times (selected and deleted) Default: false

                                    clearingDuration: number // duration of the clearing in seconds Default 2    

                                    clear_background: hexa color or css name in quotes //Background Color of the selected text before it gets cleared Default '#000'

                                    clear_color: hexa color or css name in quotes //Color of the selected text before it gets cleared Default '#fff'

                                    original_background: hexa color or css name in quotes //Original background of the text (to reset after clearence) Default 'transparent'

                                    original_color: hexa color or css name in quotes //Original color of the text (to reset after clearence) Default #000

                                    append: boolean // if you want the text to be appended isted of cleared (see the codepen bellow) default: false

                                    pause: boolean // if the animation should stop/pause between each words Default false

word: string // if you are typing a single sentence or word and not using the rotateWords

cursorSign: string //set the currsor to what you want could be a symbol or a special charter Default: "|"

autoPlay: Boolean // if the type animation starts on load (you can trigger it later) Default : true

delay: number //Delay before the word animation starts or between each word rotation. (the cursor sohould blink during that time) Default: 2

duration: number //The duration of the type (for the single word or for each rotating words)

 

 

here is a codepen example

See the Pen doaEOJ?editors=101 by Options-it (@Options-it) on CodePen

 

The first example is set to autoPlay, the two other one are triggered by clicking the buttons.

 

I would love to have some feedback as it's my frist try at something like that