The AMP HTML pages adding visual effect is easy using the amp-fx-collection component which provides a range of collections of effects such as fly-in which a background image can come into frame from any side of the screen this is a very popular and common effects that is seen in web pages nowadays.
Required Scripts: Importing the amp-fx-collection into the header
- data-duration: It specifies the duration of the animation it becomes static after the elapsed time.
- data-easing: Varies the animation speed throughout the entire duration.
- data-margin-start/end: Specifies at what % of margin of the viewport should the animation start.
- data-repeat: To repeat animation even after fully loaded after scroll.
- fly-in-bottom/top: Element flies in from the top or bottom.
- fly-in-left/right: Element flies in from the right or left.
Output: The image shown below is static. It has fly-in animations on each of them.
- Google AMP fad-in Animation
- Google Amp amp-ad
- Google AMP amp-accordion
- How to create Nested Accordion using Google AMP amp-accordion?
- How to create Hidden Header using Google AMP amp-accordion?
- How to create Dynamic Header using Google AMP amp-accordion?
- Google AMP amp-facebook-like
- Google AMP amp-carousel
- Google AMP amp-date-countdown
- Google AMP amp-brightcove
- Google AMP amp-bind-recaptcha
- Google AMP amp-autocomplete
- How to disable download option in amp-audio in Google AMP ?
- How to set custom media notification with amp-audio in Google AMP ?
- How to set an image placeholder for amp-anim in Google AMP ?
- How to set audio loop in amp-audio of Google AMP ?
- Google AMP amp-img
- Google AMP amp-image-lightbox
- Google AMP amp-lightbox-gallery
- How to calculate area of circle dynamically using amp-bind-macro in Google AMP ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.