SVG Debit Card Animation 1

index.html

<svg class="d-card" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 368">
  <defs>
    <mask id="chipMask">
      <rect width="100%" height="100%" fill="#fff"/>
      <path fill="none" stroke="#000" stroke-width="3" d="M98,133c0,0,4.3,0,7.2,0c2.8,0,3.8,2,3.8,4s-1,6-4,6H89 M109,176.2c0,0,3.5-2.7,3.5-8.7c0-4-4-10-9-10 s-15,0-15,0 M103.5,143.5V156 M136.8,133c0,0-7.3-0.5-7.1,5c0.1,2.6,1.8,5.5,6.3,5.5c5.3-0.1,14.9-0.5,14.9-0.5 M150.4,157.5 c0,0-10.1,0-15.1,0s-9.1,6-9.1,10c0,6,3.5,8.7,3.5,8.7 M135.3,143.5V156"/>
    </mask>
    
    <mask id="cardMask">
      <rect rx="20" ry="20" fill="#fff" width="600" height="368"/>
    </mask>
    
    <path id="star" fill="#fff" d="M395,122c2-2,4-6,4-6s0.5,2.5,3,5c4,4,6,4,6,4s-2,1-5,4s-4,6-4,6s-1.5-3.5-4-6s-5.5-3.5-5.5-3.5S393,124,395,122z"/>
    
    <clipPath id="box1">
      <rect class="b1" width="320" height="156"/>
    </clipPath>

    <clipPath id="box2">    
      <rect class="b2" width="320" height="107" y="156"/>
    </clipPath>
    
    <clipPath id="txtBoxes">    
      <rect class="txtBox" x="40" y="37" width="90" height="35" />
      <rect class="txtBox" x="40" y="300" width="195" height="35" />
      <rect class="txtBox" x="470" y="290" width="80" height="35" />      
    </clipPath>

  </defs>
  
  <g mask="url(#cardMask)">
    <rect class="bg" fill="#291b12" width="100%" height="100%"/>    
    
    <g clip-path="url(#box1)">
      <circle fill="#f9bd42" cx="113" cy="158" r="187"/>
      <circle fill="#291b12" cx="113" cy="266" r="187"/>
    </g>
  
    <circle fill="#FB513A" cx="113.5" cy="371.5" r="187"/>
    
    <g clip-path="url(#box2)">    
      <circle fill="#3c7773" cx="113" cy="266" r="187"/>
      <circle fill="#43499d" cx="113.5" cy="371.5" r="187"/>
    </g>
    <image x="-12" y="232" width="184" href="https://assets.codepen.io/721952/scratches2.png" />
  
    <use class="star" href="#star" />
    <use class="star" href="#star" />  
    <use class="star" href="#star" />    
  
    <g id="spiral">
      <path id="coil" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="4.5 2 6 1.5 4 1.5" d="M354,129c-26,0-48,16-48,44s18,55,58,55s67-34,67-67s-24-88-89-88s-106,53-106,104 s30.5,136.5,133,139s171-79.5,171-170S469.5-65,337-65S69,40,69,189s105.5,334,362,334"/>
      <path fill="#fff" d="M354,128c0,0,11,0,22,0s19,9,19,19s-6,21.7-20.5,21.7s-20.5-13-20.5-20.3 C354,141,354,128,354,128z"/>
      <circle id="markerRed" fill="#FB513A" cx="375" cy="148" r="13"/>
      <polygon id="triangle" fill="#43499d" points="450,280 422,297 450,312"/>
    </g>
    
    <g id="logo">
      <circle class="logoPt" fill="#fff" cx="503" cy="67" r="25"/>
      <circle class="logoPt" fill="none" stroke="#fff" stroke-width="4.5" cx="533" cy="67" r="22.5"/>
    </g>
    
    
    
    <g fill="#fff" stroke-linecap="round">
      <g clip-path="url(#txtBoxes)">
        <text x="45" y="60" font-size="26">Debit</text>
        <text x="45" y="320" font-size="21">Shirley Swanson</text>
        <text x="470" y="320" font-size="26">08/29</text>    
      </g>
      <path fill="none" stroke="#fff" stroke-width="2.4" d="M42.5,146.5c2,2,2,6.3,0,8.2 M57,163.7c5.1-5.9,5.1-19.8,0-26.3 M52.1,160.7c4.4-4.5,4.9-15.2,0-20.2
     M47.8,157.2c2.9-3,2.9-10,0-13.2"/>
      <rect mask="url(#chipMask)" rx="5" ry="5" x="89" y="125" width="61" height="50.2"/>
    </g>
  </g>
  
</svg>

script.js

const tl = gsap.timeline()
  .set('svg', {opacity:1})
  .from('#cardMask rect', {scale:0, rotation:20, duration:2, transformOrigin:'50% 50%', ease:'expo.inOut'}, 0)
  .from('#spiral', {scale:0.5, rotation:-30, duration:2, transformOrigin:'66% 42%', ease:'expo.inOut'}, 0)
  .from('#coil', {attr:{'stroke-dashoffset':20}, ease:'none', duration:1, repeat:-1}, 0.5)
  .from('#markerRed', {transformOrigin:'50% 50%', scale:1.15, duration:2, repeat:-1, yoyo:true, ease:'sine.inOut'}, 0.5)
  .to('.b1, .b2', {transformOrigin:'50% 50%', skewY:-4, y:-10, duration:2, repeat:-1, yoyo:true, ease:'sine.inOut'}, 0.5)
  .from('.logoPt', {x:(i)=>[18,-10][i], duration:1.2, ease:'expo.inOut'}, 0.8)
  .from('svg text', {x:-40, duration:1.1, ease:'expo.inOut', stagger:0.2}, 1)
  .from('.txtBox', {scaleX:0, transformOrigin:'100% 0', duration:1.1, ease:'expo.inOut', stagger:0.2}, 1)
  .from('#triangle', {
    motionPath: {
        path: "#coil",
        align: "#coil",
        alignOrigin: [0.7, 0.58],
        autoRotate: true,
        start:0.34,
        end:0.6
    },
    duration:2.5
  }, 0.5)
  .to('#triangle', {
    motionPath: {
        path: "#coil",
        align: "#coil",
        alignOrigin: [0.7, 0.58],
        autoRotate: true,
        start: 0.34,
        end:()=>gsap.utils.random(0.39,0.42),
    },
    overwrite:'auto',
    repeatRefresh:true, yoyo:true, repeat:-1, duration:3, ease:'sine.inOut'
  }, 3)
  
document.querySelectorAll('.star').forEach(function(s) {
  gsap.fromTo(s, {
    x:()=>gsap.utils.random(-95,170),
    y:()=>gsap.utils.random(-115,190),
    scale:0,
    transformOrigin:'12px 12px'
  },{
    scale:1,
    yoyo:true,
    repeat:-1,
    repeatRefresh:true,
    duration:()=>gsap.utils.random(0.4,1),
    ease:'expo',
    delay:()=>Math.random()
  });
});

window.onclick =()=> tl.play(0);

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

.d-card {
  opacity:0;
  position:relative;
  width:20%;
  max-height:55%;
  left:20%;
  transform:translateY(50%);
}

svg-debit-card-animation-1.markdown

SVG Debit Card Animation 1

These debit card illustrations just had to be animated. Original dribbble shot: https://dribbble.com/shots/16167614-Custom-Credit-Cards-Covers-For-A-Finance-App

See others in this collection: https://codepen.io/collection/MgYZwW

A Pen by Vashon Gonzales on CodePen.

License.