Skip to content

Upvote Animation for reddit by dantelin2009

Screenshot of Upvote Animation for reddit
Write a review Install Get Stylus

Details

Authordantelin2009

LicenseCreative Commons Attribution Share Alike 4.0 International

Categoryreddit.com

Created

Updated

Size2.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds a fun upvote animation to reddit

Notes

Adds a fun upvote animation to reddit. Inspired by Twitter's and YouTube's like animations. Thought reddit could do with something similar.

v1.0

  • Initial release
  • Still a few small bugs to be patched out, but is mostly good for public use.
  • Feel free to report any bugs to my Discord (heladeradragon)

Source code

/* ==UserStyle==
@name         Upvote Animation for reddit
@version      20230723.01.45
@namespace    userstyles.world/user/dantelin2009
@description  Adds a fun upvote animation to reddit
@author       dantelin2009
@license      Creative Commons Attribution Share Alike 4.0 International
==/UserStyle== */

@-moz-document domain("reddit.com") {
.icon-upvote_fill::before {
    animation: upvotenew 0.6s linear;
    text-align: center;
    position: absolute;
    display: block;
    left: -10px;
    transform-origin: center bottom;
    bottom: -21px;
}

@keyframes upvotenew {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    15% {
        transform: scale(0.7, 1.9);
    }
    20% {
        bottom: -10px;
        transform: scale(0.6, 1.9);
    }
    40% {
        transform: scale(0.7, 1.9);
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

@keyframes upvote {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    15% {
        transform: scale(0.6, 2);
    }
    20% {
        bottom: -10px;
        transform: scale(0.5, 2);
    }
    40% {
        transform: scale(0.6, 2);
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

.icon-downvote_fill::before {
    animation: downvote 0.7s ease-in-out;
    text-align: center;
    position: absolute;
    display: block;
    left: -10px;
    transform-origin: center bottom;
    bottom: -21px;
}

@keyframes downvote {
    0% {
        bottom: -21px;
        transform: scale(1, 1);
    }
    20%{
        transform: scale(0.6, 2);
    }
    30% {
        bottom: -69px;
    }
    30.001% {
        bottom: 27px;
    }
    60% {
        bottom: -21px;
        transform: scale(1.2, 0.4);
    }
    80% {
        transform: scale(1, 0.8);
    }
    100% {
        bottom: -21px;
        transform: scale(1, 1);
    }
}

.voteButton,
._3SUsITjKNQ7Tp0Wi2jGxIM.qW0l8Af61EP35WIG6vnGk,
._1RYN-7H8gYctjOQeL8p2Q7 {
    overflow: visible;
}
}

Reviews

No reviews yet.