Develop Reference

Hovering over one div to trigger animations in another div

This is for my navbar on my personal website. I have my name displayed on the left side of the Navbar. I am trying to make a "wave effect" so that when I hover over my name (made of spans nested in a div), it will trigger the animations of the spans. Is there a better approach to this?
My Navbar now:
Imagine each character going up and back down when I hover across my name.
Part of React file:
<Navlink to="/" exact={true} className={styles['title-link']}>
<div className={styles.title}>
<span className={styles.animate1}>L</span>
<span className={styles.animate2}>e</span>
<span className={styles.animate3}>e</span>
<span> </span>
<span className={styles.animate4}>R</span>
<span className={styles.animate5}>e</span>
<span className={styles.animate6}>n</span>
<span> </span>
<span className={styles.animate7}>J</span>
<span className={styles.animate8}>i</span>
<span className={styles.animate9}>e</span>
</div>
</Navlink>
Part of SCSS file:
.title-link {
position: relative;
right: 275px;
text-decoration: none;
}
.title {
color: white;
font-family: 'Cedarville Cursive', cursive;
text-decoration: none;
font-size: 30px;
}
.title:hover {
span:first-child {
animation-delay: 0.11s;
}
span:nth-child(2) {
animation-delay: 0.22s;
}
span:nth-child(3) {
animation-delay: 0.33s;
}
span:nth-child(5) {
animation-delay: 0.44s;
}
span:nth-child(6) {
animation-delay: 0.55s;
}
span:nth-child(7) {
animation-delay: 0.66s;
}
span:nth-child(9) {
animation-delay: 0.77s;
}
span:nth-child(10) {
animation-delay: 0.88s;
}
span:nth-child(11) {
animation-delay: 0.99s;
}
}
.animate1, .animate2, .animate3, .animate4, .animate5, .animate6, .animate7, .animate8, .animate9{
animation-name: bounce;
animation-duration: 1s;
}
#keyframes bounce {
0% {
bottom: 0;
}
50% {
bottom: 5px;
}
100% {
bottom: 0;
}
}

I got your example working using css (not scss, counldnt find a fiddle host that allowed scss).
I think the main problem was using spans - they dont appear to animate inline elements. So I used a div with display: inline-block
http://jsfiddle.net/vdmpqawj/4/
<div id="title">
<div class="animate1">L</div>
<div class="animate2">e</div>
<div class="animate3">e</div>
<div class="animate4">R</div>
<div class="animate5">e</div>
<div class="animate6">n</div>
<div class="animate7">J</div>
<div class="animate8">i</div>
<div class="animate9">e</div>
</div>
#-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
#keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
#title:hover > div:first-child {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
}
#title:hover > div:nth-child(2) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.11s;
}
#title:hover > div:nth-child(3) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.22s;
}
#title:hover > div:nth-child(4) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.33s;
}
#title:hover > div:nth-child(5) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.44s;
}
#title:hover > div:nth-child(6) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.55s;
}
#title:hover > div:nth-child(7) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.66s;
}
#title:hover > div:nth-child(8) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.77s;
}
#title:hover > div:nth-child(9) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.88s;
}
#title {
color: black;
font-family: 'Cedarville Cursive', cursive;
text-decoration: none;
font-size: 30px;
}
#title > div {
display: inline-block;
}

Preloader Hidding Effect

