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
Related
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?
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
I'm looking for a way to animate a plane flying from off-page onto the page. At the moment, I'm using the code below, which is very clunky and not smooth. Do you know a better way to do this using CSS and HTML? If not, using another method?
.plane-animation{
animation: animationFrames linear 3s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 3s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 3s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 3s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 2s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
10% {
transform: translate(90%,-30px) rotate(5deg) ;
}
20% {
transform: translate(80%,-40px) rotate(15deg) ;
}
30% {
transform: translate(70%,-50px) rotate(10deg) ;
}
40% {
transform: translate(60%,-60px) rotate(5deg) ;
}
50% {
transform: translate(50%,-70px) rotate(0deg) ;
}
60% {
transform: translate(40%,-60px) rotate(-5deg) ;
}
70% {
transform: translate(30%,-50px) rotate(-10deg) ;
}
80% {
transform: translate(20%,-40px) rotate(-15deg) ;
}
90% {
transform: translate(10%,-30px) rotate(-10deg) ;
}
100% {
transform: translate(0%,0px) rotate(0deg) ;
}
}
<img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" />
It seems like you're on the right track, and CSS animations should be perfect for the task you're solving. A few quick pointers:
You've made prefixed animation calls like -webkit-, -moz-, -o- and -ms-. However, you've not made any prefixed keyframes. This makes the first part wasted. If you want full browser compatibility you also need prefixed keyframes and prefixed transforms.
Like this:
#keyframes animationFrames{
0% {
transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
transform: translate(100%,-20px) rotate(0deg) ;
}
}
#-webkit-keyframes animationFrames{
0% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(100%,-20px) rotate(0deg) ;
}
}
....
and so on.
The other part is more esthetic, but I suggest trying to work on one property at a time. Try drawing your animation in lines on a piece of paper first, figure out the axis and vectors that it's moving on and code one at a time. I'm afraid no-one on here can give you a finished piece of code, but with enough practice, I'm sure you will get the hang of 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!
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?