Replies posted by Zaid_Nazir

3 Replies

Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] On-Scroll Animations

Yes it might not be working because of some adding code which you have used. I will share the dummy link of a page which i just created and added animation to it. You can check it source code and copy the script from it which might help http://unbouncepages.com/animation-test-zaid/

107
C
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] On-Scroll Animations

You can keep in the head And if this still doesnt work try adding another js file in the second step <script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script> <script> $('#lp-pom-image-58, #lp-pom-image-63 ,#lp-pom-text-57, #lp-pom-button-60').attr({ "data-aos":"fade-up", "data-aos-duration": "3000", // you can change the duration here "data-aos-once":"true" // for animation to happen just once }); </script> And if you want you can remove the CSS link file from the first step and add it separately in the CSS file <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

107
C
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] On-Scroll Animations

I have found a much easier and effective way to do it. 🙂 Step 1: Add this code in the javascript and keep its placement to the head <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script> AOS.init(); </script> Step 2 Create one more javascript file and add this code. Update the ‘ #lp-pom-image-58 ’ with the ID of your page element. Here you can add multiple ids of the elements you want to give animation to If needed, you can also change the animation effect by replacing ‘fade-up’ with any other effect eg: fade-up, fade-down, fade-right, fade-left, fade-up-right, fade-up-left, fade-down-right, fade-down-left, flip-left You can check the effects from the link mentioned below http://michalsnik.github.io/aos/ <script> $('#lp-pom-image-58, #lp-pom

107
C
1 year ago

Badge winners

Show all badges
Terms & ConditionsCookie settings