CSS
Hover
Animation
Button
Steps
Sprite
SVG
Wiggle
No Javascript
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<a href="#" class="btn-stop-motion" data-wiggle data-sprite>
<div class="btn-stop-motion__inner">
<div class="btn-stop-motion__back">
<svg class="btn-stop-motion__back-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 678 82" fill="none" preserveaspectratio="none"><path d="M460.308 7.5301L460.216 7.59846L460.136 7.68002C457.225 10.6259 456.112 14.1147 455.704 17.5301C455.426 19.853 455.471 22.2897 455.511 24.487C455.528 25.4194 455.544 26.3088 455.534 27.128L455.534 27.1281C455.485 31.453 455.744 35.7647 456.055 40.0304C456.123 40.9669 456.194 41.9001 456.264 42.8308C456.515 46.1574 456.764 49.452 456.895 52.7505L456.895 52.7508C456.908 53.0821 456.921 53.4306 456.934 53.7944C457.069 57.4373 457.259 62.604 458.379 67.1206C459.587 71.9918 462.087 76.9016 467.56 77.582C473.567 78.3305 479.645 78.2561 485.652 77.9982C487.517 77.9182 489.368 77.821 491.208 77.7243C495.339 77.5074 499.416 77.2933 503.477 77.282C509.676 77.2646 515.244 77.2472 520.758 77.2299C527.284 77.2095 533.736 77.1893 541.07 77.1696H541.07C554.586 77.1316 568.103 77.3437 581.637 77.5561L581.644 77.5562C595.171 77.7685 608.714 77.981 622.259 77.9429L656.359 77.8495H656.359C661.063 77.8359 665.017 76.6431 667.846 73.7831C670.658 70.9404 672.118 66.6909 672.376 61.0789C672.376 61.0754 672.376 61.072 672.377 61.0685L674.492 25.4333L674.494 25.398L674.495 25.3626C674.533 22.1986 674.382 18.4111 673.479 14.9927C672.579 11.5846 670.865 8.30716 667.596 6.52469C664.981 5.09728 662.088 4.78229 659.564 4.54711C644.655 3.15323 629.771 3.58486 614.955 4.01454C607.786 4.22244 600.633 4.42988 593.5 4.42988H593.489L593.477 4.43005C574.96 4.7118 563.056 4.62436 546.859 4.50539C543.481 4.48058 539.916 4.4544 536.066 4.42991L536.056 4.42985L536.047 4.42991L481.337 4.78111L481.327 4.78117L481.317 4.78137C480.654 4.79452 479.792 4.79159 478.8 4.78821C476.592 4.7807 473.737 4.77099 470.984 4.93131C468.963 5.04904 466.912 5.26041 465.089 5.64402C463.297 6.02083 461.568 6.59424 460.308 7.5301Z" fill="currentColor" vector-effect="non-scaling-stroke"></path><path d="M234.308 7.53029L234.216 7.59866L234.136 7.68022C231.211 10.6399 230.192 14.1108 229.879 17.4972C229.724 19.1774 229.74 20.8572 229.787 22.4481C229.799 22.8857 229.814 23.3132 229.829 23.7322C229.868 24.8662 229.906 25.9383 229.894 26.9826L229.894 26.9828C229.875 28.6315 229.85 30.2894 229.826 31.9535C229.725 38.8516 229.622 45.8555 229.895 52.7507L229.895 52.751C229.942 53.9419 229.932 55.2806 229.922 56.7443C229.916 57.5192 229.91 58.3292 229.912 59.1708C229.919 61.5488 229.992 64.1036 230.352 66.4843C230.71 68.8491 231.369 71.1777 232.64 73.0207C233.953 74.9248 235.881 76.2492 238.56 76.5822C250.422 78.0603 265.656 78.3151 277.477 78.2822C283.676 78.2648 289.244 78.2474 294.758 78.2301C301.285 78.2097 307.736 78.1895 315.07 78.1698H315.07C328.58 78.1318 342.101 78.0942 355.62 78.0566C369.17 78.0189 382.72 77.9812 396.259 77.9431L430.359 77.8497H430.359C435.025 77.8362 439.302 76.7751 442.498 74.1015C445.729 71.3985 447.627 67.2382 447.889 61.514L447.891 61.4715L447.891 61.429L447.495 25.3457C447.498 25.1251 447.501 24.9008 447.504 24.6732C447.543 21.7376 447.591 18.2486 447.003 15.101C446.368 11.6948 444.927 8.34146 441.596 6.52488C438.981 5.09747 436.088 4.78249 433.564 4.54731C422.446 3.50779 411.337 3.65454 400.286 4.05631C397.163 4.16986 394.049 4.30351 390.94 4.43693C383.019 4.77686 375.136 5.1152 367.24 5.1152H367.228L367.217 5.11538C353.805 5.31944 344.001 5.08464 333.483 4.83273C326.434 4.66389 319.063 4.48737 310.07 4.43013C310.069 4.43012 310.067 4.43011 310.066 4.4301L255.365 3.78138L255.341 3.78109L255.317 3.78156C253.037 3.82678 248.938 3.9493 244.891 4.43987C242.868 4.68508 240.826 5.0259 239.013 5.50582C237.23 5.978 235.536 6.61818 234.308 7.53029Z" fill="currentColor" vector-effect="non-scaling-stroke"></path><path d="M8.30825 7.53031L8.21621 7.59867L8.13562 7.68023C5.22501 10.6261 4.11162 14.1149 3.70376 17.5303C3.42636 19.8533 3.47076 22.2899 3.51079 24.4872C3.52778 25.4196 3.54399 26.309 3.53448 27.1282L3.53448 27.1283C3.43625 35.6709 3.55681 44.217 3.89466 52.7508L3.89467 52.751C3.94197 53.9397 3.93235 55.3029 3.92174 56.8084C3.91609 57.6093 3.91016 58.4504 3.91236 59.327C3.91857 61.7984 3.99176 64.4732 4.35013 66.9728C4.70591 69.4543 5.36005 71.899 6.61737 73.8311C7.91554 75.826 9.84384 77.2446 12.5596 77.5822C21.6839 78.7191 32.8409 78.5422 42.824 78.3839C45.8454 78.336 48.7592 78.2898 51.4767 78.2822C57.6756 78.2648 63.2436 78.2474 68.7584 78.2301C75.2845 78.2097 81.736 78.1895 89.07 78.1698H89.0702C102.58 78.1318 116.101 78.0942 129.62 78.0566C143.17 78.0189 156.719 77.9812 170.259 77.9432L204.359 77.8497H204.359C209.025 77.8362 213.088 76.774 216.05 74.0563C219.022 71.3282 220.631 67.1677 220.889 61.514L220.889 61.512L222.493 25.4112L222.494 25.387L222.495 25.3628C222.533 22.1989 222.382 18.4113 221.479 14.993C220.579 11.5848 218.865 8.30736 215.596 6.5249C212.981 5.09749 210.088 4.7825 207.564 4.54732C192.196 3.11047 176.75 3.46107 161.408 3.80934C154.66 3.9625 147.932 4.11522 141.24 4.11522H141.228L141.217 4.11539C118.825 4.4561 106.355 4.57189 84.0659 4.43012L84.0563 4.43005L84.0468 4.43012L29.3374 4.78131L29.3273 4.78138L29.3173 4.78158C28.6541 4.79473 27.7923 4.7918 26.7999 4.78842C24.5917 4.78091 21.7368 4.7712 18.984 4.93152C16.9626 5.04925 14.9124 5.26062 13.0886 5.64423C11.2971 6.02104 9.56824 6.59445 8.30825 7.53031Z" fill="currentColor" vector-effect="non-scaling-stroke"></path></svg>
</div>
<div class="btn-stop-motion__icon">
<div class="before__100"></div>
<svg class="btn-stop-motion__icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 160 40" fill="none"><path d="M138.72 35.662C138.72 35.662 138.68 35.6604 138.655 35.6594C138.413 35.6171 138.235 35.3986 138.245 35.1472L138.785 21.8544L134.175 23.5194C134.001 23.5854 133.8 23.5448 133.659 23.4091C133.526 23.2818 133.469 23.0845 133.525 22.9L139.544 3.36319C139.619 3.12252 139.852 2.97764 140.103 3.02029C140.345 3.06262 140.523 3.28105 140.512 3.53247L139.973 16.8253L144.583 15.1603C144.765 15.0945 144.958 15.1349 145.099 15.2706C145.232 15.3978 145.289 15.5951 145.233 15.7797L139.214 35.3165C139.148 35.5332 138.939 35.679 138.72 35.6702L138.72 35.662Z" fill="currentColor"></path><path d="M100.389 35.966C100.389 35.966 100.349 35.9661 100.324 35.9662C100.081 35.9347 99.8932 35.7244 99.8922 35.4728L101.032 21.3271L94.5498 23.5735C93.0942 22.946 94.1764 23.6156 94.0297 23.4863C93.8912 23.365 93.8255 23.1705 93.8735 22.9836L99.7771 3.66243C99.8411 3.41867 100.068 3.26356 100.32 3.29505C100.563 3.32657 100.751 3.53688 100.752 3.78851L99.0734 18.229L105.161 17.3027C105.339 17.2289 105.534 17.2606 105.681 17.3899C105.82 17.5112 105.885 17.7058 105.837 17.8926L100.867 35.5988C100.811 35.8182 100.609 35.9732 100.389 35.9741L100.389 35.966Z" fill="currentColor"></path><path d="M58.6775 35.1145C58.6775 35.1145 58.637 35.111 58.6127 35.1089C58.3728 35.0557 58.2048 34.8295 58.2263 34.5788L61.1337 18.9977L54.6831 22.7794C54.5069 22.8376 54.3074 22.7879 54.1729 22.646C54.0457 22.5129 53.9977 22.3133 54.0622 22.1314L60.1736 4.78497C60.2591 4.54791 60.4989 4.41369 60.7469 4.46756C60.9868 4.52075 61.1549 4.74698 61.1333 4.99768L61.1337 15.5456L65.4578 14.8976C65.6421 14.84 65.8335 14.8891 65.968 15.0309C66.0952 15.1641 66.1432 15.3638 66.0787 15.5456L59.186 34.7915C59.1106 35.005 58.8952 35.1413 58.6768 35.1226L58.6775 35.1145Z" fill="currentColor"></path><path d="M18.0738 34.3732C18.0738 34.3732 18.0277 34.3732 18 34.3732C17.7232 34.3404 17.511 34.1273 17.511 33.8732L19.5 20.8732L13.7841 24.301C15 24.301 13.3597 24.3419 13.1936 24.2108C13.0367 24.0879 12.9629 23.8912 13.0183 23.7027L21 3.37316C21.0738 3.12729 21.3322 2.97156 21.6182 3.00434C21.895 3.03713 22.1072 3.2502 22.1072 3.50426L21 17.8732L25.2159 15.4415C25.4189 15.3677 25.6404 15.4005 25.8065 15.5316C25.9633 15.6545 26.0371 15.8513 25.9817 16.0398L18.6182 34.0044C18.5536 34.2256 18.3229 34.3814 18.0738 34.3814V34.3732Z" fill="currentColor"></path></svg>
</div>
<p data-wiggle-target class="btn-stop-motion__p">Stop Motion</p>
</div>
</a>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.btn-stop-motion {
pointer-events: auto;
color: #131313;
cursor: pointer;
flex: 0 auto;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
padding: .75em 1.5em .75em 1em;
font-weight: 400;
line-height: 1;
text-decoration: none;
display: inline-block;
transform: rotate(-1deg);
}
.btn-stop-motion__inner {
grid-column-gap: .25em;
grid-row-gap: .25em;
justify-content: center;
align-items: center;
height: 100%;
display: flex;
}
.btn-stop-motion__back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.btn-stop-motion__back-svg {
width: 300%;
height: 100%;
position: absolute;
top: 0;
left: 0;
max-width: none;
}
.btn-stop-motion__icon {
color: #ffe224;
flex-shrink: 0;
width: 1.5em;
margin-left: -.25em;
margin-right: -.25em;
position: relative;
overflow: hidden;
}
.before__100 {
padding-top: 100%;
}
.btn-stop-motion__icon-svg {
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 0;
max-width: none;
}
.btn-stop-motion__p {
color: #efeeec;
margin-bottom: 0;
padding-top: 0;
font-size: 1em;
font-weight: 500;
position: relative;
}
/* --- Wiggle Animation --- */
@keyframes sprite {
to {
transform: translateX(-100%);
}
}
[data-sprite] .btn-stop-motion__icon-svg {
animation: sprite 0.45s steps(4, end) infinite;
}
[data-sprite]:hover .btn-stop-motion__back-svg {
animation: sprite 0.45s steps(3, end) infinite;
}
/* --- Wiggle Animation --- */
@keyframes wiggle {
from {
transform: rotate(1deg);
}
to {
transform: rotate(-1deg);
}
}
[data-wiggle]:hover [data-wiggle-target] {
animation: wiggle 0.3s steps(2, end) infinite;
}
/* --- Scale Animation (Extra) --- */
.btn-stop-motion {
transition: 0.5s cubic-bezier(0.35, 1.75, 0.6, 1);
transform: scale(1) rotate(0.001deg);
}
.btn-stop-motion:hover {
transform: scale(1.05) rotate(-1deg);
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
/* --- Wiggle Animation --- */
@keyframes sprite {
to {
transform: translateX(-100%);
}
}
[data-sprite] .btn-stop-motion__icon-svg {
animation: sprite 0.45s steps(4, end) infinite;
}
[data-sprite]:hover .btn-stop-motion__back-svg {
animation: sprite 0.45s steps(3, end) infinite;
}
/* --- Wiggle Animation --- */
@keyframes wiggle {
from {
transform: rotate(1deg);
}
to {
transform: rotate(-1deg);
}
}
[data-wiggle]:hover [data-wiggle-target] {
animation: wiggle 0.3s steps(2, end) infinite;
}
/* --- Scale Animation (Extra) --- */
.btn-stop-motion {
transition: 0.5s cubic-bezier(0.35, 1.75, 0.6, 1);
transform: scale(1) rotate(0.001deg);
}
.btn-stop-motion:hover {
transform: scale(1.05) rotate(-1deg);
}Implementation
CSS Steps Animation (Keyframes)
We are using the basic step CSS keyframe option. Basically this will play the animation in steps, what will make the "stop motion" effect.
@keyframes sprite {
to {
transform: translateX(-100%);
}
}
[data-sprite] .btn-stop-motion__icon-svg {
animation: sprite 0.45s steps(4, end) infinite;
}Creating your own Sprite in Figma
In our example, the background sprite has 3 steps, while the lightning bolt has 4. More steps add more detail to the stop-motion effect. Copy the SVG from the HTML and paste it into your Figma document to see how it’s built. It’s a horizontal row of equally sized frames. By simply changing the bolt dimensions in Figma we created the 4 frames.
Search
K
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.