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

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

2

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
  1. Add the following code before the
1 Like
3

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

4

Hi,

Could you add the code below just before the
1 Like
5

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.

6

Hi,

You can try the following code
1 Like
7

Hi @Shockpain21

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

1 Like
8

Thank you so much! Everything worked smoothly.

9

It’s my pleasure to help you :slightly_smiling_face:

1 Like
10

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

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

12

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

13

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