Shopify themes, liquid, logos, and UX
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;
}
Solved! Go to the solution
This is an accepted solution.
Hi @Shockpain21
Was the problem resolved? I see that the animation is working.
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>
Thank you so much! But unfortunately this does not change the scroll over 😞
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>
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.
@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>
This is an accepted solution.
Hi @Shockpain21
Was the problem resolved? I see that the animation is working.
Thank you so much! Everything worked smoothly.
It's my pleasure to help you 🙂
Hey @LamQSolutions , I added the code you gave in the exact places but it doesn't work for me.. Can you maybe help?
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..
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>
Thank you for sharing most informative one..Looking forward a lot from you.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024