Add Animations to Shopify Quick and Easy - Dawn Theme 6.0

[@Chasethedreamsmusic]

Thank you for this video! :) Helped a lot!

[@Webmyster]

You're welcome!

[@MohamedAmin-d2i9t]

Best Video i ever seen. You are the first who explainded right!!!! Thankssss

[@leehaoru]

excellent vid, really help me out!

[@Webmyster]

Glad it helped!

[@AnnaNaumova-wh1xj]

Honestly a life saver. Thank you!

[@CK-pj8sp]

Hi! Thank you for this helpful video. I followed all your steps and I am right now at 3:48. When I paste my data it automatically disappears like there is a restriction to not be able to paste there. What can I do ?

[@CK-pj8sp]

But it seems to work for the image banner. Maybe there is a restriction just for the header

[@Webmyster]

Not sure if you have figured this out already but there should not be a restriction. May be just close the file and open it again, may be was a temporary glitch

[@Webmyster]

I wanted to let you know that I see the same issue. This has nothing to do with the animation code. Just in general something weird is going on with the Dawn header.liquid file. You cannot edit anything. Never seen anything like this before. I'm researching and if I find out what is going on. I will let you know.

[@heymeneses]

Hello! I always find your tutorials super useful. Do you know how to make a Dawn feature just like the “image with text” but instead of an image a video? Thanks in advance 👍🏼

[@Webmyster]

I thought the audience might get tired of me making video related tutorials. Another one of my subscribers asked for the same thing :-) I will look into it.

[@heymeneses]

@@Webmyster Do you have Instagram? Let’s connect! I’m also a KZbinr.

[@Webmyster]

@@heymeneses believe it or not I'm not much active on any other social media platforms. I just created an account on instagram :-) my handle is: Webmyster1

[@Webmyster]

@@heymeneses Well you asked and I delivered :-) Checkout this video: kzbin.info/www/bejne/p6u8oWODodd2esk

[@darmar8609]

Great tutorial! Thank you!

[@Webmyster]

You're very welcome!

[@bryantalusan]

My Menu in homepage doest work in mobile anymore after putting the codes in theme.liquid. But in Desktop view it works

[@AubreyMuizer]

Hello! I just followed your tutorial but I have the same problem with one of the comments about an unnecessary black space on the right side, both mobile and desktop. Please help!

[@filipcvetkovic9028]

How to add on product description and pictures 😢

[@BodinZekovic-ve5fv]

The animations I put in leave white space. Can you tell me how to get rid of the white space?

[@thembisilepraise]

It worked for desktop version but mobile didn't, Please help

[@bastiaanhalteren6946]

Thank you! I have a slideshow as a header how do i make the text on the slideshow animate?

[@BYW_buildyourwealth]

Can you do the typewriting animation too? I am really interested to do that on Shopify at Sense theme

[@viktoriiamatviienko4107]

Unfortunately, it doesn`t work for me. I did everything step by step, but the element i want to animate just disappears all the time.

[@Webmyster]

Sorry to hear that, which element are you you trying to animate? Please give more details about the theme, which element and where did you add the data-aos attribute.

[@doducanh5098]

thank you so much

[@Webmyster]

Welcome 😊

[@KaiBoomm]

I LOVE YOU

[@storyteller1990]

thank you

[@Webmyster]

Welcome!

[@TheOlaastrand]

Hi, thanks for a good tutorial. Can you please help how to add an animation to the hero image only? I seem to only be able to apply an animation to the whole header, but I want to have a different animation for the image (fade in) and for the text (fade up).

[@theengineersdairies862]

Thanks a lot, but one problem After putting the css link in theme.liquid my homage get some blank width what's the problem?

[@Webmyster]

Please make sure you are putting it at the right place and you did not miss the starting < or closing > of the link tag/code while copy/pasting

[@theengineersdairies862]

@@Webmyster I put right place and didn’t miss any code,can you reply on instagram I have messaged you,

[@theengineersdairies862]

Not the whole page get extra width,only half of the page get the problem please help me

[@DanteEatSandwich]

how do i get it to fade out when center hit the top while it fades it when center hits bottom?

[@Webmyster]

Center hit the top and center hit the bottom? Can you please explain what "center" are you referring to?

[@DanteEatSandwich]

@@Webmyster Thanks for replying. I'm just wondering if I'm able to make it fade in and then fader out once it hit the top. Just wanted a cool effect to happen while scrolling down, being able to see photos slide in while others are sliding out.

[@aqsaali1940]

It disabled the mega menu when i apply the animations. Can you please tell me what's the solution to this problem

[@Webmyster]

Can you tell me which change disable the mega menu? Did it happen after you applied the animation to the header?

[@burakkocoglu7480]

hallo! Good Video and thank you. I have one question. How do i do that, for example, it is taken over for one banner. If i paste it, he does it for everyone. I will use other animations for my banners.

[@Webmyster]

Hi, you are right, this will impact every instance of the banner.. In order to apply a different animation to each banner instance you will have to create a new section for image banner (meaning copy files and rename to e.g. section-image-banner-anmation-1.liquid, image-banner-anmation-2.liquid etc). And the in each have your different animation. So it is a lot more work.

[@chrisloh8507]

Hi, the animation is great and working wonder on my store. However, after added the AOS code in theme liquid, the mobile phone somehow would experience some pinch and zoom issue where the page will be offside to the left and the right side is some unexpected blank space…. Not sure how to describe it but I have a screenshot of the video of the issue not sure how to share with you and hopefully you can help advise if that can be resolved?

[@Webmyster]

Hi! do you still have this issue? If this happened right after you just copy/pasted that link to AOS code, there is big possibility that there was an issue with copy/pasting or you did not insert the code at the right place. Let me know if you have the issue and I can try to help

[@AleksandreMikeladze]

@@Webmyster Hello How can I contact you? I also need help with that!

[@airbulbs]

I have same issue, AOS code is copied correct.

[@chrisloh8507]

@@Webmyster thx for the reply, the AOS codes are copied correctly. The issue still persist in mobile view.

[@Webmyster]

@@chrisloh8507 @Aleksandre Mikeladze @Air Bulb Ok so all of you only have this issue on mobile, Desktop is fine? I just tried this on my iphone and it seems to be working fine. So we need to figure out why is it different for you guys. Can you guys tell me the name of the theme and version? I only tested this with Dawn theme as I stated in the video. See below is a video clip I recorded on my iphone: cdn.shopify.com/videos/c/o/v/39aa056ed49c452abf99c244586712af.mov

[@AlanniStar]

I'm ashamed to admit, I understood coding much better as 7th a grader on myspace than I do as a college grad.

[@farazhaider4123]

Is this code can work on Sense theme of Shopify?

[@Webmyster]

Ofcourse your code will be different than what I show in the video for dawn theme but same concept should work. If you know how to find the place to put the code animation should work the same way.

[@ashleyhibbert7001]

its not working for me

[@Webmyster]

Can you tell me what issue are you having? Animation does not play at all?

[@TheBillionaire_Blueprint]

Do not do this it slows down the store so much