-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS transition: all breaks reveal animations for elements visible on page load #543
Comments
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.
|
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
The text was updated successfully, but these errors were encountered: