👀 Sneak Peek: Random Name Picker with Animation!

…template and tutorial coming soon :slight_smile:

13 Likes

Wizardry :+1:

Gorgeous.

Explanation:

<pre><span><style>
[data-test="app-image-carousel"] :nth-child(1)
 {
position: fixed;
top:22%;
z-index: 1;
-moz-animation: cssAnimation 0s ease-in 2s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 2s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 2s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 2s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
7 Likes

Template now available!

3 Likes

Kids are gonna love this !

1 Like

It seems that Glide changed the name of its classes, because a couple of days ago it worked and now it doesn’t

I’ll take a look and update the code tonight.

1 Like

Edited the code above. It’s not perfect…gotta play with the top% a bit. I also added a separator above the image:

2 Likes