I was trying to add a preloader function to my page. It's done. but the preloader is fade out like the image below.
Here is my Code..
$(document).ready(function() {
//Preloader
$(window).load(function() {
preloaderFadeOutTime = 5000;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 999999;
}
.spinner.windcatcher {
margin: 0 auto;
top: 46%;
left: 48%;
border: 0;
position: absolute;
width: 4em;
perspective: 50em;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.spinner.windcatcher .blade {
height: 0.5em;
background: red;
margin-bottom: 0.1em;
-webkit-animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
}
.spinner.windcatcher .blade:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.spinner.windcatcher .blade:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.spinner.windcatcher .blade:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.spinner.windcatcher .blade:nth-child(4) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.spinner.windcatcher .blade:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.spinner.windcatcher .blade:nth-child(6) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.spinner.windcatcher .blade:nth-child(7) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.spinner.windcatcher .blade:nth-child(8) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }
<div class="spinner-wrapper">
<div class="controls"></div>
<div class="spinner windcatcher" id="windcatcher">
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
</div>
</div>
In the above picture, Preloader is Fadeout from Right to left. But I need it should not be Fadeout from Right to left. It should fadeout from the current position. Please help.
Thank you.

Try .fadeOut instead of .hide method.
JSFiddle sample

CSS3 Looping after last frame animation is done in sequence of animations

I currently have 5 frames - each frame consist of a total of 3 animations that by time gradually fade up the next frame.
My issue: How can I loop the animation after having finished the last sequence of animation? (in the example that would be #frame2)
I don't mind using javascript to possibly detect and "force" the loop.
Fiddle here: http://jsfiddle.net/a0cpo5xe/1/ - My setup looks as so (just imagine it with 5 frames):
#frame1 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:0.8s;
}
#picture-1 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#picture-1 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#frame2 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:4.3s;
}
#picture-2 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
#picture-2 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
/* FADES */
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}

You can listen for the animationend event using JavaScript to determine if the animation ended.
animationend
The animationend event is fired when a CSS animation has completed.
Here is an example repeating your css animation from your jsfiddle three times by cloning your elements, removing them and at the end of the animation adding them back to the DOM.
I'm sure you will get the idea.
var i = 1;
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement"),
animations = {
"animation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
};
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
function init() {
var animationEvent = whichAnimationEvent(),
wrp = document.getElementById('wrapper'),
frm2 = document.getElementById('frame2'),
cln = wrp.cloneNode(true);
function animationEnd(evt) {
i++;
//console.log(evt);
wrp.parentNode.removeChild(wrp);
document.body.appendChild(cln);
if (i !== 3) {
init();
}
}
frm2.addEventListener(animationEvent, animationEnd);
}
init();
#wrapper {
text-align: center;
color: #ffffff;
}
#frames {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* hide */
}
#pictures {
position: absolute;
top: 0;
}
.picture {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
opacity: 0; /* hide */
}
/* ANIMATION START */
#frame1 {
background-color: green;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.8s;
animation-delay:0.8s;
}
#picture-1 .picture {
background-color: #116343;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.5s;
animation-delay:0.5s;
}
#frame2 {
background-color: blue;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:4s;
animation-delay:4s;
}
#picture-2 .picture {
background-color: #3d1163;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:3.7s;
animation-delay:3.7s;
}
/* FADES */
#-webkit-keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
<div id="wrapper">
<div id="frames">
<div id="frame1" class="frame">frame 1</div>
<div id="frame2" class="frame">frame 2</div>
</div>
<div id="pictures">
<div id="picture-1">
<div class="picture">pic 1</div>
</div>
<div id="picture-2">
<div class="picture">pic 2</div>
</div>
</div>
</div>

jQuery make animation in pseudo after

I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.

It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle

CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}

How can I show a spinner during a long JavaScript execution?

I have been playing with this for a long time now and cannot get a spinner in CSS to show when I press a button and then hide after the JavaScript function execution. This is a snippet of what I am attempting to do with pure JavaScript.
<button id="spinBtn" onclick="spinIt()">Spin it</button>
<div class="spinner" style="visibility:hidden;">
<script>
function spinIt() {
document.getElementsByClassName("spinner").style.visibility = "visible";
setTimeout(function () {
// long code here
document.getElementsByClassName("spinner").style.visibility = "hidden";
}, 1); // give it a moment to redraw
}
</script>
http://jsfiddle.net/imparante/h9kLL1se/

Try
Instead of document.getElementsByClassName , use document.querySelectorAll and increase the setTimeout time interval.
And document.getElementsByClassName return array of match element. To pick the first element, use document.getElementsByClassName('spinner')[0]
function spinIt() {
document.querySelectorAll(".spinner")[0].style.visibility = "visible";
setTimeout(function() {
// long code here
document.querySelectorAll(".spinner")[0].style.visibility = "hidden";
}, 1000); // give it a moment to redraw
}
.spinner {
margin: 100px auto;
width: 20px;
height: 20px;
position: relative;
}
.container1 > div,
.container2 > div,
.container3 > div {
width: 6px;
height: 6px;
background-color: #333;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 {
top: 0;
left: 0;
}
.circle2 {
top: 0;
right: 0;
}
.circle3 {
right: 0;
bottom: 0;
}
.circle4 {
left: 0;
bottom: 0;
}
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
<p>
<button id="comboBtn" onclick="spinIt()">Combo it</button>
</p>
<div class="spinner" style="visibility:hidden">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>

document.getElementsByClassName returns many elements (plural). At the very least you'd have to do this:
document.getElementsByClassName("spinner")[0].style.visibility = "visible";
^^^
Though you should either loop through this element list and make all spinners visible, or you should use a unique id for your spinner and get this one specific spinner via document.getElementById (singular).