Open markmercier opened 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
Having said that, I noticed the same issue as well. A workaround would be great.
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'; } })
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 (withtransition: all
replaced with the more specifictransition: 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
Environment