Jump to content
Search Community

B2rana

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by B2rana

    Bullet-Proof TimelineMax Transitions

    in GSAP

    Posted

    Another wonderful tutorial by Carl. You can find flash version here http://www.snorkl.tv...or-forward-out/

     

    This tutorial cover advance timeline animation and good start for a beginners, so that why I have chosen this tutorial and decide to convert it into JS version.

     

    Download JS version : http://02cbcf1.netso...ut-finished.zip

     

    I think you peoples like this.

     

    In this JS version, few animations are missing like text rotation. You can find that difference in Flash & JS version.

     

    I am completely unable to understand how to manage rotationX property in JS.

     

    Can you guys help me in this issue?

     

    You can find fonts embed in this JS version here http://www.typograph...ctLineID=100013

     

    Thanks,

    B2rana

    • Like 1

    Elegant Cross-Fade and Zoom Effect for Banner Rotators and Image Galleries

    in GSAP

    Posted

    I have converted Flash banner created by @carl schooff into JS version.

    I think you peoples like this [ http://02cbcf1.netso...demos/zoomFade/ ].

     

    I have a question, is there is any solution to reduce HTML file size? Because HTML file size in this demo is 560.6 KB (including all files such as html, js & images) but in Flash version, SWF size is 131 KB.

     

    Once again thanks @carl schooff for wonderful tutorials.

     

    You can find @carl schooff's Flash version here http://www.snorkl.tv...-and-tweenlite/

    • Like 2

    how to change the color of a text?

    in GSAP

    Posted

    Here is the simple example:

     

    <html>

    <head>

    <script type="text/javascript" src="js/greensock/plugins/RaphaelPlugin.min.js"></script>

    <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>

    <script type="text/javascript" src="js/raphael-min.js"></script>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script>

    $(document).ready(function(){

     

    var paper = Raphael('canvas', 400, 500);

    var text = paper.text(50, 100, 'Some text goes here');

    text.attr({'font-size': 30, 'font-weight': 'bold', 'text-anchor':'start', 'fill':'#ff0000', 'font-family':'Trebuchet MS'});

     

    TweenMax.to(text, 1, { raphael:{'fill':'#CCCCCC'}, delay:1 });

    TweenMax.to(text, 1, { raphael:{'fill':'#00ff00'}, delay:2 });

    });

    </script>

    </head>

    <body>

    <div id="canvas"></div>

    </body>

    </html>

     

    You can also see this post

    http://forums.greensock.com/topic/6255-experiment-with-greensock-raphaeljs/

×
×
  • Create New...