Slide up and replace animation using JavaScript

Slide up and replace animation using JavaScript
0.0 0


I have been trying to achieve the following animation using JavaScript.


The second text should come from the bottom of the parent and slide up the existing text.
I tried to achieve it using two different labels by placing the second label below the parent and using MoveBy to move the position of both the labels.
But I couldn’t make the labels invisible after it is out of the parent’s area.

Note: I am trying to run the game in browser.

I am struggling to achieve this for past 2 weeks. Kindly help me out.
Thanks in advance.


We can do this using clipping node.

       var l = 60;
       // create stancil for clipping node
       var stencil = new cc.DrawNode();
       stencil.drawRect(cc.p(0, 0), cc.p(100, l), cc.color(128, 0, 0), 1, cc.color(128, 0, 0));    
       var clip = new cc.ClippingNode(stencil);

       var one = new cc.LabelTTF("11", "Arial", l);
       var two = new cc.LabelTTF("11", "Arial", l);

       // add element to clipping node
       var sprite_action = cc.MoveTo.create(1, cc.p(50, l + l/2));
       var sprite_action2 = cc.MoveTo.create(1, cc.p(50, l/2));

       // animate sprite


Thanks @kamlesh for the solution.
It is working as expected. :slight_smile: