Inline styles applied using beforeReveal being overwritten.

[chopfitzroy]

I have the following code (forgive the ugliness of it was just prototyping):

sr.reveal('[data-animate]', {
    beforeReveal: elem => {
        $(elem).attr('style', function () {
            return `top: calc(100% - ${$(this).height()}px)`;
        });
    },
    duration: 1500
});

So basically I want to apply a calculated top property to the element before it animates, the problem is that while the top appears to be applied, it is then immediately overwritten when the element is being animated. I am not sure if this is the expected behaviour and if so I could apply the top first and then animate it using a callback, it just felt cleaner using beforeReveal. As a side note if I use the afterReveal it works but it animates in and then re-positions.

Thanks!

Ubuntu 16.10 Chrome 61 ScrollReveal 3.3.6

[jlmakes]

If an element has existing inline styles, ScrollReveal will preserve them—but anything added after reveal() has been invoked, will be overwritten. That means regardless of what ScrollReveal callback you use, it will always be too late to apply inline styles.

Some things you could try:

• Wrap the element in a <div> and apply your styles to that (still within beforeReveal).
• Create a new class with your styles, and add it to the element (still within beforeReveal).
• Apply the inline styles to the element before invoking reveal() (outside beforeReveal).