[Jack Doyle will you please save Flash?]

It will be nice GreenSock-ified version of Edge Animate which is discontinued. Anyway, is the big difference between TweenMax any Edge Animate libs? I dont understand status of Edge Animate, I am using it every day and it is work perfect but in other side is dead?

[Chrome Issue?]

Interesting fix, thanks

[Chrome Issue?]

Chrome Issue?

 

See the Pen MpjBPB by anon (@anon) on CodePen

[Video Banner]

https://www.w3schools.com/tags/av_event_ended.asp

[Inspiring HTML5 Banner Examples with GSAP]

Yeap!

All the creatives I posted were made for Google Adwords.

Amazing banner. I have tested it in Google Adwords validator https://h5validator.appspot.com/adwords#/asset?result=5763142355255296

[Inspiring HTML5 Banner Examples with GSAP]

Great, it seems unbelievable that is pack everything into 143 kb. It is like a movie.

[Adobe Animate cc: Target child mask]

Try to get a answer at Adobe Animate forum https://forums.adobe.com/community/animate or http://stackoverflow.com/questions/tagged/createjs

 

You can ask how to targeting a mask for animation that is nested inside a movieclip with CreateJS and then you can use that for GSAP.

[Banner Ad Help Needed for After Effects .mov file]

That banner is perfect for Animate CC, it can be done in one 30kb html file.

[Can't get autoAlpha in adobe animate doc / canvas to work]

It is all ok, visible:false works in Animate CC

 

 

In attached test is next code:

 

tl = new TimelineMax({repeat:-1, repeatDelay:5});

 

tl.to(this.element1, 1, {visible:false, x:"+=100"});

tl.from(this.element2, 1, {visible:false, x:"-=100"});

 

test.zip

[Can't get autoAlpha in adobe animate doc / canvas to work]

visible:false is working only on FROM, is not working on TO

[Animate CC vs hand coding]

I do that all the time? So Yes.

If you can hand code this type http://www.marjantrajkovski.com/test2/ of 10 banner sizes for one work day than you are expert and I can only congratulate to you

[Animate CC vs hand coding]

It will be nice to have some kind of Greensock Ease plugin for Classic tween in Animate CC  

[Animate CC vs hand coding]

@Web Dizajner

 

- I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions.

 

Yes I know, I am using that plugin, I have my custom XML file with almost all eases for that plugin, I am using free version then I am importing my XML. http://www.marjantrajkovski.com/html5-banners-templates/myEases.xml

 

2 Problems

 

1. Eases are not optimised, they are not functions, in final code you dont have e.g.

 

this.timeline.addTween(cjs.Tween.get(this.instance_1).to({x:160,y:85},19,cjs.Ease.cubicInOut.wait(1));

 

but

 

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:-30.8},0).wait(1).to({x:-28.6},0).wait(1).to({x:-25.2},0).wait(1).to({x:-20.3},0).wait(1).to({x:-13.2},0).wait(1).to({x:-3.4,y:170.1},0).wait(1).to({x:10.2},0).wait(1).to({x:28.9,y:170.2},0).wait(1).to({x:53.5},0).wait(1).to({x:81,y:170.3},0).wait(1).to({x:105.1,y:170.4},0).wait(1).to({x:123.2},0).wait(1).to({x:136},0).wait(1).to({x:145,y:170.5},0).wait(1).to({x:151.3},0).wait(1).to({x:155.5},0).wait(1).to({x:158.1},0).wait(1).to({x:159.6},0).wait(1).to({x:160},0).wait(1));

 

2.

Most important for me, values can not be in minus and plus and then you can not create type of eases like Back and Elastic.

[Animate CC vs hand coding]

For me, for now, there are only two things which I dont like in work with Animate CC.

 

1. CANVAS (Animate CC) vs DOM (Edge Animate).

 

For now, Canvas tecnology is not full ready for overall audience. Canvas animations are slow on 2/3 overall computers.

Computers of designer and developers are more stronger than computers of ordinary users of web.

We must wait few years for stronger overall computers.

 

