Skip to content

Instantly share code, notes, and snippets.

@pierreburel

pierreburel/input.scss

Created February 17, 2023 03:28
Show Gist options
  • Save pierreburel/35bbd3f8245f93b73bd74ea9ba68efc1 to your computer and use it in GitHub Desktop.
Save pierreburel/35bbd3f8245f93b73bd74ea9ba68efc1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:string";
$mass: 1 !default;
$stiffness: 100 !default;
$damping: 15 !default;
@function spring($t, $mass: $mass, $stiffness: $stiffness, $damping: $damping) {
$w0: math.sqrt($stiffness / $mass);
$zeta: $damping / (2 * math.sqrt($stiffness * $mass));
$wd: if($zeta < 1, $w0 * math.sqrt(1 - $zeta * $zeta), 0);
$a: 1;
$b: if($zeta < 1, $zeta * $w0 / $wd, $w0);
@if $zeta < 1 {
@return 1 - math.pow(math.$e, -$t * $zeta * $w0) * ($a * math.cos($wd * $t) + $b * math.sin($wd * $t));
}
@return 1 - ($a + $b * $t) * math.exp(-$t * $w0);
}
@function lerp($from, $to, $t) {
@return $from * (1 - $t) + $to * $t;
}
@function precision($float, $digits: 1) {
$pow: math.pow(10, $digits);
@return round($float * $pow) / $pow;
}
$transforms: ('translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective');
@mixin keyframes($name, $properties, $steps: 100, $args...) {
@keyframes #{$name} {
@for $i from 0 through $steps {
#{($i * 100 / $steps + '%')} {
$transform: '';
@each $property, $values in $properties {
$from: list.nth($values, 1);
$to: list.nth($values, 2);
$value: if($i == 0, $from, if($i == $steps, $to, precision(lerp($from, $to, spring($i / $steps, $args...)))));
@if list.index($transforms, $property) {
$transform: "#{$transform} #{$property}(#{$value})";
} @else {
#{$property}: $value;
}
}
transform: string.slice(string.unquote($transform), 2, -1);
}
}
}
}
$properties: (
opacity: (0, 1),
translateX: (0%, 100%),
rotate: (0deg, 1turn),
scale: (1, 1.5),
);
@include keyframes(test1, $properties);
@include keyframes(test2, $properties, $steps: 10);
div {
background: red;
width: 100px;
height: 100px;
animation-timing-function: linear;
animation-duration: 1s;
animation-fill-mode: both;
:hover &:first-child {
animation-name: test1;
}
:hover &:last-child {
animation-name: test2;
}
}
Raw
markup.html
<div></div>
<div></div>
Raw
output.css
@keyframes test1 {
0% {
opacity: 0;
transform: translateX(0%) rotate(0deg) scale(1);
}
1% {
opacity: 0;
transform: translateX(0.5%) rotate(1.7deg) scale(1);
}
2% {
opacity: 0;
transform: translateX(1.8%) rotate(6.5deg) scale(1);
}
3% {
opacity: 0;
transform: translateX(3.9%) rotate(13.9deg) scale(1);
}
4% {
opacity: 0.1;
transform: translateX(6.5%) rotate(23.5deg) scale(1);
}
5% {
opacity: 0.1;
transform: translateX(9.7%) rotate(34.9deg) scale(1);
}
6% {
opacity: 0.1;
transform: translateX(13.2%) rotate(47.7deg) scale(1.1);
}
7% {
opacity: 0.2;
transform: translateX(17.1%) rotate(61.6deg) scale(1.1);
}
8% {
opacity: 0.2;
transform: translateX(21.2%) rotate(76.4deg) scale(1.1);
}
9% {
opacity: 0.3;
transform: translateX(25.5%) rotate(91.7deg) scale(1.1);
}
10% {
opacity: 0.3;
transform: translateX(29.8%) rotate(107.4deg) scale(1.1);
}
11% {
opacity: 0.3;
transform: translateX(34.2%) rotate(123.2deg) scale(1.2);
}
12% {
opacity: 0.4;
transform: translateX(38.6%) rotate(139deg) scale(1.2);
}
13% {
opacity: 0.4;
transform: translateX(43%) rotate(154.7deg) scale(1.2);
}
14% {
opacity: 0.5;
transform: translateX(47.3%) rotate(170.1deg) scale(1.2);
}
15% {
opacity: 0.5;
transform: translateX(51.4%) rotate(185.1deg) scale(1.3);
}
16% {
opacity: 0.6;
transform: translateX(55.5%) rotate(199.7deg) scale(1.3);
}
17% {
opacity: 0.6;
transform: translateX(59.4%) rotate(213.7deg) scale(1.3);
}
18% {
opacity: 0.6;
transform: translateX(63.1%) rotate(227.1deg) scale(1.3);
}
19% {
opacity: 0.7;
transform: translateX(66.6%) rotate(239.9deg) scale(1.3);
}
20% {
opacity: 0.7;
transform: translateX(70%) rotate(252deg) scale(1.3);
}
21% {
opacity: 0.7;
transform: translateX(73.2%) rotate(263.4deg) scale(1.4);
}
22% {
opacity: 0.8;
transform: translateX(76.2%) rotate(274.2deg) scale(1.4);
}
23% {
opacity: 0.8;
transform: translateX(78.9%) rotate(284.2deg) scale(1.4);
}
24% {
opacity: 0.8;
transform: translateX(81.5%) rotate(293.5deg) scale(1.4);
}
25% {
opacity: 0.8;
transform: translateX(83.9%) rotate(302.2deg) scale(1.4);
}
26% {
opacity: 0.9;
transform: translateX(86.2%) rotate(310.2deg) scale(1.4);
}
27% {
opacity: 0.9;
transform: translateX(88.2%) rotate(317.5deg) scale(1.4);
}
28% {
opacity: 0.9;
transform: translateX(90.1%) rotate(324.2deg) scale(1.5);
}
29% {
opacity: 0.9;
transform: translateX(91.8%) rotate(330.3deg) scale(1.5);
}
30% {
opacity: 0.9;
transform: translateX(93.3%) rotate(335.8deg) scale(1.5);
}
31% {
opacity: 0.9;
transform: translateX(94.7%) rotate(340.8deg) scale(1.5);
}
32% {
opacity: 1;
transform: translateX(95.9%) rotate(345.3deg) scale(1.5);
}
33% {
opacity: 1;
transform: translateX(97%) rotate(349.3deg) scale(1.5);
}
34% {
opacity: 1;
transform: translateX(98%) rotate(352.8deg) scale(1.5);
}
35% {
opacity: 1;
transform: translateX(98.9%) rotate(355.9deg) scale(1.5);
}
36% {
opacity: 1;
transform: translateX(99.6%) rotate(358.6deg) scale(1.5);
}
37% {
opacity: 1;
transform: translateX(100.3%) rotate(361deg) scale(1.5);
}
38% {
opacity: 1;
transform: translateX(100.8%) rotate(363deg) scale(1.5);
}
39% {
opacity: 1;
transform: translateX(101.3%) rotate(364.7deg) scale(1.5);
}
40% {
opacity: 1;
transform: translateX(101.7%) rotate(366.1deg) scale(1.5);
}
41% {
opacity: 1;
transform: translateX(102%) rotate(367.3deg) scale(1.5);
}
42% {
opacity: 1;
transform: translateX(102.3%) rotate(368.2deg) scale(1.5);
}
43% {
opacity: 1;
transform: translateX(102.5%) rotate(368.9deg) scale(1.5);
}
44% {
opacity: 1;
transform: translateX(102.6%) rotate(369.5deg) scale(1.5);
}
45% {
opacity: 1;
transform: translateX(102.7%) rotate(369.9deg) scale(1.5);
}
46% {
opacity: 1;
transform: translateX(102.8%) rotate(370.1deg) scale(1.5);
}
47% {
opacity: 1;
transform: translateX(102.8%) rotate(370.2deg) scale(1.5);
}
48% {
opacity: 1;
transform: translateX(102.8%) rotate(370.2deg) scale(1.5);
}
49% {
opacity: 1;
transform: translateX(102.8%) rotate(370.1deg) scale(1.5);
}
50% {
opacity: 1;
transform: translateX(102.8%) rotate(369.9deg) scale(1.5);
}
51% {
opacity: 1;
transform: translateX(102.7%) rotate(369.7deg) scale(1.5);
}
52% {
opacity: 1;
transform: translateX(102.6%) rotate(369.4deg) scale(1.5);
}
53% {
opacity: 1;
transform: translateX(102.5%) rotate(369deg) scale(1.5);
}
54% {
opacity: 1;
transform: translateX(102.4%) rotate(368.7deg) scale(1.5);
}
55% {
opacity: 1;
transform: translateX(102.3%) rotate(368.3deg) scale(1.5);
}
56% {
opacity: 1;
transform: translateX(102.2%) rotate(367.8deg) scale(1.5);
}
57% {
opacity: 1;
transform: translateX(102.1%) rotate(367.4deg) scale(1.5);
}
58% {
opacity: 1;
transform: translateX(101.9%) rotate(366.9deg) scale(1.5);
}
59% {
opacity: 1;
transform: translateX(101.8%) rotate(366.5deg) scale(1.5);
}
60% {
opacity: 1;
transform: translateX(101.7%) rotate(366deg) scale(1.5);
}
61% {
opacity: 1;
transform: translateX(101.6%) rotate(365.6deg) scale(1.5);
}
62% {
opacity: 1;
transform: translateX(101.4%) rotate(365.2deg) scale(1.5);
}
63% {
opacity: 1;
transform: translateX(101.3%) rotate(364.8deg) scale(1.5);
}
64% {
opacity: 1;
transform: translateX(101.2%) rotate(364.3deg) scale(1.5);
}
65% {
opacity: 1;
transform: translateX(101.1%) rotate(364deg) scale(1.5);
}
66% {
opacity: 1;
transform: translateX(101%) rotate(363.6deg) scale(1.5);
}
67% {
opacity: 1;
transform: translateX(100.9%) rotate(363.2deg) scale(1.5);
}
68% {
opacity: 1;
transform: translateX(100.8%) rotate(362.9deg) scale(1.5);
}
69% {
opacity: 1;
transform: translateX(100.7%) rotate(362.6deg) scale(1.5);
}
70% {
opacity: 1;
transform: translateX(100.6%) rotate(362.3deg) scale(1.5);
}
71% {
opacity: 1;
transform: translateX(100.6%) rotate(362deg) scale(1.5);
}
72% {
opacity: 1;
transform: translateX(100.5%) rotate(361.8deg) scale(1.5);
}
73% {
opacity: 1;
transform: translateX(100.4%) rotate(361.5deg) scale(1.5);
}
74% {
opacity: 1;
transform: translateX(100.4%) rotate(361.3deg) scale(1.5);
}
75% {
opacity: 1;
transform: translateX(100.3%) rotate(361.1deg) scale(1.5);
}
76% {
opacity: 1;
transform: translateX(100.3%) rotate(360.9deg) scale(1.5);
}
77% {
opacity: 1;
transform: translateX(100.2%) rotate(360.8deg) scale(1.5);
}
78% {
opacity: 1;
transform: translateX(100.2%) rotate(360.6deg) scale(1.5);
}
79% {
opacity: 1;
transform: translateX(100.1%) rotate(360.5deg) scale(1.5);
}
80% {
opacity: 1;
transform: translateX(100.1%) rotate(360.4deg) scale(1.5);
}
81% {
opacity: 1;
transform: translateX(100.1%) rotate(360.3deg) scale(1.5);
}
82% {
opacity: 1;
transform: translateX(100%) rotate(360.2deg) scale(1.5);
}
83% {
opacity: 1;
transform: translateX(100%) rotate(360.1deg) scale(1.5);
}
84% {
opacity: 1;
transform: translateX(100%) rotate(360deg) scale(1.5);
}
85% {
opacity: 1;
transform: translateX(100%) rotate(359.9deg) scale(1.5);
}
86% {
opacity: 1;
transform: translateX(100%) rotate(359.9deg) scale(1.5);
}
87% {
opacity: 1;
transform: translateX(100%) rotate(359.8deg) scale(1.5);
}
88% {
opacity: 1;
transform: translateX(99.9%) rotate(359.8deg) scale(1.5);
}
89% {
opacity: 1;
transform: translateX(99.9%) rotate(359.8deg) scale(1.5);
}
90% {
opacity: 1;
transform: translateX(99.9%) rotate(359.8deg) scale(1.5);
}
91% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
92% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
93% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
94% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
95% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
96% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
97% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
98% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
99% {
opacity: 1;
transform: translateX(99.9%) rotate(359.7deg) scale(1.5);
}
100% {
opacity: 1;
transform: translateX(100%) rotate(1turn) scale(1.5);
}
}
@keyframes test2 {
0% {
opacity: 0;
transform: translateX(0%) rotate(0deg) scale(1);
}
10% {
opacity: 0.3;
transform: translateX(29.8%) rotate(107.4deg) scale(1.1);
}
20% {
opacity: 0.7;
transform: translateX(70%) rotate(252deg) scale(1.3);
}
30% {
opacity: 0.9;
transform: translateX(93.3%) rotate(335.8deg) scale(1.5);
}
40% {
opacity: 1;
transform: translateX(101.7%) rotate(366.1deg) scale(1.5);
}
50% {
opacity: 1;
transform: translateX(102.8%) rotate(369.9deg) scale(1.5);
}
60% {
opacity: 1;
transform: translateX(101.7%) rotate(366deg) scale(1.5);
}
70% {
opacity: 1;
transform: translateX(100.6%) rotate(362.3deg) scale(1.5);
}
80% {
opacity: 1;
transform: translateX(100.1%) rotate(360.4deg) scale(1.5);
}
90% {
opacity: 1;
transform: translateX(99.9%) rotate(359.8deg) scale(1.5);
}
100% {
opacity: 1;
transform: translateX(100%) rotate(1turn) scale(1.5);
}
}
div {
background: red;
width: 100px;
height: 100px;
animation-timing-function: linear;
animation-duration: 1s;
animation-fill-mode: both;
}
:hover div:first-child {
animation-name: test1;
}
:hover div:last-child {
animation-name: test2;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment