some more silly hover animations | libVencore | Page 1

thorny folio Jan 20, 2024, 6:32 AM

#

thank you my guy

gritty sphinx Jan 20, 2024, 6:52 AM

#

speeen

rich ruin Jan 20, 2024, 7:07 AM

#

oooo

#

I should ping myself here and leave it unread so I remember to throw it in tomorrow

#

@rich ruin

tame frigate Jan 20, 2024, 8:35 AM

#

you're fun, keep it up

wanton sonnet Jan 20, 2024, 10:40 AM

#

can i have theme link?

ember rivet Jan 20, 2024, 1:59 PM

#

add these to the midnight source my goat

iron fractal Jan 20, 2024, 1:59 PM

#

wanton sonnet can i have theme link?

its midnight

visual sun Jan 20, 2024, 2:01 PM

#

Holy peak

quaint abyss Jan 20, 2024, 8:35 PM

#

ember rivet add these to the midnight source my goat

done thumbsup

ember rivet Jan 20, 2024, 8:35 PM

#

quaint abyss done<:thumbsup:1109900336912662538>

goat thumbsup

noble hazel Jan 21, 2024, 4:04 AM

#

Please don't unscrew the chatbox.

rich ruin Jan 21, 2024, 5:14 AM

#

oh you can make them spin so so much

quaint abyss Jan 21, 2024, 5:30 AM

#

rich ruin oh you can make them spin so so much

i actually wanted it to spin less (180 deg ) at first, but only spinning halfway looks weird on the emoji button

rich ruin Jan 21, 2024, 5:37 AM

#

oh no I meant turning it from 360 to like 36000

#

it looked so silly

quaint abyss Jan 21, 2024, 5:54 AM

#

now change the time to 3600s

shy lily Jan 21, 2024, 10:45 AM

#

btw, if the settings button has a slight offset, change it to this:
.button__4f306[aria-label="User Settings"] > div

iron fractal Jan 21, 2024, 7:20 PM

#

do you have to enter the language in which you have it?
or wait... i'll do something
i found, you can also use .button__4f306:nth-child(3) but idk if its work for you 🤷‍♂️

quaint abyss Jan 21, 2024, 8:12 PM

#

iron fractal do you have to enter the language in which you have it? or wait... i'll do somet...

this doesn't work for people who have the game activity plugin

#

you would have to make it nth-child(4)

gritty sphinx Jan 21, 2024, 8:15 PM

#

:last-child exists

#

or .container_ca50b9:has([aria-label$="Game Activity"]) .button__4f306:nth-child(4), .container_ca50b9:not(:has([aria-label$="Game Activity"])) .button__4f306:nth-child(3) trolley

iron fractal Jan 21, 2024, 8:16 PM

#

WHAT

quaint abyss Jan 21, 2024, 8:17 PM

#

oh yeah forgot about that

gritty sphinx Jan 21, 2024, 8:18 PM

#

shy lily btw, if the settings button has a slight offset, change it to this: `.button__4f...

> div horror

rich ruin Jan 22, 2024, 2:22 AM

#

WAIT SINCE WHEN DID MY EMOTES SPIN

iron fractal Jan 22, 2024, 2:57 AM

#

its the code

shy lily Jan 22, 2024, 3:18 AM

#

gritty sphinx `> div` horror

https://cdn.discordapp.com/emojis/1135083669300727808.webp?size=48

rich ruin Jan 22, 2024, 4:47 AM

#

iron fractal its the code

did not notice

#

if only i could just have them always slowly spinning

#

well im sure i could

#

but i do not knowhow i would do that

quaint abyss Jan 22, 2024, 4:52 AM

#

rich ruin if only i could just have them always slowly spinning

if u mean the emoji button

.emojiButton__30ec7 .contents_fb6220 {
    animation: spin 2s infinite linear;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}```

rich ruin Jan 22, 2024, 4:54 AM

#

hell yea ty

#

oh it looks so silly on 0.01 or 0.1 secs instead of 2

ancient ice Feb 5, 2024, 12:07 AM

#

Any idea how to fix this, where the whole background moves and not just the actual icon itself Hmm https://i.imgur.com/6NbfEHv.gif

Imgur

quaint abyss Feb 5, 2024, 12:15 AM

#

ancient ice Any idea how to fix this, where the whole background moves and not just the actu...

check the snippet, you need the first part to make the background of the icon round

#

otherwise it'll look like that

ancient ice Feb 5, 2024, 12:17 AM

#

so this is what I have

//Settings

button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button__4f306:last-child /* settings button */, 
.attachButton_b1db83 .attachButtonInner__3ce2b /* upload button */,
.emojiButton__30ec7 .contents_fb6220 /* emoji button */,
.closeButton__34341 /* settings exit button */ {
    transition: transform 1s ease;
}
.button__4f306:last-child:hover,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover {
    transform: rotate(360deg);
}```

Would I need to change the _b1db83 to the background color? @quaint abyss

#

on likne 7

#

sorry the one on like 6

quaint abyss Feb 5, 2024, 12:21 AM

#

ancient ice so this is what I have ```css //Settings button.button__4f306 /* make user pan...

try this updated version

/* spin hover animations */
button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button__4f306:last-child .contents_fb6220 /* settings button */, 
.attachButton_b1db83 .attachButtonInner__3ce2b /* upload button */,
.emojiButton__30ec7 .contents_fb6220 /* emoji button */,
.closeButton__34341 /* settings exit button */,
.contents_fb6220 > .closeIcon__5bab9 /* modal close */ {
    transition: transform var(--icon-spin-transition);
}
.button__4f306:last-child:hover .contents_fb6220,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover,
.contents_fb6220:hover > .closeIcon__5bab9 {
    transform: rotate(360deg);
}```

ancient ice Feb 5, 2024, 12:22 AM

#

quaint abyss try this updated version ```css /* spin hover animations */ button.button__4f306...

