Diese Seite ist auch auf Deutsch verfügbar.
Shopware 6 Shopware 5
⌘ Ctrl
Wishlist
Christian Kilian

AOS Animate scroll for worlds of experience

by Christian Kilian
Rating: no rating ( write a review )
Downloads: <25
WebseAnimateScrollPlugin
WebseAnimateScrollPlugin
WebseAnimateScrollPlugin
WebseAnimateScrollPlugin
Boost user experience with the Webse AOS Animate on Scroll Plugin! Enjoy smooth scrolling animations for an appealing and seamless navigation experience.
Add to cart
Compatible with:
6.0.0-EA2 - 6.6.9.0
Includes:
The subscription starts with a free trial month during which it can be canceled at any time.
During the subscription all released updates are included for free
In case you have any questions or problems with your extension you can always ask the Extension Partner for help during the subscription.

Description

Highlights

  • Flexible Element Animations: Animate any element in your Shopware shopping experience to create a more dynamic and appealing shopping journey.
  • Extensive Animation Collection: With over 25 predefined animations, you can give your shop a unique aesthetic.
  • Viewport Triggering: Animations are triggered as soon as they come into the user's field of view, providing a seamless and interesting interaction.
  • Performance-optimized: AOS only monitors elements that are in the user's viewport, reducing the load on the browser and ensuring a smooth experience.

Features

  • One-time Playback: Control if animations repeat or play once.
  • Duration: Control animation speed, select a value between 50 and 3000 milliseconds.
  • Delay: Set a start delay for your animation, select a value between 50 and 3000 milliseconds.
  • Offset: Control when the animation starts based on the scroll position.
  • Easing: Allows for smooth acceleration and deceleration of the animation.

About the Extension

With this plugin, you can implement animation effects while scrolling through the page. Among numerous available libraries, AOS, standing for Animate on Scroll, stands out. This library allows you to apply various animations to elements as they appear in view while scrolling.

How AOS Works

The idea behind AOS is straightforward: All elements and their positions on the website are monitored. For the animation, only the CSS class is added or removed. AOS provides a variety of pre-defined animations that are ready to use. Furthermore, you can create new animations without having to worry about duration or delay.

Implementing AOS in the Experience World

To incorporate AOS into your experience world, simply insert the desired animation as a CSS class into the respective experience world element:

Fade Animations

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

Flip Animations

  • flip-up
  • flip-down
  • flip-left
  • flip-right

Zoom Animations

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Details

  • Available: English, German
  • Latest update: 3 December 2024
  • Publication date: 28 October 2019
  • Version: 1.2.0
  • Category: Shopping Experiences

Resources

Reviews (0)

Write a review

If you downloaded this extension you can write a review in the Shopware Account.

Write a review

About the Extension Partner

Christian Kilian

Christian Kilian

See all extensions

Partner Status

  • Shopware Extension Partner Shopware
    Extension Partner

Details

  • Ø-Rating: 4
  • Partner since: 2017
  • Extensions: 8

Support

  • Based in: Germany
  • Speaks: German, English