You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm not sure this project is still active but lately I did a deep dive into this project. Here are some of my suggestions:
Many "Out"-animations are actually reversed "In"-animations. This could drasticly lower the number of animations needed.
To my opinion the "webkit"-versions are something of the past.
I see things like (for example): @Keyframes fadeInLeftBig {
from {opacity: 0;transform: translate3d(-2000px, 0, 0);}
to {opacity: 1;transform: translate3d(0, 0, 0);}
}
I see what you are trying to accomplish with those -2000px, but it actually works so that in aprox. the first half of the animation nothing happens (depending on the position of the element to animate and viewport width). The actual sortcoming is in CSS itself (I requested a solution for this). In the meanwhile it could be wise to use vw en vh units. This does not solve the problem but makes the problem independent of the screen size.
As a library of animations you should be complete. For example, in the rotations I miss some clockwise and counter clockwise variants.
The slide animations also changes visibility. I took these out because it makes it impossible to run the animation more then once.
I made a simple but effective editor to tryout all animations. If interrested i could share this code. For this I need an email adress...
I'm not sure this project is still active but lately I did a deep dive into this project. Here are some of my suggestions:
Many "Out"-animations are actually reversed "In"-animations. This could drasticly lower the number of animations needed.
To my opinion the "webkit"-versions are something of the past.
I see things like (for example):
@Keyframes fadeInLeftBig {
from {opacity: 0;transform: translate3d(-2000px, 0, 0);}
to {opacity: 1;transform: translate3d(0, 0, 0);}
}
I see what you are trying to accomplish with those -2000px, but it actually works so that in aprox. the first half of the animation nothing happens (depending on the position of the element to animate and viewport width). The actual sortcoming is in CSS itself (I requested a solution for this). In the meanwhile it could be wise to use vw en vh units. This does not solve the problem but makes the problem independent of the screen size.
As a library of animations you should be complete. For example, in the rotations I miss some clockwise and counter clockwise variants.
The slide animations also changes visibility. I took these out because it makes it impossible to run the animation more then once.
I made a simple but effective editor to tryout all animations. If interrested i could share this code. For this I need an email adress...
I made some 3D animations:
@Keyframes doorInLeft{
0% {transform: perspective(400px) rotate3d(0,1,0,90deg);}
100% {transform: perspective(400px) rotate3d(0,1,0,0deg);}
}
@Keyframes doorInRight{
0% {transform: perspective(400px) rotate3d(0,1,0,-90deg);}
100% {transform: perspective(400px) rotate3d(0,1,0,0deg);}
}
@Keyframes doorInDown{
0% {transform: perspective(400px) rotate3d(1,0,0,90deg);}
100% {transform: perspective(400px) rotate3d(1,0,0,0deg);}
}
@Keyframes doorInUp{
0% {transform: perspective(400px) rotate3d(1,0,0,-90deg);}
100% {transform: perspective(400px) rotate3d(1,0,0,0deg);}
}
@Keyframes doorXYInUp{
0% {transform: perspective(400px) rotate3d(1,1,0,-90deg);}
100% {transform: perspective(400px) rotate3d(1,1,0,0deg);}
}
@Keyframes doorXYInDown{
0% {transform: perspective(400px) rotate3d(1,1,0,90deg);}
100% {transform: perspective(400px) rotate3d(1,1,0,0deg);}
}
@Keyframes doorXYZInV{
0% {transform: perspective(400px) rotate3d(1,1,1,120deg);}
100% {transform: perspective(400px) rotate3d(1,1,1,0deg);}
}
@Keyframes doorXYZInH{
0% {transform: perspective(400px) rotate3d(1,1,1,-120deg);}
100% {transform: perspective(400px) rotate3d(1,1,1,0deg);}
}
the "out"-variations are just reversed versions. Depending on your origin setting this leads to different animations...
Actually it is a nice set of animations. My complements!
The text was updated successfully, but these errors were encountered: