How to trigger animations on scroll over in Peachboom.de?

[Shockpain21]

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;
}

[LamQSolutions]

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>

[Shockpain21]

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

[LamQSolutions]

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>

[Shockpain21]

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.

[LamQSolutions]

---

@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>

[LamQSolutions · Accepted solution]

Hi @Shockpain21 

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

[Shockpain21]

Thank you so much! Everything worked smoothly.

[LamQSolutions]

It's my pleasure to help you 🙂

[Jacquline]

Hey @LamQSolutions , I added the code you gave in the exact places but it doesn't work for me.. Can you maybe help? 

[Jacquline]

I am sorry I didnt notice that this code also had to be added

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

Can you please tell me where it needs to be added, I am on the DAWN theme, and I dont have a theme.scss..

[Abodhere]

bro please let me know what i will change? where a type the element i need to animation?

---

@LamQSolutions wrote:

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>

---

[SharmaPooja]

Thank you for sharing most informative one..Looking forward a lot from you.