jQuery: Where to insert the .animate step function

Question

I'm trying to modify a library called fullpage.js in order to output to the console the value of every animation step while the animation is taking place.

This is the actual function that manages the animation:

$(scrolledElement).animate(scrollOptions, options.scrollingSpeed, options.easing, function () {
    continuousVerticalFixSectionOrder();
    $.isFunction(options.afterLoad) && !localIsResizing && options.afterLoad.call(this, anchorLink, (sectionIndex + 1));
    setTimeout(function () {
        isMoving = false;
        $.isFunction(callback) && callback.call(this);
    }, scrollDelay);
});

My step function would be something like this:

step: function(){
    var currentTop = $("#superContainer").offset().top;
    console.log( "Left: ", currentTop );
};

I tried lots of combinations but still haven't guessed where to put it without breaking the code.

Sorry to bother, I guess it's a noob question, but I spent 4 hours on it without results. Thanks everyone!

Achille

Answer 1

See this section in the documentation:

.animate( properties, options )

properties and options are two objects and steps has to be a property on options. So your code becomes

$(scrolledElement).animate(
    scrollOptions, 
    {
       duration: options.scrollingSpeed,
       easing: options.easing,
       step: function() {
          // ...
       },
       complete: function () {
          continuousVerticalFixSectionOrder();
          // ...
       }
    }
);

Answer 2

you might try this:

            $(scrolledElement).animate(
                scrollOptions
            , { step: function(){
                        var currentTop = $("#superContainer").offset().top;
                        console.log( "Left: ", currentTop );
                        }
            }, options.scrollingSpeed, options.easing, function () {
                //fix section order from continuousVertical
                continuousVerticalFixSectionOrder();

                //callback (afterLoad) if the site is not just resizing and readjusting the slides
                $.isFunction(options.afterLoad) && !localIsResizing && options.afterLoad.call(this, anchorLink, (sectionIndex + 1));

                setTimeout(function () {
                    isMoving = false;
                    $.isFunction(callback) && callback.call(this);
                }, scrollDelay);
            });

Enjoy, Rocco