options-it

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.

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?

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)

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 } }); check it out on codepen

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 http://codepen.io/Options-it/pen/doaEOJ?editors=101 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