2. Easing functions which exist in CreateJS are still not addopted in GUI of Animate CC for classic tweens.

 

We need something like this

[Animate CC vs hand coding]

 

some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)

Now is the safe to use sprite sheets because now is all in JS, not more JSON.

[GSAP Templates For Animate CC 2017]

Why make things easy, when you can make them complicated

 

1. Open Animate CC 2017

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

2. Create new document

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

3. Export default template ( FILE > PUBLISH SETTINGS > ADVANCED > EXPORT )

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

4. Change few things in exported template (html file):

 

In <head> section add five lines:

 

<meta name="ad.size" content="width=$WT,height=$HT">

<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js"></script>

<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>

<script>var clickTag = "http://www.example.com"; </script>

 

and clear one line:

 

$CREATEJS_LIBRARY_SCRIPTS

 

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

5. Import changed template ( FILE > PUBLISH SETTINGS > ADVANCED > IMPORT NEW )

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

6. Addionaly change few things in publish settings:

 

I personally like to merge HTML and JavaScript in one single file

( FILE > PUBLISH SETTINGS > ADVANCED > INCLUDE JAVASCRIPT IN HTML )

 

I personally like to have exported images in same folder with html file, without subfolder images

( FILE > PUBLISH SETTINGS > BASIC > EXPORT IMAGE ASSETS > UNCHECK FOLDER ICON (Toggle of...) )

 

I personally like to be responsive especially for mobile devices

( FILE > PUBLISH SETTINGS > BASIC > MAKE RESPONSIVE > BOTH )

 

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

7. Create invisible button on top of document with full size of document and give it instance name, example: exit
---------------------------------------------------------------------------------------------------------------------------------------------

8. Open Actions window ( WINDOW > ACTIONS ) and write code:

 

this.exit.on("click", function () {

window.open(window.clickTag, '_blank')

});

 

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

9. Save template for further use ( FILE > SAVE AS TEMPLATE ) or just save file somewhere on your disc

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

 

 

You dont need AdHelper - I realy dont know purpose, maybe to be smart guy

because why make things easy, when you can make them complicated

[Animate CC vs hand coding]

Interesting article for everyone who care about DPI http://sebastien-gabriel.com/designers-guide-to-dpi/

[Animate CC vs hand coding]

For example, I made this in Animate;

Popular bug in Chrome and interesting bug in Firefox with WATCH NOW button.

[Reversing scale and cross-dissolve tweens: AnimateCC + GSAP (cross-post of sorts)]

canvas.addEventListener("click", click.bind(this));

function click()

{

  TweenMax.from(state2_instance, .75,{scale:.75, opacity:0, ease:Quad.easeInOut});

}

[Trouble with Cory Hudson's sample files]

You are free to use my templates for Animate CC 2017 http://www.marjantrajkovski.com/html5-banners-templates/html5-banners-templates.zip

 

 

If you are using GSAP:

 

1. Open GSAP template

 

2. Change the size of banner in properties

 

3. Create movie clip with instance name e.g txt1 which is ID for GSAP

 

4. Open action panel and create GSAP animation e.g.:

tl = new TimelineMax();

tl.from(this.txt1, 1, {x:-100, ease:Back.easeOut});

 

5. Save with your custom name e.g. mybanner and publish

[Is it possible to animate spritesheet through GSAP ?]

Now is working fine but I dont understand why?

 

Is it normal to be full width - 1472?

 

See the Pen VpZBZV by anon (@anon) on CodePen

 

Anyway thanks a lot.

[Is it possible to animate spritesheet through GSAP ?]

Why repeating isnt smooth?

 

See the Pen VpZBZV by anon (@anon) on CodePen

[Animate CC vs hand coding]

 

Have dynamic text? Doing a programmatic banner?

- DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases.

 

Animate CC 2017 use Google Fonts.

[Animate CC vs hand coding]

I am creating hand-coded GSAP, Edge Animate, Animate and GWD banners which depend of design, deadline, price and customer.

[Banner calculators for adwords]

You can now zip that last html and check it in https://h5validator.appspot.com/adwords