Kutomba

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

Hi Shaun.

thanks for the help, I would like also to know how can I make them appear in sequence?

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

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,   

I have simple css animation looks like this, pen  circle to square using css I want the same animation using tween max. can someone help me to achieve this??

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