Animate On Scroll - Shopify Coding Tutorial
HTML-код
- Опубликовано: 30 сен 2024
- Hello! Today we will be adding animations to our website that activate when the user scrolls. Animations can help make your website look more unique!
AOS Library: michalsnik.git...
Shopify Theme Editor JavaScript reload code:
{% if request.design_mode %}
document.addEventListener("shopify:section:load", function(event) {
AOS.init();
});
{% endif %}
bro thank you so much, i really apreciate it. Everybody wants money for it but you showed it us in just 10minutes. I love you!!!!!!
Can someone help, when i put in for example data-aos="fade-right" into image-with-text.liquid, the image or the text disappears directly. I do not know why. It would be nice if someone had the same problem and would let us know how to fix it.
Thnaks in Advance
how to apply for specific section with same name? I mean how to specify section with it's unique ID and add zoom animation for only that section? I understood everything in the video and it works but not for specific section
At 3:16 it is better to load the aos javascript file before the closing tag instead of in the . So the bottom of your theme.liquid file should look something like this:
AOS.init();
Better yet, you can leave in the but instead add the defer attribute to it like this: **
then, within your aos.js file add a new line at the very end, and add: *AOS.init();*
-
On an additional note, there seems to be a bug in the AOS library causing horizontal scrolling on smaller screen sizes. To fix the issue, on the parent element of the elements you added the aos data attributes to, add the CSS style "overflow-x: hidden"
Could you make a RUclips shorts about this? I have no ideao of coding and cant get this to work :( thanks
with regards to the Overflow/side scrolling issue. do we need to add "overflow-x: hidden" to the css asset. For example Assets>Component-image-with-text.css and just paste it at the bottom? or are we supposed to add it to the .liquid file?
It doesn't matter which of those files you add it to!
CSS is read top down, so as long as that custom overflow rule you're adding is loaded at the very end of your main CSS file, or in the section specific CSS area of your liquid file between tags, it will take precedence, except in few cases like where !important is used.
You'll have to mess around with it a little bit to see which one works because every theme is different.
hello, almost everything worked perfectly, but I can't figure out the horizontal problem, where should I add the CSS for the overflow?
like at the beggining or end of the file, or how do I format it?
can you create Social share button on product page sir?
Great suggestion! Are you thinking like on the side of the screen?
hello, I followed the video step by step, my intention was to have an entire section perform the effect, but at the moment of the visualization the section disappears. what can it be? thank you
Rather than AOS being applied to every section, is there a way to use the custom css feature to apply it only on sections you want?
Great tutorial,
How would I go about only adding an AOS to exclusively the home page?
Hello!
Usually wrapping the relevant code with the liquid code below will do that:
{% if template.name == "index" %}
{% endif %}
is there a way to control how quickly or late the animation happens. Right now when it scrolls on, the animation happens near the bottom of the view area. id love it so that the animation doesn't start until the area is more central to the screen. I'm guessing there is a value for this, so any help would be great
For the life of me I couldn't get this to work. I don't know if it's my theme or what but I couldn't get these scrolling animations to work at all.
Based on what you are describiing, it could be that the JavaScript files required for the AOS Library to work might not be loading in!
anyone else find that this causes the new elements that we added to scale beyond the size of the actual entire site? Is there a quick code snippet to make these not scale beyond the sites size?
Take a look at my pinned comment, maybe that'll help solve your overflow issue!
avoid parser blocking scripts by adding defer or async
I am getting these error what to do?
Take a look at my pinned comment, starting with "better yet..." Let me know if it works!
Thank you so much!!
Is there a way to slow down the fade in effect?
Sure thing! At an element level you can add a data attribute I believe like this:
Good luck!
on the bottom of my theme liquid it says
{%sections 'veda-theme-footer' %}
im not sure what veda footer theme is. how can i get rid of this
It could be from an app, or from your theme. To see what it does, you can wrap it in comments, so that it doesn't render to the front end, and see what it removes from your website shopify.github.io/liquid/tags/template/
Hello! Sean .I have a question ? How do I add interactive text that moves as you scroll?
To do something like that you could use a library like ScrollMagic: scrollmagic.io/
Hello, first of all great tutorial thank you. I am using Brooklyn theme and want to add zoom in effect to slideshow. I can't find the right location, I tried pasting " data-aos="zoom-in" " in multiple locations, but can't find the right place and nothing seems to work.
I'm not sure for the Brooklyn theme, but you are on the right track with your method of testing! Have you tested to make sure aos is working on a simple div container?
make two videos (1) Slide from right cart when add to cart is clicked (2) Pop up cart when add to cart button is added...all the best...
Thanks for the tutorial! I have a question. What you did for the column I also applied on the featured collection. I was wondering if there is a way to make a slight delay for each of the products appearing. Now they all appear at the same time, but I would like each next product to appear a millisecond later to create a kind of wave effect from left to right. Is there a way to get this to work?
Hello! You can try adding this:
data-aos-delay="100"
and replace the milliseconds number with anything you like!
Hi, great video and thanks for Sharing this. Sadly i have only one big issue, in all my product Page it show the same animated scroll with the same "First animated product image" how can i fix that?
thank you and the video is very informative
every thing work perfectly .but when the section is appear suddenly they goes on that side again
Hi Sean I am getting the following error message for the css file -
Cannot find "/dist/aos.css" rel="stylesheet" in aos@2.3.1
Hello! You may not have linked your css correctly to your theme, double check for typos!
Thanks mate you save my time expect money, because i dont have money
Hi there! Working perfect and thanks for showing, but cant really understand where to put the "overflow-x: hidden"
Should i put it in "image.with-text.liquid"? Where in this code should it be:
Hello! To the parent div of the container you mentioned in your comment, add a unique class name, and add the overflow style property to that class either in your main css file or you can even add an in line style if you prefer!
@@seanmythen I put it like: over the div for "image.with-text.liquid" aos animation and put this in the base.css: .overflow-parent {
overflow-x: hidden;
}
But stil same problem, only thing that was happing was that the image with text put the picture over the text on my computer and the horizontal scroll is still there. Can you please tell me what i can do? Would love to have the animation correctly on my site 🙏
Within your browser, in your dev tools, add the style
* {
outline: 1px solid red;
}
So you can see what is causing the overflow, whichever outline in red is going off the screen is the one causing the overflow, select that element and then go up to it's parent element and make sure it's the one you selected and added the overflow hidden rule to. Also double check your overflow rule is applying in the first place, it may need more specificity or add !important to it
@@seanmythen Could you please make a video tutorial about this? I read your replies over and over again and yet can't understand, I am sorry we are not coders. I have the same horizontal scrolling problem on mobiles only, on desktop it looks fantastic.
@@justaquestion It worked, I just added ****style="overflow-x: hidden"******* at the beginning of ****
i searched for image with text , it doesnt show up
Thank you so much for this video man, improved my website because of you ♥
Great to hear!
Thanks a lot for your video mate, really helpful
where i can find the .js file to copy
Excellent. Thank you
Hey i have the Problem, that as soon, as the picture leaves the actual viewspace of the monitor/mobilephone, it creates a horizontal zoom bar. How can i prevent this
Take a look at my pinned comment! It may be related to the issue you are seeing
melhores videos sobre shopify são da Gringa
How do I do it with announcement bar
hi, i cannot see the elements on my shopify. please help
you a genius thanks man
I do everything but nothing move :(
thank thank so much
You're an OG for this one !
Thnks for the video, first time coding almost understand everything. You really helped me out. You a G
Glad to hear it! Thanks for watching!
hey man very good video but the code provided in your description is wrong. It works better with opening script and closing it. Otherwise the code is illustrated at the bottom of the website
Thanks! If your are seeing JavaScript printed on your screen, then yes you may have missed a closing tag somewhere,
i followed discription then changed it to script, both ways, if i edit it on shopify it dissapears, need to refresh
Super helpful!!! Thanks!
Thanks for this.
Could you explain how to accomplish on Verison 9.0.0 of Dawn? When I try using Multirow, the If statement doesn't work for the "alternate_right" or "alternate_left" under layout ID. This is what they replaced "Image_first" with.
Thanks! Great video btw!
Hi there, how do i only apply these effects to the homepage and not the entire store?
Hello!
Usually wrapping the relevant code with the liquid code below will do that:
{% if template.name == "index" %}
{% endif %}
how would you do this for the footer would the process be the same?
UPDATE* yes it is
best tutorial on youtube ! Thanks a lot
hi, i have a problem ,I want to put the animation on the image banner but i have one div class for the problem : I put the code and it goes from left to right,but it is set globally and if I want to put an image banner with text from right to left, I don't know where to put the code
I have an issue it’s when I have done everything right in the mobile view there’s slide bar horizontal because of it any solution please
Take a look at my pinned comment! Maybe this is the issue you are facing:
"On an additional note, there seems to be a bug in the AOS library causing horizontal scrolling on smaller screen sizes. To fix the issue, on the parent element of the elements you added the aos data attributes to, add the CSS style "overflow-x: hidden"
@@seanmythen sorry but I don’t know where can I find the elements I am not good at coding please help me
Hey, not working :( Says AOS is not defined at (index):1641:3
david tuicine
Hi, Thanks for this wonderful video. I have a question:
It applies very nicely to each section when I am scrolling through it. But when I scroll upwards these are disappearing. Can we just have this effect for just one time on page load and does not revert back.
Hi, have you solved this problem? I mean when I scroll up and scroll down again I don't need the effect anymore.
does this work with the brooklyn theme? I followed the beginning steps but when I searched “.js” I couldnt find the same line as yours.
Can you please help me mister Mythen? I do everything by the book, but when I copy the animation code before the "class" attribute , the whole section just disappears in the preview.
Thanks
Good
Thank you so much for this video! Was super clear, helpful and easy to follow!
Thank you. But when I put your code the columns fade in together, how make them in turn?
Hello, thank you for the video, i would like to use GSAP animation, how to do it ?
Does this work on page builders like Gempages?
I believe it can but you'll have to contact them. oftentimes implementing custom things like this into page builders like Gempages requires a bit of tinkering.
@@seanmythen I see, thank you.
Awesome tutorial, thank you so much for the help!
No problem!
Thank you! Works perfectly
Great tutorial, how can I control how fast or slow the animation is.
You would simply add the data attribute that controls the duration of the animation: data-aos-duration="1000" The number in quotes can be any number from 50 to 3000 with steps of 50. The higher the number, the slower the animation.
@@seanmythen Thank you. I have other question I am making custom shopify and I want to show collection on the front page I sucessfully added the add to cart but not the variant size text. Is there a way to put it?
man why if i press control-s on my mac doesn't show the search bar?
Within the code editor, I had an extension at the time of recording this video that put a search bar there. Is that what you are referring to? Also on mac, is save command+s?
@@seanmythen i mean i saved the java and css but when i try to find them in the theme liquid i don see them
@@seanmythen sorry is my first time dealing whit codes
Is there anyway I can contact u?😊
How am i able to insert an image on the text menu ? Like for having the section MEN to insert an image showing a logo of MEN
Merci !
I can only either see the codes or the website but not both at the same time.. so I can’t mark a picture and see where it is in the code.. how did you open that??
Hello! Are you referring to the inspector? If you are using Chrome, the keyboard shortcut is ctrl+shift+c
@@seanmythen thank you so much! Is it possible to reach you personally for paid help? :)
No problem! Send me an email, it can be found on my channel's about page. You can also take a look at my freelancing profile there too!
@@seanmythen when I search for image do copy paste the „fade up“.. there is no image with text showing up event though I have image with text, the only thing I can find is „image-bar.liquid“ and no matter where I put the „fade up“ nothing changes
I have a bug my image dosent load
I think this is outdated now
its not bro
Hi, thanks for that wonderful video. My only question is what is the files that you opened to get that code for the java script and CSS on other tab. Thanks again.
This Tutorial was very helpfull, thank you. The only problem i have is, that now the mobile page is zooming out to much. Only if the last animation on the page is shown, it gets normal by itself. Do u know how i can fix that?
On the Desktop Version it’s the same, I saw now
Short question is there an option to let the items also disappear when the reach the top of the screen so not only when scrolling back up but also while continuing scrolling? (If you know what I mean)
I saw something like data-aos-mirror="true" but somehow that doesn't work with my project
Hello!
It seems the branch that is linked on the aos website may not have that functionality working. To get the mirror attribute to work it seems you'll have to use a newer beta branch of aos, try using these files:
unpkg.com/aos@3.0.0-beta.6/dist/aos.js
unpkg.com/aos@3.0.0-beta.6/dist/aos.css
@@seanmythen Thank you very much it worked perfectly now. Appreciate your videos keep going.
@@seanmythen But there is no preset for levelling the time span for the animation with the scroll pace right? (fast scroll -> fast animation, slow scroll -> slow animation, stop in between -> pause animation)
You may be able to do something with another library like this: scrollmagic.io/
I did everything exactly the same, but it is not doing anything... I also tried lately to add extra fonts to my website exactly like in tutorials but it´s not working either, it is something here for me to do?
do the video again and don't skip a single part. that worked for me
If I have 3 image banners how can I change the effect for every image banners and not be the same as the first inserted ?
Hello! What you are describing sounds possible, can you explain in more detail exactly what you are trying to do?
@@seanmythen I have 3 image banners in a raw at my main page, but when I'm trying to change the animation for the second image it changes but the animation is the same as the first image because it's a universal class for the section of the image banner.
Ok, the easiest way would be to simply duplicate the liquid file for that banner section, give it a new file name like banner-flip-up-animation.liquid and also change the title name in the schema section of that file. Then you can add that new section to your homepage and it will have the new animation.
@@seanmythen how is it possible to change the schema name of the section ?
@@antreasmatsentidis4429 you will probably have to change the name in 2 places: shopify.dev/themes/architecture/sections/section-schema#name and shopify.dev/themes/architecture/sections/section-schema#presets
Hi there, great video! What an easy way to make animations and so good explained!
I just have a tiny question, i added the animation on my multicolumn images and it works great! But the hover effect i had for the card is now gone :( any idea why this is so?
My hover effect was added on the base.css file... , i am using SENSE theme btw. would be so happy if someone knows what happened! Thanks!
in case this causes side scroll on mobile... Add style="overflow: hidden" to the parent div.
Hey, it does not work for me, could you help?
Help me please how?
Hey, thanks, it does work but then the images don't show up
Hey thanks, this does work but then the images don't work.
not working :c
What errors are you seeing?
animations are not displayed. wow.js didn't work for me either. Do you know what could be happening?
Are you making sure to load the JS file correctly? When you view the source of your preview, is the JavaScript file loading?
@@seanmythen Yes, I put an "alert" and it displays without problems, but when I put, example: the animation does not display.
You also have to initialize AOS, is it being initialized AFTER the JS is loaded?
I added a flip up animation to "product cards". The animation works perfectly, however, when I filter the products the whole card vanishes and requires a page refresh. any idea what could be causing it? when I remove the animation the filter works fine
Great implemention! This is happening on the collection page? What theme are you using?
@@seanmythen I am using Dawn theme.
Im not entirey sure why it is happening. It is when I apply to a class in card.product.liquid. I was thinking maybe it was an issue with the animation not loading / refreshing when the filter is applied?
For now I've applied my animation on "main.collection.product.grid" instead. It isn't exactly the effect I had in mind, but it doesn't cause the images to vanish when a filter is applied. If you have any idea why it could be messing up on individual cards that would be awesome!
@@Gsta7861 I had a look doing a test on my end, and was able to get it working by going into the facets.js file and searching for the "onSubmitHandler(event)" method around line 157. Within the curly brackets of that method, make a new line at the bottom and add this line of code: setTimeout(AOS.init, 500);
P.S. Once you get that, There are a few more steps, but you can do a really cool dealy animation where products load on after another in sequence!
@@seanmythen Thank you so much! It works now and I have the effect I wanted! Your video has been really helpful in learning more about the dawn theme and how Shopify works as a whole! Please keeping creating these informative videos! :D
@@seanmythen Hey Sean, i've began encountering a few other issues and was hoping there was a better way I could maybe contact you to get some help (instead of a youtube comment section haha)