Skip to content

My suggestions... #1846

Description

@FirstByteFirst

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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions