Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Kutomba

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by Kutomba

  1. Hi All.

     

    I am a newbie to animation, I am using a green sock on my website for animation also am using createjs and node-canvas plus FFmpeg for rendering these animations to videos. but unfortunately, I have the following problems

     

    1. Rendering green sock animation with node-canvas its not working

    2. Rendering createjs with nodejs canvas works but its very tough to configure and it's very old it's not updated for a long time.

     

    Can someone please tell me which library I should use for rendering the animation to video via backend ??

     

    Any help or suggestions will be appreciated.

     

     

    See the Pen zbgooY?&page=1 by uuuulala (@uuuulala) on CodePen

  2. I have a simple block which contains four buttons I want these buttons to disappear  
    in sequence using tweenmax.

    Here is html
        

        <div id="video-content_btns">
                            <div id="video-content_home" class="video-btn video-btn_content">
                                <img style="width:41px; height: 40px; cursor: pointer;"src="images/domek.png" />
                            </div>
                            <div id="video-content_list" class="video-btn video-btn_content">
                                <img src="images/lista.png" />
                            </div>
                            <div id="video-content_left" class="video-btn video-btn_content">
                                <img src="images/lewo.png" />
                            </div>
                            <div id="video-container_right" class="video-btn video-btn_content">
                                <img src="images/prawo.png" />
                            </div>
        
                        </div>
    
    <div class="open">open</div>

    Here is js

    document.getElementByClassName(".open").addEventListener("click", showMainMenu);
            var showMainMenu  =function(){
            
                var i = 0;
                var step = 0.05;
                        TweenMax.to(".video-btn_content", 1, {
                            delay: i * step,
                            opacity: 0,
                            scale: 0.0,
                            ease: Back.easeIn,
                            onComplete: function () {
                                var j = 0;
                                $(".video-btn_content").each(function () {
    
                                    TweenMax.to(this, 3, {
                                        delay: j * step,
                                        opacity: 1,
                                        scale: 1,
                                    });
                                    j++;
                                });
    
                            }
                        });
                        i++;
                    }

    This hide all at once, what do I need to change to get what I want?
     

    See the Pen qwrwKY by makumba (@makumba) on CodePen

  3. Hii @mikel 

     

    Thank you for the great answer,  I am a newbie to tweenmax animation  I have a few questions

    1. How to stop that infinite iteration in tweenmax? , I just want to run it  once  because the effect will appear  only after clicking some buttons,

       in css I will just remove this line to stop infinite iteration

      animation-iteration-count: infinite;

    2. Lets us assume that we have two elements one is the sircle and other is square , is it possible to add that anaimation to these elements meaning starts from element1 which is sircle and finish with second element which is square? 

      <div class="circle">I am circle</div>

      <div class="square">I am square</div>

     

    Any help or suggestion will be appreciated,   

×