CSS transition: all breaks reveal animations for elements visible on page load

[markmercier]

Issue Report

If elements that are visible within the viewport when the page loads have a transition: all property defined in CSS, the reveal effect does not happen. Instead, those elements instantly become visible at their ending state, without an animation.

In the attached demos, you can see the right column of buttons (with transition: all) instantly become revealed, while the left column (with transition: all replaced with the more specific transition: background-color) have the expected reveal animation.

Curiously, this issue only seems to affect elements visible on page load. If you scroll down, all of the buttons have the expected reveal animation 👍.

Demos

• JS Bin: https://jsbin.com/deloroyike/edit?html,css,js,output
• CodePen (same code): https://codepen.io/markmercier/pen/zYdrbgR

Environment

• Operating System: Mac OSX v10.15.7
• Browser Version: Chrome, Safari, Firefox, Edge (latest)
• ScrollReveal Version: 4.0.9

[dijkermans]

I've read many js and performance issues regarding the 'all' property in general so I doubt it's only related to scrollreveal

[dijkermans]

Having said that, I noticed the same issue as well. A workaround would be great.

[prince-jagani]

This issue is causing because I have given that element transition property in CSS that cannot be overwritten by reveal function.

So remove that transition property from CSS and add callback function in your reveal method.

ScrollReveal().reveal('.button', { //reveal options..., afterReveal: (el) => { el.style.transition = '0.5s'; } })