no more hover rotate sad

quaint abyss Feb 5, 2024, 12:26 AM

#

ancient ice no more hover rotate <a:sad:823076840557117451>

?

#

just doesnt work at all?

ancient ice Feb 5, 2024, 12:27 AM

#

yeah lol just doesn't work

#

adding that code also however changed the rotate of the icon background to a circle

quaint abyss Feb 5, 2024, 12:49 AM

#

strange

#

do you have any other themes?

#

oh shit i forgot there was a variable in there

#

/* spin hover animations */
button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button__4f306:last-child .contents_fb6220 /* settings button */, 
.attachButton_b1db83 .attachButtonInner__3ce2b /* upload button */,
.emojiButton__30ec7 .contents_fb6220 /* emoji button */,
.closeButton__34341 /* settings exit button */,
.contents_fb6220 > .closeIcon__5bab9 /* modal close */ {
    transition: transform 1s ease;
}
.button__4f306:last-child:hover .contents_fb6220,
.attachButton_b1db83:hover .attachButtonInner__3ce2b,
.emojiButton__30ec7:hover .contents_fb6220,
.closeButton__34341:hover,
.contents_fb6220:hover > .closeIcon__5bab9 {
    transform: rotate(360deg);
}```

#

if you dont like the round button background then remove this part, it should still work the same

button.button__4f306 /* make user panel buttons round */ {
    border-radius: 50%;
}

native quest Mar 24, 2024, 12:10 PM

#

does this still work as intended? for me the emoji icon is.. different and keeps going invisible ._.

quaint abyss Mar 24, 2024, 5:15 PM

#

native quest does this still work as intended? for me the emoji icon is.. different and keeps...

works for me

native quest Mar 24, 2024, 5:17 PM

#

hmm.. wierd..
its a square thing when not hovering, turns to a smiley that rotates(as intended) when hovering and then it just.. goes invisible ._.
https://host.moonmoon.tech/u/NXH8XW.png
https://host.moonmoon.tech/u/3yLNAK.png
https://host.moonmoon.tech/u/3FhItH.png

NXH8XW.png

3yLNAK.png

3FhItH.png

quaint abyss Mar 24, 2024, 5:22 PM

#

what themes or other css are you running

#

try without anything but the snippet

native quest Mar 24, 2024, 5:53 PM

#

ah shit.. it worked fine earlier.. but it seems its my main theme.. which is "zelk"
i think i managed to fix the issues it had as it wasn't being updated..

quaint abyss Mar 24, 2024, 5:58 PM

#

you should use midnight :)

#

but yeah zelk is kinda dead

#

which is unfortunate because it was one of the only good themes

native quest Mar 24, 2024, 6:00 PM

#

yeah.. i have the zelk theme for my spotify aswell 😅

i'll look at midnight 🤔 (i just realized it's your theme sus kek )

i've tried, as much as i could, to "fix" the issues with zelk :x

quaint abyss Mar 24, 2024, 6:01 PM

#

you could probably set up zelk's colors in midnight

native quest Mar 24, 2024, 6:02 PM

#

yeah.. the main issue i have is how darkened everything is.. but i'll look into it and customize to my preference 🙂

rich ruin Mar 27, 2024, 9:53 PM

#

oh dear yeah it brokey

quaint abyss Mar 28, 2024, 1:47 AM

#

rich ruin oh dear yeah it brokey

canary got a class update, still works on stable for me

rich ruin Mar 28, 2024, 2:00 AM

#

quaint abyss canary got a class update, still works on stable for me

Wah

quaint abyss Mar 28, 2024, 2:55 AM

#

i doubt they'll push this one to stable

thorny folio Mar 28, 2024, 3:45 PM

#

Updated code from #🎨-css-snippets message since the button labels were changed.```button.button_ae40a4 /* make user panel buttons round / {
border-radius: 50%;
}
.button_ae40a4:last-child / settings button /,
.attachButton__56f98 .attachButtonInner__84c26 / upload button /,
.emojiButtonNormal__5f64f / emoji button /,
.closeButton__8177f / settings exit button */ {
transition: transform 1s ease;
}

.button_ae40a4:last-child:hover,
.attachButton__56f98:hover .attachButtonInner__84c26,
.emojiButtonNormal__5f64f:hover .spriteContainer__732c7,
.closeButton__8177f:hover {
transform: rotate(360deg);
}

#

Credits to: @quaint abyss

#

If anyone also had this problem, please update your codes.

rich ruin Mar 28, 2024, 10:09 PM

#

emoji still broken for me but its not a big deal

meager arrow Apr 2, 2024, 3:45 AM

#

/*
  Settings and Upload Button Spin
*/
button.button_ae40a4 /* make user panel buttons round */ {
    border-radius: 50%;
}
.button_ae40a4:last-child /* settings button */, 
.attachButton__56f98 .attachButtonInner__84c26 /* upload button */,
.emojiButton_b63c38 .contents__322f4 /* emoji button */,
.closeButton__8177f /* settings exit button */ {
    transition: transform 1s ease;
}
.button_ae40a4:last-child:hover,
.attachButton__56f98:hover .attachButtonInner__84c26,
.emojiButton_b63c38:hover .contents__322f4,
.closeButton__8177f:hover {
    transform: rotate(360deg);
}

this version should be fully functional

quaint abyss Apr 2, 2024, 3:52 AM

#

maybe you should remove it from the settings button because discord has an animation on it by default now

#

so it just spins extra fast

candid echo Apr 2, 2024, 12:35 PM

#

quaint abyss so it just spins extra fast

i have to remove it but

#

which is the settings button lol

#some more silly hover animations