mirrors/nyastodon
1
0
Fork 0
mirror of https://git.bsd.gay/fef/nyastodon.git synced 2025-01-23 08:34:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve animations

Browse source
This commit is contained in:
fef 2022-11-20 22:45:09 +00:00
parent e17b23f0b6
commit e4f17273a3
No known key found for this signature in database
GPG key ID: EC22E476DC2D3D84
2 changed files with 113 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
app/javascript/flavours/glitch/styles/homogay/animations.scss Normal file
View file

@ -0,0 +1,106 @@
// turn the timed line into a highly addictive dopamine slot machine
// fav button
.no-reduce-motion .icon-button.star-icon {
&.deactivate {
& > .fa-star {
animation: none;
}
}
&.activate {
& > .fa-star {
animation: spring-rotate-in .8s cubic-bezier(.2, 0, .4, 1);
}
}
}
@keyframes spring-rotate-in {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(-380deg);
}
85% {
transform: rotate(-355deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes spring-rotate-out {
0% {
transform: rotate(-360deg);
}
60% {
transform: rotate(20deg);
}
85% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
// bookmark button
.no-reduce-motion .icon-button {
& > .fa-bookmark {
transform: translateY(0);
animation: none;
}
&.active > .fa-bookmark {
animation: bookmark-save .6s cubic-bezier(.2, 0, .4, 1);
}
}
@keyframes bookmark-save {
0% {
transform: translateY(0);
}
40% {
transform: translateY(-3px);
}
60% {
transform: translateY(4px);
}
100% {
transform: translateY(0);
}
}
// collapse button at the top right of all posts
.no-reduce-motion .status__collapse-button {
&.activate > .fa-angle-double-up {
animation: spring-flip-in .5s cubic-bezier(.2, 0, .4, 1);
}
&.deactivate > .fa-angle-double-up {
animation: spring-flip-out .5s cubic-bezier(.2, 0, .4, 1);
}
}
@keyframes spring-flip-in {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(-190deg);
}
85% {
transform: rotate(-175deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes spring-flip-out {
0% {
transform: rotate(-180deg);
}
60% {
transform: rotate(10deg);
}
85% {
transform: rotate(-5deg)
}
100% {
transform: rotate(0deg);
}
}

10
app/javascript/flavours/glitch/styles/homogay/diff.scss
View file

@ -146,8 +146,12 @@
border-bottom-right-radius: $border-radius;
}
// no separators between posts
// timed line
.status {
border-bottom: 0;
margin-bottom: 10px;
border-bottom: 0; // no separators between posts
}
.media-gallery__item.letterbox {
background: none; // remove the black background from letterbox images
}
@import 'animations';