{"pageProps":{"components":[{"technologies":[{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fae80098c82a810431ab082","name":"Rotate","markup":{"css":"@keyframes rotate {\n  0% {\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate($spin-degreesdeg);\n    transform: rotate($spin-degreesdeg);\n  }\n}","variables":{"spin-degrees":{"name":"Spin Degrees","default":"360"}}},"slug":"rotate","description":"Basic rotating animation","class":"rotate","published_at":"2020-11-13T12:46:01.563Z","createdAt":"2020-11-13T12:46:01.568Z","updatedAt":"2020-11-30T22:00:34.373Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"animaion_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"}},"animation_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264b0","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.633Z","createdAt":"2020-12-20T23:18:28.634Z","updatedAt":"2020-12-20T23:18:28.637Z","__v":0,"component":"5fae80098c82a810431ab082","id":"5fdfdbc409c1ea49ce2264b0"},{"_id":"5fe12f91e8119b3251de3df3","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.775Z","createdAt":"2020-12-21T23:28:17.778Z","updatedAt":"2020-12-21T23:28:17.794Z","__v":0,"component":"5fae80098c82a810431ab082","id":"5fe12f91e8119b3251de3df3"}],"id":"5fae80098c82a810431ab082"},{"technologies":[{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5faec47b8c82a810431ab084","name":"Boogie Box","markup":{"css":"$color-inner-background: $color-inner-background;\n$color-outer-background: $color-outer-background;\n$inner-box-distance: $inner-box-distance;\n$outer-box-distance: $outer-box-distance;\n$transition-speed: $transition-speed;\n\n@keyframes boogie-box {\n  0% {\n    background:$color-inner-background;\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n  12.5% {\n    box-shadow:$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, $inner-box-distance);\n  }\n  25% {\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n  37.5% {\n    box-shadow:-$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, $inner-box-distance);\n  }\n  50% {\n    box-shadow:$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, -$inner-box-distance);\n  }\n  62.5% {\n    box-shadow:-$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, $inner-box-distance);\n  }\n  75% {\n    box-shadow:$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, -$inner-box-distance);\n  }\n  87.5% {\n    box-shadow:$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, $inner-box-distance);\n  }\n  100% {\n    background:$color-inner-background;\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n}","variables":{"color-inner-background":{"name":"Color Inner Background","default":"#e0a417"},"color-outer-background":{"name":"Color Outer Background","default":"#071036"},"inner-box-distance":{"name":"Inner Box Distance","default":"1rem"},"outer-box-distance":{"name":"Outer Box Distance","default":"3rem"}}},"slug":"boogie-box","description":"This box is having a little boogie - please imagine disco music in the background!","class":"boogie-box","published_at":"2020-11-13T17:38:03.842Z","createdAt":"2020-11-13T17:38:03.850Z","updatedAt":"2020-11-30T22:00:47.370Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"animation_duration":"2","animaion_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"}},"animation_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264b1","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.757Z","createdAt":"2020-12-20T23:18:28.759Z","updatedAt":"2020-12-20T23:18:28.765Z","__v":0,"component":"5faec47b8c82a810431ab084","id":"5fdfdbc409c1ea49ce2264b1"},{"_id":"5fe12f91e8119b3251de3df2","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.540Z","createdAt":"2020-12-21T23:28:17.542Z","updatedAt":"2020-12-21T23:28:17.546Z","__v":0,"component":"5faec47b8c82a810431ab084","id":"5fe12f91e8119b3251de3df2"}],"id":"5faec47b8c82a810431ab084"},{"technologies":[],"_id":"5fb5788c6f5e087bb19b0e4f","name":"Roll In","markup":{"css":"@keyframes roll-in {\n  0% {\n    -webkit-transform: translateX(-800px) rotate(-540deg);\n    transform: translateX(-800px) rotate(-540deg);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translateX(0) rotate(0deg);\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n  }\n}","js":"","variables":{}},"slug":"roll-in","description":"Box roll animation","class":"roll-in","animation_info":{"animation-duration":{"default":"1.5","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.25, 1, 0.5, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T19:39:56.407Z","createdAt":"2020-11-18T19:39:56.422Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b5","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.279Z","createdAt":"2020-12-20T23:18:29.281Z","updatedAt":"2020-12-20T23:18:29.303Z","__v":0,"component":"5fb5788c6f5e087bb19b0e4f","id":"5fdfdbc509c1ea49ce2264b5"},{"_id":"5fe12f92e8119b3251de3df8","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.315Z","createdAt":"2020-12-21T23:28:18.317Z","updatedAt":"2020-12-21T23:28:18.321Z","__v":0,"component":"5fb5788c6f5e087bb19b0e4f","id":"5fe12f92e8119b3251de3df8"}],"id":"5fb5788c6f5e087bb19b0e4f"},{"technologies":[],"_id":"5fb57c4f6f5e087bb19b0e51","name":"Bounce In","markup":{"css":"$initial-scale: 0.3;\n$bounce-height: 300px;\n\n@keyframes bounce-in {\n  0% {\n    -webkit-transform: translateY(-$bounce-height) scale($initial-scale);\n    transform: translateY(-$bounce-height) scale($initial-scale);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n    opacity: 0;\n  }\n  32% {\n    -webkit-transform: translateY(0) scale(1);\n    transform: translateY(0) scale(1);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n    opacity: 1;\n  }\n  46% {\n    -webkit-transform: translateY(calc(-$bounce-height / 6));\n    transform: translateY(calc(-$bounce-height / 6));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  61% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n  72% {\n    -webkit-transform: translateY(calc(-$bounce-height / 12));\n    transform: translateY(calc(-$bounce-height / 12));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  81% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n  87% {\n    -webkit-transform: translateY(calc(-$bounce-height / 40));\n    transform: translateY(calc(-$bounce-height / 40));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  93% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n}","js":"","variables":{"initial-scale":{"name":"Initial Scale","default":"0.3"},"bounce-height":{"name":"Bounce Height","default":"300px"}}},"slug":"bounce-in","description":"Bounce in animation","class":"bounce-in","animation_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"linear","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"1","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T19:55:59.988Z","createdAt":"2020-11-18T19:55:59.993Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b6","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.311Z","createdAt":"2020-12-20T23:18:29.314Z","updatedAt":"2020-12-20T23:18:29.333Z","__v":0,"component":"5fb57c4f6f5e087bb19b0e51","id":"5fdfdbc509c1ea49ce2264b6"},{"_id":"5fe12f92e8119b3251de3df6","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.181Z","createdAt":"2020-12-21T23:28:18.183Z","updatedAt":"2020-12-21T23:28:18.195Z","__v":0,"component":"5fb57c4f6f5e087bb19b0e51","id":"5fe12f92e8119b3251de3df6"}],"id":"5fb57c4f6f5e087bb19b0e51"},{"technologies":[],"_id":"5fb582b46f5e087bb19b0e52","name":"Drain","markup":{"css":"@keyframes drain {\n  0% {\n    -webkit-transform: rotate(0) scale(1);\n            transform: rotate(0) scale(1);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: rotate(-1000deg) scale(0);\n            transform: rotate(-1000deg) scale(0);\n    opacity: 0;\n  }\n}\n","js":"","variables":{}},"slug":"drain","description":"Like a drain!","class":"drain","animation_info":{"animation-duration":{"default":"1.5","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease-in","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T20:23:16.971Z","createdAt":"2020-11-18T20:23:16.979Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b7","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.353Z","createdAt":"2020-12-20T23:18:29.355Z","updatedAt":"2020-12-20T23:18:29.358Z","__v":0,"component":"5fb582b46f5e087bb19b0e52","id":"5fdfdbc509c1ea49ce2264b7"},{"_id":"5fe12f92e8119b3251de3dfa","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.412Z","createdAt":"2020-12-21T23:28:18.414Z","updatedAt":"2020-12-21T23:28:18.424Z","__v":0,"component":"5fb582b46f5e087bb19b0e52","id":"5fe12f92e8119b3251de3dfa"}],"id":"5fb582b46f5e087bb19b0e52"},{"technologies":[],"_id":"5fb5846c6f5e087bb19b0e54","name":"Wobble","markup":{"css":"$wobble-distance: 32px;\n$wobble-rotation: 10deg;\n\n@keyframes wobble {\n  0%, 100% {\n    -webkit-transform: translateX(0%);\n    transform: translateX(0%);\n    -webkit-transform-origin: 50% 50%;\n    transform-origin: 50% 50%;\n  }\n  15% {\n    -webkit-transform: translateX(-$wobble-distance) rotate(-$wobble-rotation);\n    transform: translateX(-$wobble-distance) rotate(-$wobble-rotation);\n  }\n  30% {\n    -webkit-transform: translateX(calc($wobble-distance / 2)) rotate($wobble-rotation);\n    transform: translateX(calc($wobble-distance / 2)) rotate($wobble-rotation);\n  }\n  45% {\n    -webkit-transform: translateX(calc(-$wobble-distance / 2)) rotate(calc(-$wobble-rotation / 1.8));\n    transform: translateX(calc(-$wobble-distance / 2)) rotate(calc(-$wobble-rotation / 1.8));\n  }\n  60% {\n    -webkit-transform: translateX(calc($wobble-distance / 3.3)) rotate(calc($wobble-rotation / 3));\n    transform: translateX(calc($wobble-distance / 3.3)) rotate(calc($wobble-rotation / 3));\n  }\n  75% {\n    -webkit-transform: translateX(calc(-$wobble-distance / 5.5)) rotate(calc(-$wobble-rotation / 5));\n    transform: translateX(calc(-$wobble-distance / 5.5)) rotate(calc(-$wobble-rotation / 5));\n  }\n}\n","js":"","variables":{"wobble-distance":{"name":"Wobble Distance","default":"32px"},"wobble-rotation":{"name":"Wobble Rotation","default":"10deg"}}},"slug":"wobble","description":"Like jelly!","class":"wobble","animation_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T20:30:36.394Z","createdAt":"2020-11-18T20:30:36.399Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b8","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.541Z","createdAt":"2020-12-20T23:18:29.543Z","updatedAt":"2020-12-20T23:18:29.561Z","__v":0,"component":"5fb5846c6f5e087bb19b0e54","id":"5fdfdbc509c1ea49ce2264b8"},{"_id":"5fe12f92e8119b3251de3dfc","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.587Z","createdAt":"2020-12-21T23:28:18.590Z","updatedAt":"2020-12-21T23:28:18.594Z","__v":0,"component":"5fb5846c6f5e087bb19b0e54","id":"5fe12f92e8119b3251de3dfc"}],"id":"5fb5846c6f5e087bb19b0e54"},{"technologies":[{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fc82a9f70a4a36fc29da753","name":"Scale Fade In","markup":{"html":"<div class=\"site-component__animation-box root\">Click Me to Animate!</div>","css":"$scale-amount: 3;\n\n@keyframes scale-fade-in {\n  0% {\n    transform:scale(0);\n    opacity:0;\n    box-shadow:0 5px 10px 5px rgba(0,0,0,.25);\n  }\n  30%, 70% {\n    transform:scale(1);\n    opacity:1;\n    box-shadow:0 0 10px 0 rgba(0,0,0,.25);\n  }\n  100% {\n    transform:scale($scale-amount);\n    opacity:0;\n  }\n}","js":"","variables":{"scale-amount":{"name":"Scale Amount","default":"3"}}},"slug":"scale-fade-in","description":"Fade and scale-in animation","class":"scale-fade-in","animation_info":{"animation-duration":{"default":"3","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.34, 1.56, 0.64, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-12-03T00:00:31.489Z","createdAt":"2020-12-03T00:00:31.495Z","updatedAt":"2020-12-18T01:34:56.991Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc609c1ea49ce2264bf","ip":"54.198.66.53","published_at":"2020-12-20T23:18:30.061Z","createdAt":"2020-12-20T23:18:30.063Z","updatedAt":"2020-12-20T23:18:30.072Z","__v":0,"component":"5fc82a9f70a4a36fc29da753","id":"5fdfdbc609c1ea49ce2264bf"},{"_id":"5fe12f93e8119b3251de3e00","ip":"34.222.172.161","published_at":"2020-12-21T23:28:19.902Z","createdAt":"2020-12-21T23:28:19.903Z","updatedAt":"2020-12-21T23:28:19.912Z","__v":0,"component":"5fc82a9f70a4a36fc29da753","id":"5fe12f93e8119b3251de3e00"}],"id":"5fc82a9f70a4a36fc29da753"},{"technologies":[{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fc82b3870a4a36fc29da754","name":"Scale Fade Out","markup":{"html":"<div class=\"site-component__animation-box root\">Click Me to Animate!</div>","css":"$scale-amount: 3;\n\n@keyframes scale-fade-out {\n  0% {\n    transform:scale($scale-amount);\n    opacity:0;\n  }\n  30%, 70% {\n    transform:scale(1);\n    opacity:1;\n    box-shadow:0 0 10px 0 rgba(0,0,0,.25);\n  }\n  100% {\n    transform:scale(0);\n    opacity:0;\n    box-shadow:0 5px 10px 5px rgba(0,0,0,.25);\n  }\n}","js":"","variables":{"scale-amount":{"name":"Scale Amount","default":"3"}}},"slug":"scale-fade-out","description":"Fade and scale-out animation","class":"scale-fade-out","animation_info":{"animation-duration":{"default":"3","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.34, 1.56, 0.64, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-12-03T00:03:04.913Z","createdAt":"2020-12-03T00:03:04.920Z","updatedAt":"2020-12-18T01:35:02.475Z","__v":0,"selection":{"index_card_size":"small","technologies":["5fa9da45634a2308e08df667"],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","id":"5fa8086c01988f5a261da260"},"recent_views":[{"_id":"5fdfdbc609c1ea49ce2264c0","ip":"54.198.66.53","published_at":"2020-12-20T23:18:30.110Z","createdAt":"2020-12-20T23:18:30.111Z","updatedAt":"2020-12-20T23:18:30.114Z","__v":0,"component":"5fc82b3870a4a36fc29da754","id":"5fdfdbc609c1ea49ce2264c0"},{"_id":"5fe12f94e8119b3251de3e03","ip":"34.222.172.161","published_at":"2020-12-21T23:28:20.284Z","createdAt":"2020-12-21T23:28:20.285Z","updatedAt":"2020-12-21T23:28:20.298Z","__v":0,"component":"5fc82b3870a4a36fc29da754","id":"5fe12f94e8119b3251de3e03"}],"id":"5fc82b3870a4a36fc29da754"}],"selection":[{"index_card_size":"small","technologies":[{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fa8086c01988f5a261da260","name":"Animation","published_at":"2020-11-08T17:18:20.129Z","createdAt":"2020-11-08T15:02:04.774Z","updatedAt":"2020-11-20T13:04:01.264Z","__v":0,"slug":"animations","card_size":"small","teaser":"View a variety of awesome CSS3 Animations that you can edit and slot right into your next website!","columns":3,"description":"Look through our extensive list of CSS3 Animations, find one you like and click to further investigate and edit to your liking! All animations on this page are given an animation-iteration-count of infinite just for dispaly purposes. ","components":[{"technologies":["5fa9da45634a2308e08df667"],"_id":"5fae80098c82a810431ab082","name":"Rotate","markup":{"css":"@keyframes rotate {\n  0% {\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate($spin-degreesdeg);\n    transform: rotate($spin-degreesdeg);\n  }\n}","variables":{"spin-degrees":{"name":"Spin Degrees","default":"360"}}},"slug":"rotate","description":"Basic rotating animation","class":"rotate","published_at":"2020-11-13T12:46:01.563Z","createdAt":"2020-11-13T12:46:01.568Z","updatedAt":"2020-11-30T22:00:34.373Z","__v":0,"selection":"5fa8086c01988f5a261da260","animaion_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"}},"animation_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"id":"5fae80098c82a810431ab082"},{"technologies":["5fa9da45634a2308e08df667"],"_id":"5faec47b8c82a810431ab084","name":"Boogie Box","markup":{"css":"$color-inner-background: $color-inner-background;\n$color-outer-background: $color-outer-background;\n$inner-box-distance: $inner-box-distance;\n$outer-box-distance: $outer-box-distance;\n$transition-speed: $transition-speed;\n\n@keyframes boogie-box {\n  0% {\n    background:$color-inner-background;\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n  12.5% {\n    box-shadow:$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, $inner-box-distance);\n  }\n  25% {\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n  37.5% {\n    box-shadow:-$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, $inner-box-distance);\n  }\n  50% {\n    box-shadow:$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, -$inner-box-distance);\n  }\n  62.5% {\n    box-shadow:-$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, $inner-box-distance);\n  }\n  75% {\n    box-shadow:$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, -$inner-box-distance);\n  }\n  87.5% {\n    box-shadow:$outer-box-distance -$outer-box-distance 0 0 $color-outer-background;\n    transform:translate(-$inner-box-distance, $inner-box-distance);\n  }\n  100% {\n    background:$color-inner-background;\n    box-shadow:-$outer-box-distance $outer-box-distance 0 0 $color-outer-background;\n    transform:translate($inner-box-distance, -$inner-box-distance);\n  }\n}","variables":{"color-inner-background":{"name":"Color Inner Background","default":"#e0a417"},"color-outer-background":{"name":"Color Outer Background","default":"#071036"},"inner-box-distance":{"name":"Inner Box Distance","default":"1rem"},"outer-box-distance":{"name":"Outer Box Distance","default":"3rem"}}},"slug":"boogie-box","description":"This box is having a little boogie - please imagine disco music in the background!","class":"boogie-box","published_at":"2020-11-13T17:38:03.842Z","createdAt":"2020-11-13T17:38:03.850Z","updatedAt":"2020-11-30T22:00:47.370Z","__v":0,"selection":"5fa8086c01988f5a261da260","animation_duration":"2","animaion_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"}},"animation_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"id":"5faec47b8c82a810431ab084"},{"technologies":[],"_id":"5fb5788c6f5e087bb19b0e4f","name":"Roll In","markup":{"css":"@keyframes roll-in {\n  0% {\n    -webkit-transform: translateX(-800px) rotate(-540deg);\n    transform: translateX(-800px) rotate(-540deg);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translateX(0) rotate(0deg);\n    transform: translateX(0) rotate(0deg);\n    opacity: 1;\n  }\n}","js":"","variables":{}},"slug":"roll-in","description":"Box roll animation","class":"roll-in","animation_info":{"animation-duration":{"default":"1.5","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.25, 1, 0.5, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T19:39:56.407Z","createdAt":"2020-11-18T19:39:56.422Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fb5788c6f5e087bb19b0e4f"},{"technologies":[],"_id":"5fb57c4f6f5e087bb19b0e51","name":"Bounce In","markup":{"css":"$initial-scale: 0.3;\n$bounce-height: 300px;\n\n@keyframes bounce-in {\n  0% {\n    -webkit-transform: translateY(-$bounce-height) scale($initial-scale);\n    transform: translateY(-$bounce-height) scale($initial-scale);\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n    opacity: 0;\n  }\n  32% {\n    -webkit-transform: translateY(0) scale(1);\n    transform: translateY(0) scale(1);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n    opacity: 1;\n  }\n  46% {\n    -webkit-transform: translateY(calc(-$bounce-height / 6));\n    transform: translateY(calc(-$bounce-height / 6));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  61% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n  72% {\n    -webkit-transform: translateY(calc(-$bounce-height / 12));\n    transform: translateY(calc(-$bounce-height / 12));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  81% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n  87% {\n    -webkit-transform: translateY(calc(-$bounce-height / 40));\n    transform: translateY(calc(-$bounce-height / 40));\n    -webkit-animation-timing-function: ease-in;\n    animation-timing-function: ease-in;\n  }\n  93% {\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -webkit-animation-timing-function: ease-out;\n    animation-timing-function: ease-out;\n  }\n}","js":"","variables":{"initial-scale":{"name":"Initial Scale","default":"0.3"},"bounce-height":{"name":"Bounce Height","default":"300px"}}},"slug":"bounce-in","description":"Bounce in animation","class":"bounce-in","animation_info":{"animation-duration":{"default":"2","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"linear","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"1","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T19:55:59.988Z","createdAt":"2020-11-18T19:55:59.993Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fb57c4f6f5e087bb19b0e51"},{"technologies":[],"_id":"5fb582b46f5e087bb19b0e52","name":"Drain","markup":{"css":"@keyframes drain {\n  0% {\n    -webkit-transform: rotate(0) scale(1);\n            transform: rotate(0) scale(1);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: rotate(-1000deg) scale(0);\n            transform: rotate(-1000deg) scale(0);\n    opacity: 0;\n  }\n}\n","js":"","variables":{}},"slug":"drain","description":"Like a drain!","class":"drain","animation_info":{"animation-duration":{"default":"1.5","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease-in","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T20:23:16.971Z","createdAt":"2020-11-18T20:23:16.979Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fb582b46f5e087bb19b0e52"},{"technologies":[],"_id":"5fb5846c6f5e087bb19b0e54","name":"Wobble","markup":{"css":"$wobble-distance: 32px;\n$wobble-rotation: 10deg;\n\n@keyframes wobble {\n  0%, 100% {\n    -webkit-transform: translateX(0%);\n    transform: translateX(0%);\n    -webkit-transform-origin: 50% 50%;\n    transform-origin: 50% 50%;\n  }\n  15% {\n    -webkit-transform: translateX(-$wobble-distance) rotate(-$wobble-rotation);\n    transform: translateX(-$wobble-distance) rotate(-$wobble-rotation);\n  }\n  30% {\n    -webkit-transform: translateX(calc($wobble-distance / 2)) rotate($wobble-rotation);\n    transform: translateX(calc($wobble-distance / 2)) rotate($wobble-rotation);\n  }\n  45% {\n    -webkit-transform: translateX(calc(-$wobble-distance / 2)) rotate(calc(-$wobble-rotation / 1.8));\n    transform: translateX(calc(-$wobble-distance / 2)) rotate(calc(-$wobble-rotation / 1.8));\n  }\n  60% {\n    -webkit-transform: translateX(calc($wobble-distance / 3.3)) rotate(calc($wobble-rotation / 3));\n    transform: translateX(calc($wobble-distance / 3.3)) rotate(calc($wobble-rotation / 3));\n  }\n  75% {\n    -webkit-transform: translateX(calc(-$wobble-distance / 5.5)) rotate(calc(-$wobble-rotation / 5));\n    transform: translateX(calc(-$wobble-distance / 5.5)) rotate(calc(-$wobble-rotation / 5));\n  }\n}\n","js":"","variables":{"wobble-distance":{"name":"Wobble Distance","default":"32px"},"wobble-rotation":{"name":"Wobble Rotation","default":"10deg"}}},"slug":"wobble","description":"Like jelly!","class":"wobble","animation_info":{"animation-duration":{"default":"1","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"ease","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-11-18T20:30:36.394Z","createdAt":"2020-11-18T20:30:36.399Z","updatedAt":"2020-11-20T13:04:01.263Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fb5846c6f5e087bb19b0e54"},{"technologies":["5fa9da45634a2308e08df667"],"_id":"5fc82a9f70a4a36fc29da753","name":"Scale Fade In","markup":{"html":"<div class=\"site-component__animation-box root\">Click Me to Animate!</div>","css":"$scale-amount: 3;\n\n@keyframes scale-fade-in {\n  0% {\n    transform:scale(0);\n    opacity:0;\n    box-shadow:0 5px 10px 5px rgba(0,0,0,.25);\n  }\n  30%, 70% {\n    transform:scale(1);\n    opacity:1;\n    box-shadow:0 0 10px 0 rgba(0,0,0,.25);\n  }\n  100% {\n    transform:scale($scale-amount);\n    opacity:0;\n  }\n}","js":"","variables":{"scale-amount":{"name":"Scale Amount","default":"3"}}},"slug":"scale-fade-in","description":"Fade and scale-in animation","class":"scale-fade-in","animation_info":{"animation-duration":{"default":"3","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.34, 1.56, 0.64, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-12-03T00:00:31.489Z","createdAt":"2020-12-03T00:00:31.495Z","updatedAt":"2020-12-18T01:34:56.991Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fc82a9f70a4a36fc29da753"},{"technologies":["5fa9da45634a2308e08df667"],"_id":"5fc82b3870a4a36fc29da754","name":"Scale Fade Out","markup":{"html":"<div class=\"site-component__animation-box root\">Click Me to Animate!</div>","css":"$scale-amount: 3;\n\n@keyframes scale-fade-out {\n  0% {\n    transform:scale($scale-amount);\n    opacity:0;\n  }\n  30%, 70% {\n    transform:scale(1);\n    opacity:1;\n    box-shadow:0 0 10px 0 rgba(0,0,0,.25);\n  }\n  100% {\n    transform:scale(0);\n    opacity:0;\n    box-shadow:0 5px 10px 5px rgba(0,0,0,.25);\n  }\n}","js":"","variables":{"scale-amount":{"name":"Scale Amount","default":"3"}}},"slug":"scale-fade-out","description":"Fade and scale-out animation","class":"scale-fade-out","animation_info":{"animation-duration":{"default":"3","name":"Animation Duration","type":"number"},"animation-timing-function":{"default":"cubic-bezier(0.34, 1.56, 0.64, 1)","name":"Animation Timing Function","type":"text"},"animation-iteration-count":{"default":"infinite","name":"Animation Iteration Count","type":"text"}},"published_at":"2020-12-03T00:03:04.913Z","createdAt":"2020-12-03T00:03:04.920Z","updatedAt":"2020-12-18T01:35:02.475Z","__v":0,"selection":"5fa8086c01988f5a261da260","id":"5fc82b3870a4a36fc29da754"}],"id":"5fa8086c01988f5a261da260"}]},"__N_SSG":true}