-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sorry for the noob question - How to setup on wordpress? #254
Comments
initialize AOS where you wanna use it,
|
Thank you for helping a dummy like me out! Do you mind if I ask, are you using a child theme? Also, did you put
in the beginning of your home page, or did you also put that somewhere in the editor? |
I'm only asking cause I'm using a child theme. I added that initializing script you gave me in my full-width-page.php template. Then I added following to load the external java file: I added that not in my editor, but instead I went to Appearance > Theme Options > Styling > External Java field. I've added different java there before and it worked. In addition, I added the html to load the aos.css file at the top of the page I want the AOS to appear. But still, it's not working. I'm wondering if it's because I need to load the java and the CSS somewhere directly in the editor instead. I tried doing that, but I don't know the proper way/place to add them without getting an error. |
I found a field my theme has to link for loading external CSS, as well as the java field I mentioned above. I changed the links to the following:
and I added the initializing java in my page template. I tried clearing out my cache and debugging on page browser command, but still, it doesn't load Please, help a mentally-challenged brother out. |
Hi @battlethepain, a couple things that might help you out:
|
Here's another noob seeking help. I added the following code to functions.php `wp_register_style( 'AOS_style', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css' ); wp_register_script( 'AOS_js', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', null, null, true ); But I'm not sure how to use the animations and/or if I included the library in the correct way? |
I think I came one step closer, my functions.php now looks like this. I got no errors in the console. However, when I add data-aos="fade-up" to an SVG on my page it won't show. ` //* Enqueue AOS.CSS and AOS.js wp_register_script( 'AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', null, null, true ); //* Enqueue script to activate AOS.js //* Add JavaScript before |
@idmick All of the register and enqueue functions should be wrapped in the action function register_scripts_and_styles() {
// Enqueue AOS styles
wp_enqueue_style(' AOS_animate', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css', false, null);
// Enqueue AOS script library in footer
wp_eqneue_script('AOS', 'https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js', false, null, true);
// For the JavaScript that initializes AOS, it's best if you manage that in a separate
// JS file and enqueue it as a dependency of AOS script library. That way, it ensures the
// order of your scripts.
wp_('theme-js', 'path/to/theme.js', ['AOS'], null, true);
} |
So should the .js file we're linking to in the enqueue script just have:
|
Correct. |
This doesn't seem to work for me. This is what I have in my child theme functions.php `function register_scripts_and_styles() {
}` and my aosini.js file has
but nothing seems to be happening, animation wise. Not sure what I'm doing wrong? |
ps. I'll remove the comments later but I just wanted to make sure I copied and pasted exactly from the code you posted |
You missed the part where those registrations are supposed to fire in the action |
Closing due to long time with no response since last instruction provided by @jongc :) Thanks to everyone involved. If there will be more issues feel free to reopen discussion. |
hello @jongc will you please help me how to add AOS animation in my WordPress website?? |
Hi there! I was having the same issue on my Wordpress project but it finally worked for me when I waited for the target elements to load on the DOM using jQuery and then initialized AOS after, rather than initializing AOS right at the top of the script, like so: // Explcitly wait for whole page to load |
to get the aos to work it is essential for the css file to be included...
I seemed to of missed putting it in and was scratching my head on why everything was not animating.... but I was able to see that the tags where changing during scrolling in the inspector. You can see that a aos-animate item getts added during the "effect" that would be a good way of testing if your animations are firing off. But once I added the css file everything just came to life. |
of course you can do it in wordpress. It can be done not only for siteground plugin but also can be done for all builder plugin. Here an example you check that I done it in my divi site: (https://ntechway.com) |
I know very well how to get it work. If anyone need it in wordpress then hire me and I will do it for you |
My answer: I know very well how to get it work. If anyone need it in wordpress then hire me and I will do it for you |
|
I am sorry I don't have fiverr we can make the transaction in wise.com or freelancer.com and my id on freelancer.com is: https://www.freelancer.com/u/fiverrwork0 |
For more information this is my what's app id: +8801830200115. If anyone need the michalsnik AOS on your website you can contact me any time. |
Hey,
Again, sorry to waste your time with such a noob question but I'm having trouble loading AOS. I was hoping someone will be kind enough to help me out.
I pasted the following java in my theme-options > external js field
<script src="bower_components/aos/dist/aos.js"></script>
and the following HTML on the top of the page I want my AOS to appear on:
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
but when I add the data-aos attribute to the html element, the element simply doesn't show up.
Sorry to waste your time!
The text was updated successfully, but these errors were encountered: