Animations scroll over

Solved
Shockpain21
Tourist
10 0 1

Good evening,

so I have implemented from: https://animate.style/ animation to my shop: peachboom.de 

Everything went smoothly, but the animations are getting triggered as soon as the website load. I want the elements (images) to animate as soon as the customers scroll over them. The CSS code which I have currently on the theme.sccs file is:

.Rte .Form, .Rte .VideoWrapper, .Rte blockquote, .Rte img {
animation: fadeInLeft;
animation-duration: 3s;
}

0 Likes
LamQSolutions
Pathfinder
113 26 39

To do animation on scroll, you can follow these steps

1. Go to the file current theme > Layout > theme.liquid

2. Add the following to before the </head>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

3. Add the following code before the </body>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  document.querySelectorAll('.Rte .Form, .Rte .VideoWrapper, .Rte blockquote, .Rte img').forEach(function (el) {
    el.dataset.aos = 'fade-right'
  });
  AOS.init();
</script>
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
Shockpain21
Tourist
10 0 1

Thank you so much! But unfortunately this does not change the scroll over

0 Likes
LamQSolutions
Pathfinder
113 26 39

Hi,

Could you add the code below just before the </body>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  document.querySelectorAll('.Rte .Form, .Rte .VideoWrapper, .Rte blockquote, .Rte img').forEach(function (el) {
    el.dataset.aos = 'fade-right'
  });
  AOS.init();
</script>
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
Shockpain21
Tourist
10 0 1

Now it works! Thank you so much! But can I make it slower appear? And only once to animate, because it animates itself everytime I scroll over it again.

0 Likes
LamQSolutions
Pathfinder
113 26 39

@Shockpain21 wrote:

Now it works! Thank you so much! But can I make it slower appear? And only once to animate, because it animates itself everytime I scroll over it again.


Hi,

You can try the following code

 

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  document.querySelectorAll('.Rte .Form, .Rte .VideoWrapper, .Rte blockquote, .Rte img').forEach(function (el) {
    el.dataset.aos = 'fade-right'
  });
  AOS.init({
    duration: 3000,
    once: true,
  });
</script>

 

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
LamQSolutions
Pathfinder
113 26 39

This is an accepted solution.

Hi @Shockpain21 

Was the problem resolved? I see that the animation is working.

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
Shockpain21
Tourist
10 0 1

Thank you so much! Everything worked smoothly.

0 Likes
LamQSolutions
Pathfinder
113 26 39

It's my pleasure to help you

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.