Skip to content

Commit 615afe9

Browse files
committed
feat: add 'blink', 'pulsate' and 'scale' animations
1 parent c214de8 commit 615afe9

File tree

5 files changed

+57
-11
lines changed

5 files changed

+57
-11
lines changed

js-css-animations/animate.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,8 @@ const updateCssProperties = (element, opts) => {
122122
angle: 'deg',
123123
blur: 'px',
124124
iteration: '',
125+
initialScale: '',
126+
finalScale: '',
125127
};
126128

127129
opts[prop] = `${opts[prop]}` + unit[prop];
@@ -200,7 +202,7 @@ const isMotion = animType => animType === 'motion';
200202
*/
201203
const removeMotionCssClass = element => {
202204
const className = [...element.classList].find(cl =>
203-
cl.match(/js\-anim\-\-rotate/)
205+
cl.match(/js\-anim\-\-(rotate|scale)/)
204206
);
205207
if (className) element.classList.remove(className);
206208
};

js-css-animations/globals.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const MOTION_ANIMS_ID = Object.freeze({
4141
rotateLeftCCW: 7,
4242
rotate: 8,
4343
rotationLoop: 9,
44+
scale: 10,
4445
});
4546

4647
/**
@@ -61,6 +62,8 @@ export const PROPERTY_NAMES = Object.freeze({
6162
iteration: '--js-css-animation--iteration',
6263
direction: '--js-css-animation--direction',
6364
transfOrigin: '--js-css-animation--transf-origin',
65+
initialScale: '--js-css-animation--initial-scale',
66+
finalScale: '--js-css-animation--final-scale',
6467
});
6568

6669
/**
@@ -119,6 +122,7 @@ export const CLASS_NAMES = Object.freeze({
119122
'js-anim--rotate-left__ccw',
120123
'js-anim--rotate',
121124
'js-anim--rotation-loop',
125+
'js-anim--scale',
122126
],
123127
moveBack: [
124128
'js-anim--rotate-up',
@@ -131,6 +135,7 @@ export const CLASS_NAMES = Object.freeze({
131135
'js-anim--rotate-up',
132136
'js-anim--rotate-up',
133137
'js-anim--rotate-up',
138+
'js-anim--scale__back',
134139
],
135140
});
136141

js-css-animations/js-animations.css

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,24 @@
139139
}
140140
}
141141

142+
@keyframes js-anim--scale {
143+
from {
144+
transform: scale(var(--js-css-animation--initial-scale));
145+
}
146+
to {
147+
transform: scale(var(--js-css-animation--final-scale));
148+
}
149+
}
150+
151+
@keyframes js-anim--scale__back {
152+
from {
153+
transform: scale(var(--js-css-animation--final-scale));
154+
}
155+
to {
156+
transform: scale(var(--js-css-animation--initial-scale));
157+
}
158+
}
159+
142160
:root {
143161
--js-css-animation--duration: 800ms;
144162
--js-css-animation--timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
@@ -178,7 +196,9 @@
178196
.js-anim--slide-right__back,
179197
.js-anim--fade-in,
180198
.js-anim--fade-out,
181-
.js-anim--rotation-loop {
199+
.js-anim--rotation-loop,
200+
.js-anim--scale,
201+
.js-anim--scale__back {
182202
animation-duration: var(--js-css-animation--duration);
183203
animation-timing-function: var(--js-css-animation--timing-function);
184204
animation-delay: var(--js-css-animation--delay);
@@ -256,6 +276,22 @@
256276
animation-name: js-anim--rotation-loop;
257277
}
258278

279+
.js-anim--scale,
280+
.js-anim--scale__back {
281+
--js-css-animation--transf-origin: 'center';
282+
--js-css-animation--initial-scale: 1;
283+
--js-css-animation--final-scale: 1;
284+
transform-origin: var(--js-css-animation--transf-origin);
285+
}
286+
287+
.js-anim--scale {
288+
animation-name: js-anim--scale;
289+
}
290+
291+
.js-anim--scale__back {
292+
animation-name: js-anim--scale__back;
293+
}
294+
259295
.js-anim--fade-out {
260296
animation-name: js-anim--fade-out;
261297
}

js-css-animations/js-css-animations.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -298,11 +298,12 @@ const jsCssAnimations = (function () {
298298
...opts,
299299
});
300300
},
301-
pulse: (target, opts = {}) => {
302-
jsCssAnimations.show.collapse(target, {
301+
pulsate: (target, opts = {}) => {
302+
jsCssAnimations.scale(target, {
303+
finalScale: '1.5',
303304
duration: '1s',
304305
iteration: 'infinite',
305-
direction: 'alternate',
306+
direction: 'reverse',
306307
...opts,
307308
});
308309
},

main.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,14 @@ jsCssAnimations.init.rotate({
112112
},
113113
});
114114

115-
jsCssAnimations.pulse('#anchor img', {
116-
transfOrigin: 'bottom',
115+
jsCssAnimations.pulsate('#anchor2 img', {
116+
finalScale: 1.2,
117117
});
118118

119-
jsCssAnimations.rotationLoop('#anchor2 img', {
120-
angle: 180,
121-
duration: '1s',
122-
transfOrigin: 'bottom right',
119+
jsCssAnimations.init.scale({
120+
trigger: '#anchor2 img',
121+
targetSelector: '.p2',
122+
finalScale: 1.2,
123+
duration: '1.5s',
124+
initialScale: 1,
123125
});

0 commit comments

Comments
 (0)