Jump to content

Oliver16Years last won the day on January 15 2017

Oliver16Years had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Oliver16Years

  1.  // 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");


    These two tweens are colliding. Try to put the heroimage into a <div> and tween that container with the second line.

  2. 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.



    • Like 3
  3. 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>



    • Like 2
  4. 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!

    • Like 1
    • Haha 1
  5. 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.


    • Like 1
  6. 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:

    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 :)

    • Like 1
  7. 18 minutes ago, Presuming Ed said:

    The problem is, ideally we want the animation to play when the graphic comes into view (when the user scrolls down). It's kind of tells a story so if it started automatically when the page loads the user might not see the beginning and it wouldn't make sense.


    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>

    The above example is for DOM. I don't know where is the tl in Animate's HTML.

    • Like 1