static mouse wont active hover on spinning cube (relative face) - javascript

I followed an online tutorial (https://3dtransforms.desandro.com/cube) to make a spinning 3d cube. I added a CSS animation to make the cube spin and show all of its faces.
#keyframes cubeSpin {
0% { transform: rotateX(0) rotateY(0);}
17% {transform: rotateX(90deg) rotateZ(0);}
34% {transform: rotateX(90deg) rotateZ(90deg);}
50% {transform: rotateX(180deg) rotateZ(90deg);}
67% {transform: rotateX(270deg) rotateZ(90deg);}
84% {transform: rotateX(270deg) rotateZ(0deg);}
100% {transform: rotateX(360deg) rotateZ(360deg);}
}
Currently, if you check out my codepen (https://codepen.io/durandamien1997/pen/rNymxMo) you will notice, if you hover over the cube, it will change the face colors of the cube.
.cube__face:hover {
background: black;
color: white;
}
However, you will also notice that if you don't move your mouse around and let it sit static over the cube, when the new face of the cube enters the vicinity of your mouse, the :hover on that face will not be activated, but :hover effects will stick to the initial face, or the last face the last time you moved your mouse.
I have tried using z-index to set each face on it's own layer that way :hover will active for each of them automatically, but that only made it so :hover is activated when the highest indexed face hits the mouse.
/* z-index attempt */
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); z-index: 1 }
.cube.show-right { transform: translateZ(-100px) rotateY( -90deg); z-index: 2 }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); z-index: 3 }
.cube.show-left { transform: translateZ(-100px) rotateY( 90deg); z-index: 4 }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); z-index: 5 }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); z-index: 6 }
How do I make :hover activate without having to move the mouse when current face is in view?

Related

React - two external packages destroy animations

I installed two packages:
react-custom-roulette
react-dice-roll
They work fine if it is only one of them, but if I render <Wheel> from react-custom-roulette, animation of <Dice> from react-dice-roll is broken. It only spins around.
Example: https://codesandbox.io/s/dazzling-morning-wb4hgz?file=/src/App.tsx
You can just delete <Wheel> component from that code and refresh the page and everything works as it should work.
Why something like this happening? How can I fix that?

Why something like this happening?
CSS animations must be defined with a global name, and unfortunately the 2 mentioned libraries use the same spin name, so the last one overwrites the other, and interferes with the other library animation:
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes#resolving_duplicates
If multiple keyframe sets exist for a given name, the last one encountered by the parser is used.
react-dice-roll/src/styles.scss #keyframes spin
react-custom-roulette/src/components/Wheel/styles.js #keyframes spin
How can I fix that?
Both libraries directly embed their styles, so it is not straightforward to swap one style with a fixed version.
However, react-dice-roll uses a "non-dynamically scoped" stylesheet (i.e. non CSS-in-JS-based), so it is still quite simple to overwrite the style bits that conflict:
/* In your app stylesheet (make sure to import it AFTER react-dice-roll) */
/* Overwrite the styles that contain the animation name */
._space3d.rolling ._3dbox {
transform-style: preserve-3d;
animation: spin2 2s infinite linear;
}
/* Copy the animation with a new unique name */
#keyframes spin2 {
0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
Fixed example: https://codesandbox.io/s/inspiring-danilo-o6ibvo?file=/src/styles.css

Using jQuery to trigger CSS shake animation, works every OTHER time ... why?

