Using mootools scripts with gwt application

My problem is make an animation on Composite which is started when data is loading. I made animation on normal divs for tests using html:

<div class="LoadDataWidget">
    <div id="arrow" class="greenArrow"></div>
</div>


.LoadDataWidget {
    width: 995px;
    height: 591px;
    background-image: url('images/ladowanie-danych.png');
    background-repeat: no-repeat;
    position: relative;
    margin: 0px auto;
    visibility: hidden;
}

.LoadDataWidget .greenArrow {
    width: 102px;
    height: 141px;
    background-image: url('images/ladowanie-danych-strzalka.png');
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 500px;
    top: 205px;
}

JavaScript+mootools animation script:

    window.addEvent('domready', function(){

        var effect = new Fx.Tween('arrow', {duration: 800}),periodical;

        // Create the function wich will run the effect
        var fx = function() {
            effect.start('height', '141').chain(function(){
                effect.start('height', '1开发者_JAVA技巧61');
            });
            // return this function, so you could do fx() which returns fx,
            //or fx()()() which still returns fx and runs the function 3 times
            return fx;
        };

        fx().periodical(1700);

        // assing 'singleImage' variable to the image tag with the 'image' ID
        var singleImage = $$('.LoadDataWidget');

        // set a bunch of CSS styles to the aforementioned image
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });

        // fade in the image
        singleImage.fade('in');


});

It works. It is an animation of arrow from top to bottom.

But when i try to use this script in gwt application with elements which have class "LoadDataWidget" and id "arrow" it doesn't work.

And there is Java code of GWT Composit which I try to animate:

import com.google.gwt.user.client.ui.SimplePanel;

public class LoadDataWidget extends SimplePanel {

    public LoadDataWidget() {
        setStyleName("LoadDataWidget");
        SimplePanel arrow = new SimplePanel();
        arrow.setStyleName("greenArrow");
        arrow.getElement().setId("arrow");
        setWidget(arrow);
    }
}

Is there problem with domready event? Have you got any clue for solve this problem?

Your domready event triggers after html is loaded and DOM is ready, but before GWT is loaded and executed.

Try calling your function via JSNI after GWT is loaded.