I am trying to make AOS flip-up animations start when the page is initially loaded.
I am refering to the animations applied to img items in <div > , i am using the data-aos="flip-up" animation on these items.
Noob question: can i use multiple animation libraries in the same html file (on different elements ofc)?
Perhaps i should be using a different animation library other than AOS since that one is specifically meant for on-scroll animation, i was wondering if it was possible to do with AOS though. thanks
Currently the animations only start when i scroll down the page or when i refresh the page when already scrolled down. when i scroll up to the top of the page the animation for these images is played in reverse (the images flip down and they become invisible after the animation has finished). I tried finding how to make the animation start when page is loaded, i've seen suggestions to use javascript to animate a scrolling animation as such:
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
$(document).ready(function(){
$("body,html").animate({
scrollTop: 10
}, 1000);
$("body,html").animate({
scrollTop: 0
}, 1);
});
</script>
But adding this script snippet to my code doesnt seem to do anything (animations still behave the same). My current code:
<!Doctype HTML>
<head>
<title>Troos Bouw</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <!-- Font -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> <!-- On scroll animations -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script> <!-- On scroll animations -->
</head>
<style type="text/css">
*{margin:0;}
html {
scroll-behavior: smooth;
}
/* Footer styles */
footer {
background-color: rgb(0, 0, 0);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 1vh;
color: #fff;
/* padding: 1em; */
display: flex;
justify-content: space-between;
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.5);
z-index:1002;
}
footer .social-media ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .social-media ul a{
text-decoration: none; /* remove underline from social-links */
}
ul.footerlist li {
display:inline;
list-style: none;
}
.socials-img{ /* social icons; image size, background */
height: 2.5vh;
background-color: red;
opacity: 1
}
#filler{
background-color: aqua;
height: 1000vh;
}
.header{
position: fixed;
width:100%;
padding-bottom: 15px;
height: 80px;
background-color: rgba(2, 2, 2, 0.7);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
z-index: 1000;
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
padding-top: 9px;
background-color: red;
}
.header ul li a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font: size 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
font-weight: 1000;
padding: 25px ;
color: rgb(252, 252, 252);
transition: all ease 0.5s;
border-radius: 20px;
}
.header ul li a:hover{
background-color: rgba(160, 159, 159, 0.5);
}
.logoText{
width:200px;
margin-left: 1vw;
margin-top:2.5vh;
position: fixed;
z-index: 1001;
background-color: red;
}
.logoIcon{
margin-top: 10px ;
height:100px;
margin-left: 90vw;
position: fixed;
z-index: 1001;
background-color: red;
}
</style>
<body>
<header id="theHeader">
<!-- WEBSITE NAME TOP LEFT -->
<a href="#theHeader"><img data-aos="flip-down" data-aos-duration="1000" data-aos-delay="100" src="img/troosText.png" ></a>
<a href="#theHeader"><img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500" src="img/TROOS geen achtergrond 1.png" ></a>
<!-- TOP NAV. MENU -->
<div >
<ul>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#theHeader">home</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#about">about</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">service</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">gallery</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">home</a></li>
</ul>
</div> <!-- end of header -->
<!-- <div id="transparentDiv" >
<div id="arrowText" style="display: flex; align-items: center; justify-content: center; font-size: 200%;">ARROWTEXT</div>
<img style="display: flex; align-items: center; justify-content: center;" src="img/UI/arrow.png" background-color="red ">
</div> Arrow button which when clicked scrolls down -->
<div id="transparentDiv" style="display: flex; flex-direction:column; align-items: center; justify-content: center;">
<img src="img/UI/troos text banner.png" background-color="red">
<a href="#about"><img src="img/UI/view more button purple.png" ></a>
<!-- <button >Our Projects
<img src="img/UI/arrow.png" >
</button> -->
</div>
<!-- <img src="your-image-url.jpg" alt="Background Image"> -->
<img src="img/Troos BG lowres_auto_x2.jpg" alt="Background Image" >
</header>
</header>
<div id="filler">filler</div>
</body>
</section>
<footer>
<div >
<h3>Connect with us</h3>
<ul >
<li><a href="www.instagram.com" target="_blank"><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="100" data-aos-once="false" src="img/socials/Socials_Insta.png" > </a></li>
<li><a href="www.facebook.com" target="_blank"><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="false" src="img/socials/socials_FB.png" > </a></li>
<li><a href="www.facebook.com" target="_blank"><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="false" src="img/socials/socials_WA.png" > </a></li>
<li><a href="www.facebook.com" target="_blank"><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="false" src="img/socials/socials_TW.png" > </a></li>
<li><a href="www.facebook.com" target="_blank"><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="false" src="img/socials/Socials_G .png" > </a></li>
</ul>
</div>
</footer>
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
</script>
</html>
NOTE: I have added a red background color to the animated elements such that they are easily visible (theyre placed in the bottom left corner). Also added a big div "filler" to the body such that scrolling is possible.
What is strange to me is that in the header i've added some animated elements as well (same AOS animation) which for some reason do load immediately when the page loads even when scrolled all the way up. I've added the code for these header element
Thank you!
CodePudding user response：
To stop the animation while scrolling back you can use attribute to element
data-aos-once="true"
https://github.com/michalsnik/aos#-advanced-settings
CodePudding user response：
<script>
AOS.init({
duration: 800,
delay: 0,
easing: 'ease-in-out'
});
</script><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<div data-aos="flip-up">Your content here</div>You can find more information and options for the AOS library on their website https://michalsnik.github.io/aos/
////////////////// ---- OR ---- ///////////////////
$(document).ready(function(){
$(".flip-up").addClass("animation-class");
});.animation-class {
animation: flip-up 1s ease-in-out;
}
@keyframes flip-up {
from {transform: rotateX(90deg)}
to {transform: rotateX(0deg)}
}<div >Element 1</div>
<div >Element 2</div>