I have a rather simple fiddle here: http://jsfiddle.net/7aotzqmL/2/ that is supposed to shake a div with CSS animation upon clicking a link. It works, but only every other time (every second time). I'm stumped - can anybody help?
Other answers I've looked at mentioned how when using onmouseover you also need to attach onmouseout... but this is just a click so I'm not sure that's relevant. I just want the div to shake on every click rather than every other.
jsFiddle: https://jsfiddle.net/7aotzqmL/2/
CSS code:
$(function() {
$('a').click(function(ev) {
$('div').toggleClass('shaker');
ev.preventDefault();
});
});
div.shaker {
animation: shake 0.3s;
/* When the animation is finished, start again */
animation-iteration-count: 1; //single shake
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
asd
<div>shake</div>

Try this will work
$(function(){
$('a').click(function(ev){
$('div').addClass('shaker');
setTimeout(function(){
$('div').removeClass('shaker');
},300);
ev.preventDefault();
});
});
Below code is removing class on even time click, and you animation working on adding class
$('div').toggleClass('shaker');
in above solution, div class will be removed after 0.3secs animation, it will add 'shaker' class every time you click and animation will happen

You are toggling the class so the first click adds it and the second removes it. Instead you could add the class on click and set a single use event listener to listen for the animation end and then remove the class.
$(function() {
const div = $('.container')
$('a').click(function(ev) {
div.addClass('shaker')
div.one('animationend', () => {
div.removeClass('shaker')
})
ev.preventDefault();
});
});
.container {
opacity: 1;
width: 100px;
height: 100px;
background: red;
}
.container.shaker {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.3s;
/* When the animation is finished, start again */
animation-iteration-count: 1; //single shake
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
asd
<div class="container"></div>

Well, for one, you're TOGGLING the class. so one click means "add" the next one means "remove". Also, "preventdefault" should appear first in order to prevent the default behavior of the anchor tag before you try to add or remove classes.
$(function(){
$('a').click(function(ev){
ev.preventDefault();
$('div').addClass('shaker');
setTimeout(()=> {
$('div').removeClass('shaker');
},300)
});
});

$(function(){
$('a').click(function(ev){
$('div').addClass('shaker');
setTimeout(()=>{
$('div').removeClass('shaker');
},300)
ev.preventDefault();
});
});
Use the above code. You were removing the shaker class alternatively.

Fullpage.js onSlideLeave trigger CSS class

How can I trigger CSS class to start my logo animation when scrolling/changing slide with fullpage.js?
I have this (it works alright) for animating my SVG wheel logo:
.logo-img:hover #wheel {
-webkit-animation: in 1s;
transform-origin: 49% 50%;
}
#wheel {
-webkit-animation: out 1s;
transform-origin: 49% 50%;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
It's a simple animation of spinning wheel 360deg., now I want it to spin when scrolling and use "in/out" keyframes depending on sliding page up or down.
I'm using fullpage.js and jquery v2.2.4
I hope It makes sense.
Thanks

Use the fullpage.js state classes.
So you can do:
.fp-viewing-section1-slide1 .myItem{
/*Whatever */
}
See my video tutorial here:
https://www.youtube.com/watch?v=qiCVPpI9l3M&t=5s

Css3 animation jumps to last keyframe on mobile without animating

I am trying to build a simple animation of a beaker tipping over. Everything is working great on desktop, but both iOS Safari and chrome, when the animation starts it jumps immediately to the last key frame (100%). So this tells me the animation is firing, but for some reason it just doesn't want to well... animate.
Here is my scss code. I have an auto-prefixer, I've checked and double checked, it doesn't seem to be anything to do with -webkit. Any help would be awesome!!
/** Our Process Area Edits **/
&.our-process-title {
#our-process-svg {
width: rem-calc(150);
height: rem-calc(150);
margin: 50px auto;
transform: translateZ(0);
animation-name: beakerShake;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
&.running {
animation-play-state: running;
}
#-webkit-keyframes beakerShake {
0% { -webkit-transform: rotateZ(0deg);}
5% { -webkit-transform: rotateZ(20deg); }
15% { -webkit-transform: rotateZ(-25deg); }
20% { -webkit-transform: rotateZ(0deg);}
40% { -webkit-transform: rotateZ(0deg);}
50% { -webkit-transform: rotateZ(5deg); }
55% { -webkit-transform: rotateZ(-10deg); }
58% { -webkit-transform: rotateZ(15deg); }
60% { -webkit-transform: rotateZ(0deg);}
65% { -webkit-transform: rotateZ(0deg);}
72% { -webkit-transform: rotateZ(30deg); }
78% { -webkit-transform: rotateZ(-35deg); }
85% { -webkit-transform: rotateZ(0deg);}
95% { -webkit-transform: rotateZ(0deg);}
100% { -webkit-transform: rotateZ(105deg);}
}
#keyframes beakerShake {
0% { transform: rotateZ(0deg);}
5% { transform: rotateZ(20deg); }
15% { transform: rotateZ(-25deg); }
20% { transform: rotateZ(0deg);}
40% { transform: rotateZ(0deg);}
50% { transform: rotateZ(5deg); }
55% { transform: rotateZ(-10deg); }
58% { transform: rotateZ(15deg); }
60% { transform: rotateZ(0deg);}
65% { transform: rotateZ(0deg);}
72% { transform: rotateZ(30deg); }
78% { transform: rotateZ(-35deg); }
85% { transform: rotateZ(0deg);}
95% { transform: rotateZ(0deg);}
100% { transform: rotateZ(105deg);}
}
EDIT:
After trying one last thing, of course I found the culprit. I am drawing this particular svg's path, and then when it's done drawing, changing the animation play state to running. Here is my js :
setTimeout(function(){
svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running';
}, 4500);
Once i removed that functionality it all worked fine. I really need this the animation to fire after the svg is drawn (for obvious reasons). Any help would be awesome.

Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.
The solution was to add the class
.no-animation {
animation: none !important;
}
to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!

Skew effect dissapears when applying an animation

I have applied a transform: -webkit-transform: skewY(170deg) on an element.
Its working fine.
Afterwards, i add to the skewed element a class that animates a scaleOut.
This is the animation:
.partialScaleOutAnimation{
-webkit-animation: partialScaleOut 0.5s;
}
#-webkit-keyframes partialScaleOut {
0%{
-webkit-transform: scale(1);
}
100%{
-webkit-transform: scale(0.3);
}
}
for some reason when applying the animation, the skewed effect disappears. Why?

Categories