Slide up and replace animation using JavaScript

Slide up and replace animation using JavaScript
0.0 0

#1

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

ezgif-2-401b4c1eea

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.


#2

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);
       this.addChild(clip);
       clip.setPosition(100,100);

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

       // add element to clipping node
       clip.addChild(one);
       clip.addChild(two);
       one.setPosition(50,l/2);
       two.setPosition(50,-l/2);
       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
       one.runAction(sprite_action);
       two.runAction(sprite_action2);

#3

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