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

markmercier commented 2 years ago

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 commented 2 years ago

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

dijkermans commented 2 years ago

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

prince-jagani commented 8 months ago

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'; } })

jlmakes / scrollreveal