We Keep Coding

Setting element to visible does not run css animation

I have the following html code
var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){
a = document.getElementById("notification");
a.style.visibility = "visible";
});
#notification {
position: fixed;
z-index: 101;
bottom: 0;
transform: translateY(calc(100% + 10px));
left: 10vw;
right: 10vw;
text-align: center;
height: 20vh;
overflow: hidden;
background-color: #ededed;
color: #000;
}
#keyframes slideUp {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
#notification {
animation: slideUp 2.5s ease forwards;
}
<button id="openNotification">
Open notification
</button>
<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>
The CSS for this div contains "transform" code to make the notification slide up the screen...
When I run the following code in a setTimeout function the notification simply appears on the screen and does not slide up as it should.
a = document.getElementById("notification");
a.style.visibility = "visible";
How do I fix this?
On further testing I can see that the animation code seems to be running from the moment the code is loaded. I assume I need to somehow change this behaviour so the animation code is kicked off by the setTimout function or in this case the button click. Any examples on how to do this?

The animation takes place but as it only lasts a short time, by the time you come to push the button it has finished, and you then make the thing visible.
Instead we remove the animation from the initial state of the element and add it (by adding a class in this case) only when you click the button.
Note: if you want this to be repeatable you will have to include sensing the animationend event and removing the slide class at that point. Otherwise the system will think it's done the animation and needn't do it again.
var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){
a = document.getElementById("notification");
a.style.visibility = "visible";
a.classList.add('slide');
});
#notification {
position: fixed;
z-index: 101;
bottom: 0;
transform: translateY(calc(100% + 10px));
left: 10vw;
right: 10vw;
text-align: center;
height: 20vh;
overflow: hidden;
background-color: #ededed;
color: #000;
}
#keyframes slideUp {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
#notification.slide {
animation: slideUp 2.5s ease forwards;
}
<button id="openNotification">
Open notification
</button>
<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>

animation like vertical scrolling div inside parallax

I am trying to do the animation, based on scroll, I already create float-animation in my keyframe. however it doesn't result to the same that I like. I wanted when scroll. then it will be like vertical carousel when scrolling. But the only difference I'm using keyframes and add that class whenever the scroll condition meet. I wanted when I scroll down then the .div1 will slide up and after the animation complete I wanted to show the .div2 .Then if the .div2 is current display when scroll up .div2 will animate slide down then when the animation done then .div1 will appear again just like in vertical carousel. Can someone help me. please
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("scrollTest");
let lastScrollTop = 0;
if (window.scrollY > elementTarget.offsetTop + 100) {
console.log("up 1");
$(".div2").show();
$(".div1").addClass("float-anim");
$(".div1").hide();
} else {
$(".div2").hide();
$(".div1").show();
}
});
body {
height: 200vh;
}
.div2 {
display: none;
}
.scrollTest {
position: fixed;
}
.float-anim {
position: relative;
-webkit-animation: floatBubble 9s;
animation: floatBubble 9s;
animation-fill-mode: forwards;
/*Safari and Chrome*/
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes floatBubble {
100% {
top: -100rem;
}
0% {
top: 0px;
}
}
#keyframes floatBubble {
100% {
top: -100rem;
}
0% {
top: 0px;
}
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="scrollTest" id="scrollTest">
<div class="div1">
<img src="https://i.pinimg.com/736x/f7/eb/d8/f7ebd86ff10d7d738d975f227a591600.jpg" width="50%" />
</div>
<div class="div2">
<img src="https://i.pinimg.com/736x/85/60/5a/85605a84fe1acc6e16ff5a84255b41ab.jpg" width="50%" />
</div>
</div>
</body>

Loader CSS animation

This is an example of a loader animation copied from the w3schools website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
I have a similar one on my page with function to hide the loader after seconds of the main page refresh:
setTimeout(function() {
$('#loadingAnimation').addClass('hidden');
}, 1500);
Now my question is:
Is there a way to add the animation elements using JavaScript? I mean, when I inspect the page I can change the CSS of the loader which makes it visible, so how can I add the elements on the page using JavaScript and then remove it to make it unchangeable?
#loadingAnimation{
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
right:0;
bottom:0;
background-color: #ffffff;
opacity: 1;
transition: 0.5s;
visibility: visible;
z-index: 10;
}
#loadingAnimation.hidden{
opacity: 0;
visibility: hidden;
}
I'm new to programming :) I need your help and I hope my question is clear!

There are some things you can do namely:
Add a class into your style that does the animation (Recommended since it requires the least work) and add elements with that class / add the class to elements.
Create a new style element with a unique id (somewhat overly complex for something of this scale)
requestAnimationFrame - Very hard and easy to go wrong - Basically just for reference
Implementation for 1:
CSS:
.loadingAnimation { /* . notates a class whereas # notates an id */
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
right:0;
bottom:0;
background-color: #ffffff;
opacity: 1;
transition: 0.5s;
visibility: visible;
z-index: 10;
}
JS:
const loader = document.createElement("div");// Create a new div element
loader.className = "loadingAnimation"; // Add the loadingAnimation class to it
document.getElementById("root").append(loader); // Add it to an element with id root
setTimeout(function() {
loader.remove(); // Remove the loader
}, 1500);

Instead of applying the hidden class to the loader element you can just simply remove it instead!
setTimeout(function() {
$('#loadingAnimation').remove();
}, 1500);
This will remove it from the DOM and stop people playing with the styling in the dev tools.
I will add though that there's really not a lot you can do to stop people fiddling with websites in their own browsers and it's not that big of an issue.

Loading Icon While Images Load

How would I program a loading icon or graphic that appears while images on a page load. An example would be http://landerapp.com/?
My goal is to prevent the user from seeing this images on screen until they are ready to animate (see the problem at http://tsawebmaster1.hhstsa.com/index.html).

Let's begin with a visible loading image that is fixed in the exact middle of the screen. Then, when the page is fully loaded, we'll add a "page_loaded" class on the <body> which:
[1] begins the fade out of the loading image
[2] begins the fade in and translation of offscreen images to the screen
window.onload = function() {
document.body.classList.add("page_loaded");
}
.loader {
opacity: 1;
transition: 2s opacity;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right,
.left {
height: 100px;
position: absolute;
transition: 1s 2s;
opacity: 0;
}
.left {
left: 0;
transform: translateX(-50em);
}
.right {
right: 0;
transform: translateX(50em);
}
.page_loaded .loader {
opacity: 0;
}
.page_loaded .right,
.page_loaded .left {
opacity: 1;
transform: translateX(0);
}
<img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" />
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" />
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

If you are using Vanilla or jQuery I'd suggest you to use imagesLoaded which is meant to achieve exactly what you want.
I'd go with something like this:
$(function(){
$('.img-container img').imagesLoaded().done(function(){
console.log('images loaded');
$('.img-container .loader').remove();
$('.img-container img.hide').removeClass('hide');
}).fail(function(){
console.log('FAILED TO LOAD IMAGES');
});
});
.img-responsive {
max-width : 100%;
}
.hide {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<div class="img-container">
<div class="loader">
Loading image....
</div>
<img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide">
</div>

CSS/JavaScript slide DIV out and slide DIV in

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?

Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle

here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO

using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/

Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.