Use getBoundingClientRect to get element's offset about aos HOT 2 CLOSED

Sounds like a good catch. Thanks! I'll definently take a look.

from aos.

@herschel666 I just remembered why I used offsetTop and offsetLeft here. The difference is that getBoundingClientRect return values that take into consideration elements transforms. And what I actually need here is to check elements' positions like there is no transform applied yet.

I didn't want to calculate elements positions and then apply initial state (before animation) to them, in order to keep it as simple as possible I set initial state right in CSS. And because of that I needed a solution to calculate proper offsets and make sure that they are not impacted by initial transforms.

And this function makes it perfect:

var offset = function(el) {
    var _x = 0;
    var _y = 0;

    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        _x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
        _y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
        el = el.offsetParent;
    }

    return {
        top: _y,
        left: _x
    };
};

Thank you for your contribution, unfortunately I don't see a possibility to change offsets to getBoundingClientRect() as this will cause behavioral issues.

from aos.