Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My suggestions... #1846

Open
FirstByteFirst opened this issue Jan 27, 2025 · 0 comments
Open

My suggestions... #1846

FirstByteFirst opened this issue Jan 27, 2025 · 0 comments

Comments

@FirstByteFirst
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant