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

As I know Animate can export animation frames. From them You can render an .mp4 with ffmpeg or Premiere or maybe it can natively export movies ( Sorry I don't have this kind of Adobe life sentence ) But, it won't work with GSAP timelines, only keyframe tweens can be exported this way.

Try this: document.getElementById( 'bannerIFrame' ).contentWindow.tl.play(); where tl is the GSAP timeline. If You load the banner from the same domain as the site, there can't be a problem. If You like to control the banner's playback as the user scrolling, try to feed a percentage into tl.progress( myProgressFrom0to1 ); Check the docs for more> https://greensock.com/docs/TimelineMax The above example is for DOM. I don't know where is the tl in Animate's HTML.

You can export it as HTML and put it into an iFrame on the site. This way the banner's HTML will be completely separated from the other parts of the site. You have to be able to insert an iFrame into the CMS.

Working. You have to make a fallback.jpg too for every SIZMEK ad. Best if you include it in the .zip.

I am using a <div> wrapper with id. But read this: We don't need that click handler anymore, maybe that's why You can't validate Your ad.

Sorry my fault, no. There is SVG in Safari, but no standard DOM support for .style.clip = "rect(0px 100px 10px 0px)"; If You could make a CodePen example we could debug it. But at first glance i think the DOM and the SVG can't be mixed in this way. You have to put the image into SVG context to be able to clip it. ( <image> tag ). https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Cupertino silently dropped clip-path support in the background when was in the middle of a campaign based on it.

OMG, if it is a global trend, then we have a couple of year left to make ads! Time to make a Plan B, like write romantic e-books. Do someone have statistics about this decline?

I have a ton of projects. All kind of clients mainly from 3 ad agencies. I haven't noticed any decline. ( I hope they will relax a bit )

Nice job, seems like a great tool with the power of GSAP. As I see, making an ad with it, as easy as putting together a Powerpoint presentation.