![]() ![]() You can set the value of this attribute to false in order to animate the elements only once.īelow is an example of using data-aos-anchor-placement:Įxploring the AOS Library’s Inner Workings ![]() By default, the animations are replayed every time the elements scroll into view. data-aos-once - You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down.Three such combinations are also possible for both the center and bottom values. For example, you can set it to top-bottom, top-center or top-top. As its value, this attribute accepts two words separated by a hyphen. This behavior can be changed using the data-aos-anchor-placement attribute. data-aos-anchor-placement - By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window.This means that all the animations will be triggered with respect to the element’s own position. data-aos-anchor - This attribute is useful when you want to trigger the animation based on the position of some other element.See the Pen Animate on Scroll Examples – Attributes by SitePoint ( on CodePen. Here’s an example using data-aos-duration and data-aos-easing: You can see a list of all accepted values on the project’s Readme file on GitHub. Possible values are: linear, ease-in-out and ease-out-quart. data-aos-easing - You can use this attribute to control the timing function for animating different elements.The default value for this attribute is 400. This range should be sufficient for almost all animations. ![]() Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. The duration value can be anywhere between with steps of 50ms.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |