Oliver16Years

https://www.ampproject.org/docs/fundamentals/spec

Because the two tweens trying to move the hero cocurrently. This is why I adviced to put the image into a container. This way You can tween the x: and y: of the image and it's container at the same time.

// following animation does not restart tl.to(heroimage, 3, { x:"+=400",y: "-=100",ease: Power3.easeOut }); tl.to(heroimage, 4, { x:"+=20",y: "-=20",ease: Power0.easeNone },"-=0.5"); Hi, These two tweens are colliding. Try to put the heroimage into a <div> and tween that container with the second line.

I am not making canvas ads, that is volcanoflash's territory but answering the other question: Until the market is not flooded with good HTML5 specialists You can charge a hefty sum for a master animation and for it's mutations.

Your code looks fine. It is working for me just as this shorter version: tl.from( element, duration, { scale: 0 } );

Dear Sahil, I am not a GSAP guru, instead I know the banner area more, with the necessary amount of tweening knowledge to be able to make ads. So I leave the other side for Your expertise to answer questions. Regards

Sure, As You can see we are able to add function calls to the timeline at any point in time. .add( function() { if ( !loop ) { tl.stop() } } ) With this You can count the loops or stop the timeline at any point if the number of the loop is the desired. Check out the docs for more timeline control methods: https://greensock.com/docs/TimelineMax

Hi, Best if You make a Timeline and chain the tweens in it like this: var tl = new TimelineMax( { repeat: -1 } ); tl.from('#hed1', .5, {delay:.2, alpha:0, y:'-=20'}) .from('#orange_boat',2, {delay:3.75, top:'+=150', left:'-=350', ease:'Quad.easeOut'}) .from('#whiteboat_one',2, {delay:0, top:'+=0', left:'-=0', ease:'Quad.easeOut'}) .from('#whiteboat_two',2, {delay:0, top:'+=0', left:'+=0', ease:'Quad.easeOut'}) .to('#hed1', .3, {delay:4, alpha:0, y:'-=75'}) .to('#orange_boat',2, {delay:6, top:'+=128', left:'+=38', width:'140px', ease:'Quad.easeOut'}) .to('#whiteboat_one',2, {delay:6, top:'+=0', left:'-=0', width:'99px', ease:'Quad.easeOut'}) .to('#whiteboat_two',2, {delay:6, top:'+=30', left:'+=30', width:'80px', ease:'Quad.easeOut'}) .from('#hed2', 1.5, {delay:7, alpha:0, top:'+=0', ease:'Back.easeOut'}) .from('#cta', 1, {delay:4,alpha:0}) .from('#cta>em', .5 , {delay:4.5, alpha:0}); .to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:3, yoyo:true}); The -1 value of the repeat: key means infininte loop. If You worry about the file size just link GSAP from CDN: <script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.1_92cf05aba6ca4ea5cbc62b5a7cb924e3_min.js' ></script>

Everything is settled, no more problems to solve, everyone has his own solution? This forum is cooled down near to absolute zero. This is the only community which gives me some reputation and feedback. Don't let it die! Let us group together and flood the SIZMEK support with questions about their ad size calctulation algorithm. Or hit the bonkheads at Google to properly support SVG! Let's make a guild of bannerers!

I don't know the current state of the software but ( first and last time I used it just after Flash was killed ) I feel that is a dead end. At least that time it was a completely frustrating joke. Contradict me please!

http://www.bannerhost.hu/test/Nissan_Micra_Q42018_HU_750x300_DOUBLECLICK_05/index.html Client: ACG Hungary

I just need some dopamine please! http://www.bannerhost.hu/test/Surf_2018Q1_Mosokapszula_640x360_SIZMEK_03/index.html Client: ACG Hungary

When You make one animation the GUI approach can be as good as the scripted. But if You have to make dozens of size mutations from a master animation, the time spent on adjusting the start and end positions of the graphical elements can be huge. GreenSock script is fast and easy to write with dot chaining, I love to do it when I am finished exporting the assets and generated the HTML for them. When the client accepted the master animo, all i have to do is to make the different sizes, adjust the elements. The script can be left untouched most of the time. I agree with You in that the HTML and SVG even though is human readable, aren't meant to be human written. I hate the syntax of them, especially the SVG one, even more when it is combined with horrific CSS. This is why I spent months on writing my own HTML and SVG generator I don't want to see HTML or SVG code just the good little .js. Looking forward to try out Your tool.

Very nice GUI, I feel the quality! But I have to contradict You in one part of this sentence "Animation should be drawn, not coded!" HTML and SVG should be drawn and generated, but GSAP script should be written by pure hand IMHO. It is the sweet, fun part of banner making. Furthermore the demand for additional custom .js code is alway popping up. Regards

You have to use Flash version of GSAP and convert all frame scripts to ActionScript if You want to export .swf. This seems a dead end to me. Check out these: https://slimerjs.org/ http://phantomjs.org/ These are "headless" browsers with screen capture capabilities. If You have the patience and programming skill, You can write a script which is progressing through the GSAP timeline and capturing every frame. This way, You can make 4K 60fps movies from a HTML anim. Less effort is to control that iFrame from the CMS page