How to stop/start CSS animation
Background-Info
I'm trying to make a loader for my website where when someone makes a search to my API it will popup the loader then after the table gets built it will stop the loading animation. I'm not good with javascript and I'm just trying to create this side project so I don't completely know how this stuff works. I did see another stack overflow post about this topic but it didn't apply to me because the way they called the CSS animation was different
I followed a tutorial for this loader here he shows how to stop it but he doesn't show how to start it, but it doesn't stop for me
What I tried
Like I was saying above I'm not good with javascript so I wasn't sure what i should try but like in the video I tried to make the CSS display = None and also i tried to remove the HTML entirely ( you can see it below in the code)
End goal
My end goal is to have a javascript function like start_loading() and stop_loading() I can call to stop and start the loading at any time
Code
function start_load() {
let spinnerWrapper = document.querySelector('.spinner-wrapper')
console.log(document.querySelector('.spinner-wrapper'))
window.addEventListener('load', function() {
spinnerWrapper.style.display = 'none';
// spinnerWrapper.parentElement.removeChild(spinnerWrapper)
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
.spinner-wrapper {
width: 100%;
height: 100%;
/* background-color: #151515; */
position: absolute;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
position: relative;
width: 8rem;
height: 8rem;
border-radius: 50%;
}
.spinner::before,
.spinner:after {
content: "";
position: absolute;
border-radius: 50%;
}
.spinner:before {
width: 100%;
height: 100%;
background-image: linear-gradient(90deg, #212529 0%, white 100%);
animation: spin .5s infinite linear;
}
.spinner:after {
width: 90%;
height: 90%;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
/*Simulate page content*/
.main-content {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/random/4000x4000") center no-repeat;
background-size: cover;
}
<body onload="verifySession(), start_load()">
<div class="spinner-wrapper">
<div class="spinner">
</div>
</div>
const start_load = function () {
document.querySelector('.spinner-wrapper').style.display = "block"
}
const end_load= function () {
document.querySelector('.spinner-wrapper').style.display = "none"
}
You can change .spinner-wrapper by any class you want. Those function will set fisrt html tag have .spinner-wrapper class to display : block or display : none
Hope this help for you
Your question is not very clear on when you want to start and stop the loader but from my understanding you have an api and you want the loader to show when someone calls your api so in this particular case you want to work with DOM event listeners (at least when you start your search by a click of a button or when you press enter on your keyboard) you can read more on event listeners here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and here:
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
As for stopping the event you will want to call the stop function once data are returned from your API
I've created a little codesandbox for you with two buttons to start and stop the loader as a simple example of how to use event listeners which you can find here: https://codesandbox.io/s/happy-rain-e9w3mz
Related
In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js
You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* display: none; */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
I copied the HTML code into a code block embed on my page, the CSS into the inside head tag on page settings & the JS into the before body tag on page settings. When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
.container {
background-color: red;
}
.container img {
mix-blend-mode: darken;
}
this is how it works the container should have background-color to mix the background color in child image
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Reference : https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)
Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.
Hi i'm trying to make it so when someone hovers on an image it makes the play button turn up only on that image, I have a few different effects on the image so I've had to make it so that when i hover one class it shows another one with it too using java, only problem is I have 9 images that need to show the play button on hover indivudally but when I hover over 1 image it shows the play icon on all of the images at once,
Is there an easier way to do this so that the play icon only shows when I'm hovering the one specific image?
Javascript:
$(".portbg1").hover( function () {
$(this).addClass("active");
$(".playbutton").addClass("active");
}, function (){
$(this).removeClass("active");
$(".playbutton").removeClass("active");
});
HTML:
<div class="port_item"><div class="playbutton"></div><div
class="portbg1"><div class="port_item_title" data-modal="#modalOne"> .
<h4>Showreel</h4></div></div></div>
There's also portbg2, portbg3, portbg4 etc... portbg9
CSS:
.playbutton {
position: absolute;
background-image: url(IMAGES/openicon.png);
background-size: 80px 80px;
background-repeat: no-repeat;
background-position: center center;
width: 80px;
height: 80px;
left: 50%;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translate(-50%,-50%);
z-index: 1;
opacity: 0;
overflow: hidden;
transition: all 0.2s;
}
.playbutton:hover {
opacity: 1;
}
.active {
opacity: 1;
}
Just doing :
$(this).siblings('.playbutton').addClass("active");
doing the same on remove class.
So finally would be:
$(this).addClass("active").siblings('.playbutton').addClass("active");
EDIT: This is not the same as this post, How to reverse an animation on mouse out after hover. The difference being that in this case the state of the transition (how far it has progressed) is essential unlike in the aforementioned post that completely ignores it.
TL;DR: How to animate/transition an element back to it's original state after animation ends?
Hello,
I'm trying to make animate panels so that they "float" when hovered. My problem is that the mouse leaves the panel, instead of transitioning back to it's original state, it jumps instantly back.
A heavily simplified version of this can be found in the snippet available below.
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
}
div:hover {
animation: float 2s infinite ease;
}
#keyframes float {
0%, 100% {
transform: none;
}
50% {
transform: translateY(-20px);
}
}
<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>
As you can see, floating it triggers a smooth animation that resembles a floating motion, however, it is abruptly interrupted as the mouse leaves the box and the animation stops.
So my question is: Is there a way to allow the box to transition back to it's original state, preferably without using JavaScript (although all suggestions are appreciated).
(This has probably been answered somewhere online and if that is the case, then I am truly sorry but I have been unable to find a proper solution to my problem. Please add duplicate if you find an applicable solution.)
Thanks.
You're going to have to use JavaScript and CSS Transitions:
var box = document.getElementById('box')
var timer
box.addEventListener('mouseenter', function () {
box.classList.add('up')
timer = setInterval(function () {
box.classList.toggle('up')
}, 1000)
})
box.addEventListener('mouseleave', function () {
clearInterval(timer)
box.classList.remove('up')
})
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
transition: transform 1s ease;
}
div.up {
transform: translateY(-20px);
}
<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>