Fade animation not working properly when used with other animation - codenameone

Question

I combine the a component sliding component with other component fade animation. But the component appears for a second before it fades in. Here the form is in Layered layout. Since there are other components as well that overlap each other. All works fine but the ones i apply fade in have the same issue. I have attached the gif of how it looks below.
beforeSplash(Form f) :
f.setLayout(new LayeredLayout());
Container bottomContainer = new Container(new BoxLayout(BoxLayout.X_AXIS));
f.add(FlowLayout.encloseBottom(bottomContainer));
Container appleContainer = new Container(new FlowLayout(Component.CENTER, Component.BOTTOM));
appleLabel = new Label(apple);
appleLabel.setVisible(false);
appleContainer.add(appleLabel);
bottleLabel = new Label(bottle);
bottomContainer.add(appleContainer);
bottomContainer.add(bottleLabel);
bottleLabel.setVisible(false);
postSplash(Form f) :
bottleLabel.setVisible(true);
arrangeForSlide(bottleLabel);
bottleLabel.getParent().animateLayoutAndWait(2000);
appleLabel.setVisible(false);
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(2500, 0);
f.revalidate();
Slide animation:
private void arrangeForSlide(Label c) {
c.setX(-c.getWidth());
}
Update:
bottleLabel.setVisible(true);
arrangeForSlide(bottleLabel);
bottleLabel.getParent().animateLayoutAndWait(2000);
new Thread() {
public void run() {
Display.getInstance().callSerially(new Runnable() {
public void run() {
appleContainer.setVisible(true);
appleContainer.animateLayoutFadeAndWait(2000, 0);
}
});
}
}.start();
Now i need to add other components animation after above applecontainer animation finishes and so on. eg:
questionBg.setVisible(true);
questionBg.getParent().animateLayoutFadeAndWait(3000, 20);
Update 2:
I added only one component appleLabel and applied fade effect and the result is the same. so may be it is not EDT issue. I have tried it in barebone template too.
Container appleContainer = new Container(new FlowLayout(Component.CENTER, Component.BOTTOM));
appleLabel = new Label(apple);
appleContainer.add(appleLabel);
appleLabel.setVisible(false);
f.add(appleContainer);
f.show();
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(5000, 0);
It doesnt work so I have tried in callSerially but it gives same issue as well
Display.getInstance().callSerially(new Runnable() {
#Override
public void run() {
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(5000, 0);
}

Answer 1

Try setting the appleContainer to visible false too and see if this helps.