animate-remote

animate-remote.markdown

animate-remote

A Pen by jadibrahim on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.63 358.75" height="600">
  <defs>
    <linearGradient id="linear-gradient" x1="56.9725" y1="358.5" x2="56.9725" y2="155.75" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#231f20" />
      <stop offset=".58" stop-color="#000" />
      <stop offset=".93" stop-color="#424345" />
      <stop offset="1" stop-color="#6f7072" />
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="133.4411" y1="328.2483" x2="-19.4961" y2="175.3111" gradientUnits="userSpaceOnUse">
      <stop offset=".36" stop-color="#1b1b1c" />
      <stop offset="1" stop-color="#4f5052" />
    </linearGradient>
    <linearGradient id="linear-gradient-3" x1=".25" y1="78" x2="113.38" y2="78" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#353638" />
      <stop offset=".06" stop-color="#37383a" />
      <stop offset=".28" stop-color="#3b3c3e" />
      <stop offset=".67" stop-color="#3d3e40" />
      <stop offset=".89" stop-color="#353638" />
      <stop offset="1" stop-color="#1d1e20" />
    </linearGradient>
    <linearGradient id="linear-gradient-4" x1="83.165" y1="160.72" x2="83.165" y2="244.73001" gradientUnits="userSpaceOnUse">
      <stop offset=".36" stop-color="#1b1b1c" />
      <stop offset="1" stop-color="#4f5052" />
    </linearGradient>
    <linearGradient id="linear-gradient-5" x1="109.22588" y1="228.78589" x2="57.10412" y2="176.66412" xlink:href="#linear-gradient-2" />
    <linearGradient id="linear-gradient-6" x1="81.9" y1="112.41" x2="81.9" y2="150.41" xlink:href="#linear-gradient-4" />
    <linearGradient id="linear-gradient-7" x1="96.40303" y1="145.91304" x2="67.39697" y2="116.90697" xlink:href="#linear-gradient-2" />
    <linearGradient id="linear-gradient-8" x1="32.73" y1="206.73" x2="32.73" y2="244.73" xlink:href="#linear-gradient-4" />
    <linearGradient id="linear-gradient-9" x1="47.23304" y1="240.23304" x2="18.22696" y2="211.22696" xlink:href="#linear-gradient-2" />
    <linearGradient id="linear-gradient-10" x1="32.9" x2="32.9" y2="198.72" xlink:href="#linear-gradient-4" />
    <linearGradient id="linear-gradient-11" x1="47.40304" y1="194.22304" x2="18.39697" y2="165.21697" xlink:href="#linear-gradient-2" />
    <linearGradient id="linear-gradient-12" x1="32.73" y1="112.41" x2="32.73" y2="150.41" xlink:href="#linear-gradient-4" />
    <linearGradient id="linear-gradient-13" x1="47.23303" y1="145.91304" x2="18.22696" y2="116.90697" xlink:href="#linear-gradient-2" />
  </defs>
  <g id="backround">
    <g id="remote-body">
      <path d="M.565,155.75H113.38v184.75c0,9.93447-8.06553,18-18,18H18.565c-9.93447,0-18-8.06553-18-18V155.75H.565Z" fill="url(#linear-gradient)" stroke="url(#linear-gradient-2)" stroke-miterlimit="10" stroke-width=".5" />
      <path d="M18.25,.25H95.38c9.93447,0,18,8.06553,18,18V155.75H.25V18.25C.25,8.31553,8.31553,.25,18.25,.25Z" fill="url(#linear-gradient-3)" stroke="#000" stroke-miterlimit="10" stroke-width=".5" />
    </g>
    <path d="M53.12,9.13c0,.56,.45,1.12,1.01,1.12h5.5c.55,0,1.01-.57,1.01-1.12s-.45-1.12-1.01-1.12h-5.5c-.55,0-1.01,.57-1.01,1.12,0,0,0-.55,0,0Z" fill="#161719" />
    <g>
      <rect x="64.33" y="160.72" width="37.67" height="84.01001" rx="18.83498" ry="18.83498" fill="url(#linear-gradient-4)" />
      <path d="M83.16502,160.72c10.40227,0,18.83498,8.43271,18.83498,18.83499v46.34004c0,10.40227-8.43272,18.83498-18.83498,18.83498h-.00003c-10.40227,0-18.83498-8.43271-18.83498-18.83498v-46.34004c0-10.40228,8.43272-18.83499,18.83498-18.83499h.00003m0-1.64658c-11.29359,0-20.4816,9.18799-20.4816,20.48157v46.34004c0,11.29356,9.188,20.48155,20.48157,20.48155s20.4816-9.18799,20.4816-20.48155v-46.34004c0-11.29358-9.188-20.48157-20.48157-20.48157h0Z" fill="url(#linear-gradient-5)" />
    </g>
  </g>
  <g id="buttons">
    <g id="voldown" class="zoom long-repeat">
      <path class="label" d="M76.925,225.73c0-.46001,.4-.84,.83-.84h10.81c.45,0,.83,.38,.83,.84s-.39,.84-.83,.84h-10.81c-.43,0-.83-.38-.83-.84Z" fill="#fff" />
      <path d="M64.165,206.73h38v19c0,10.49001-8.51,19-19,19h0c-10.49,0-19-8.50999-19-19v-19h0Z" fill="rgba(255,255,255,0)" />
    </g>
    <g id="volup" class="zoom long-repeat">
      <path class="label" d="M77.755,176.28999h4.57v-4.57001c0-.46001,.38-.84,.84-.84s.84,.38,.84,.84v4.57001h4.56c.46,0,.85,.38,.85,.84s-.38,.84-.85,.84h-4.56v4.57001c0,.46001-.38,.84-.84,.84s-.84-.38-.84-.84v-4.57001h-4.57c-.46,0-.84-.38-.84-.84s.38-.84,.84-.84Z" fill="#fff" />
      <path d="M83.165,160.72h0c10.49,0,19,8.50999,19,19v19h-38v-19c0-10.49001,8.51-19,19-19Z" fill="rgba(17,17,17,0)" />
    </g>
    <g id="tv" class="zoom short">
      <g class="rotate">
        <circle cx="81.9" cy="131.41" r="19" fill="url(#linear-gradient-6)" stroke="url(#linear-gradient-7)" stroke-width="2px" />
      </g>
      <path class="label" d="M75.14,133.48v-6.08c0-1.03,.57-1.61,1.6-1.61h10.35c1.03,0,1.6,.58,1.6,1.61v6.08c0,1.03999-.57,1.61-1.6,1.61h-10.35c-1.03,0-1.6-.57001-1.6-1.61Zm11.81,.33c.31,0,.47-.14999,.47-.47v-5.8c0-.32-.16-.47-.47-.47h-10.08c-.31,0-.47,.15-.47,.47v5.8c0,.32001,.16,.47,.47,.47h10.08Zm-8.32,2.64999c0-.3,.25-.56,.56-.56h5.45c.31,0,.56,.25999,.56,.56s-.25,.56-.56,.56h-5.45c-.31,0-.56-.25999-.56-.56Z" fill="#fff" />
      <circle class="stay" cx="81.9" cy="131.41" r="19" fill="#fff" opacity="0" />
    </g>
    <g id="play" class="zoom short" href="http://localhost:8080/remote_control/D0034B4C0D2D/pause">
      <g>
        <circle cx="32.73" cy="225.73" r="19" fill="url(#linear-gradient-8)" stroke="url(#linear-gradient-9)" stroke-width="2px" stroke-dasharray="119" />
      </g>
      <path d="M24.52,229v-6.55c0-.64999,.39-.99001,.85-.99001,.23,0,.43,.07001,.65,.2l5.47,3.21001c.38,.23,.59,.49001,.59,.85001s-.21,.63-.59,.86l-5.47,3.21001c-.22,.13-.42,.2-.65,.2-.46,0-.85-.35001-.85-.99001Zm9.28,.39v-7.32001c0-.5,.25-.75,.75-.75h1.25c.5,0,.75,.25,.75,.75v7.32001c0,.5-.25,.75-.75,.75h-1.25c-.5,0-.75-.25-.75-.75Zm4.39,0v-7.32001c0-.5,.25-.75,.75-.75h1.25c.5,0,.75,.25,.75,.75v7.32001c0,.5-.25,.75-.75,.75h-1.25c-.5,0-.75-.25-.75-.75Z" fill="#fff" />
      <circle class="stay" cx="32.73" cy="225.73" r="19" fill="#fff" opacity="0" />
    </g>
    <g id="mic" class="zoom short">
      <circle cx="32.9" cy="179.72" r="19" fill="url(#linear-gradient-10)" stroke="url(#linear-gradient-11)" stroke-width="2px" />
      <path class="label" d="M27.9,178.25999c0-.14999,.05-.28,.16-.39s.24-.16,.39-.16,.29,.05,.4,.16,.17,.23,.17,.39v1.28999c0,.75999,.16,1.42999,.49,2.00999s.78,1.02,1.36,1.34c.58,.31999,1.26,.48,2.04,.48s1.46-.16,2.04-.48,1.04-.77,1.36-1.34,.49-1.24001,.49-2.00999v-1.28999c0-.14999,.05-.28,.16-.39s.24-.16,.39-.16,.29,.05,.4,.16,.16,.23,.16,.39v1.32001c0,.67999-.11,1.3-.32,1.86s-.52,1.06-.91,1.48-.86,.75999-1.41,1.00999-1.15,.41-1.81,.47v1.55h2.55c.15,0,.29,.05,.4,.16s.17,.24001,.17,.39c0,.10001-.03,.19-.08,.28s-.12,.14999-.2,.2-.18,.08-.28,.08h-6.18c-.11,0-.2-.03-.28-.08s-.15-.12-.2-.2-.08-.17999-.08-.28c0-.14999,.06-.28,.17-.39s.25-.16,.4-.16h2.55v-1.55c-.66-.06-1.26-.22-1.81-.47s-1.01-.59-1.41-1.00999-.7-.92-.92-1.48-.32-1.19-.32-1.86v-1.32001h-.04Zm3.8,3.31c-.35-.21001-.62-.5-.82-.88s-.3-.8-.3-1.28999v-4.55c0-.49001,.1-.92,.3-1.28999,.2-.37,.47-.67,.82-.88s.75-.32001,1.2-.32001,.85,.11,1.2,.32001,.62,.5,.82,.88,.3,.8,.3,1.28999v4.55c0,.49001-.1,.92-.3,1.28999s-.47,.67-.82,.88-.75,.32001-1.2,.32001-.85-.11-1.2-.32001Z" fill="#fff" />
      <circle class="stay" cx="32.9" cy="179.72" r="19" fill="#fff" fill-opacity="0" stroke-width="2px" stroke-dasharray="120" />
    </g>
    <g id="menu" class="zoom long" commandurl="/remote_control/D0034B4C0D2D/menu">
      <circle cx="32.73" cy="131.41" r="19" fill="url(#linear-gradient-12)" stroke="url(#linear-gradient-13)" stroke-width="2px" stroke-dasharray="120" />
      <path class="label" d="M22.03,128.63h1.1l1.64,4.53999h.03l1.64-4.53999h1.1v5.94h-.86v-4.23h-.03l-1.54,4.23h-.65l-1.54-4.23h-.03v4.23h-.86s0-5.94,0-5.94Zm6.86,0h3.46v.89h-2.51v1.60001h2.37v.86h-2.37v1.69h2.51v.89h-3.46v-5.93001Zm4.7,0h.86l2.61,4.17h.02v-4.17h.95v5.94h-.85l-2.61-4.17999h-.02v4.17999h-.95v-5.94h-.01Zm5.79,3.85001v-3.85001h.96v3.75999c0,.82001,.45,1.36,1.25,1.36s1.24-.53999,1.24-1.36v-3.75999h.95v3.85001c0,1.31-.83,2.2-2.2,2.2s-2.2-.89-2.2-2.2Z" fill="#fff" />
      <circle class="stay" cx="32.73" cy="131.41" r="20" fill="#fff" opacity="0" stroke-width="1.5px" stroke-dasharray="120" stroke="#fff" />
    </g>
    <g id="right" class="zoom long-repeat">
      <path class="label" d="M89.35109,65.30185l2.08954-5.31742c.06758-.18193,.13645-.37425,.20661-.57696,.07017-.20272,.10526-.38984,.10526-.56137,0-.17153-.03509-.35996-.10526-.56527-.07017-.20531-.13904-.39633-.20661-.57306l-2.08954-5.3174c-.05718-.15074-.14814-.27029-.27289-.35865-.12475-.08836-.25729-.13254-.39763-.13254-.22871,0-.41973,.07407-.57306,.22221-.15334,.14814-.23001,.33656-.23001,.56527,0,.11435,.02469,.2417,.07407,.38205,.04938,.14034,.09226,.25989,.12865,.35865l2.34683,5.97233v-1.10714l-2.34683,5.97231c-.03638,.10399-.07927,.22355-.12865,.35868-.04938,.13513-.07407,.26247-.07407,.38203,0,.22874,.07667,.41846,.23001,.56915,.15334,.15076,.34436,.22614,.57306,.22614,.14034,0,.27288-.04547,.39763-.13642,.12475-.09102,.21571-.21187,.27289-.36257Z" fill="#fff" />
      <rect x="63.305" y="43.85" width="53.02" height="30" transform="translate(30.965 148.665) rotate(-90)" fill="#fff" opacity="0" />
    </g>
    <g id="left" class="zoom long-repeat">
      <path class="label" d="M24.28375,65.31485c.05729,.151,.14714,.2721,.26953,.3633,.1224,.09113,.25391,.1367,.39453,.1367,.23438,0,.42839-.07553,.58203-.2266,.15365-.151,.23047-.3411,.23047-.5703,0-.1198-.02474-.2474-.07422-.3828-.04947-.1354-.09504-.2552-.13671-.3594l-2.35157-5.98435v1.10937l2.35157-5.98437c.04167-.09896,.08724-.21875,.13671-.35937,.04948-.14063,.07422-.26823,.07422-.38282,0-.22917-.07682-.41797-.23047-.56641-.15364-.14844-.34765-.22266-.58203-.22266-.14062,0-.27213,.04427-.39453,.13281-.12239,.08854-.21224,.20833-.26953,.35938l-2.09375,5.32812c-.07292,.17709-.14323,.36849-.21094,.57422-.06771,.20573-.10156,.39453-.10156,.56641s.03385,.35937,.10156,.5625c.06771,.20312,.13802,.39583,.21094,.57812l2.09375,5.32814Z" fill="#fff" />
      <rect x="-2.695" y="43.85" width="53.02" height="30" transform="translate(-35.035 82.665) rotate(-90)" fill="#fff" opacity="0" />
    </g>
    <g id="down" class="zoom long-repeat">
      <path class="label" d="M50.34234,91.38906c-.15104-.05729-.27083-.14714-.35938-.26953-.08854-.12239-.13281-.2539-.13281-.39453,0-.23437,.07552-.42838,.22656-.58203,.15104-.15365,.33854-.23047,.5625-.23047,.11979,0,.2487,.02474,.38672,.07422,.13802,.04948,.25651,.09505,.35547,.13672l5.98437,2.34375h-1.10156l5.98434-2.34375c.099-.04167,.2188-.08724,.3594-.13672,.14067-.04948,.26827-.07422,.3828-.07422,.224,0,.4115,.07682,.5625,.23047,.15107,.15365,.2266,.34766,.2266,.58203,0,.14063-.04427,.27214-.1328,.39453-.08853,.12239-.20833,.21224-.3594,.26953l-5.32812,2.08594c-.18229,.06771-.375,.13672-.57813,.20703-.20313,.07031-.39063,.10547-.5625,.10547-.17709,0-.36719-.03516-.57031-.10547-.20313-.07031-.39323-.13932-.57032-.20703l-5.33593-2.08594Z" fill="#fff" />
      <rect x="30.305" y="76.85" width="53.02" height="30" fill="#fff" opacity="0" />
    </g>
    <g id="up" class="zoom long-repeat">
      <path class="label" d="M50.34234,26.31094c-.15104,.05729-.27083,.14714-.35938,.26953-.08854,.12239-.13281,.2539-.13281,.39453,0,.23437,.07552,.42838,.22656,.58203,.15104,.15365,.33854,.23047,.5625,.23047,.11979,0,.2487-.02474,.38672-.07422,.13802-.04948,.25651-.09505,.35547-.13672l5.98437-2.34375h-1.10156l5.98434,2.34375c.099,.04167,.2188,.08724,.3594,.13672,.14067,.04948,.26827,.07422,.3828,.07422,.224,0,.4115-.07682,.5625-.23047,.15107-.15365,.2266-.34766,.2266-.58203,0-.14063-.04427-.27214-.1328-.39453-.08853-.12239-.20833-.21224-.3594-.26953l-5.32812-2.08594c-.18229-.06771-.375-.13672-.57813-.20703-.20313-.07031-.39063-.10547-.5625-.10547-.17709,0-.36719,.03516-.57031,.10547-.20313,.07031-.39323,.13932-.57032,.20703l-5.33593,2.08594Z" fill="#fff" />
      <rect x="30.305" y="10.85" width="53.02" height="30" fill="#fff" opacity="0" />
    </g>
    <rect id="select long" class="zoom" x="38.815" y="40.85" width="36" height="36" fill="#fff" opacity="0" />
  </g>
</svg>

script.js

$(document).ready(function () {
  const atvUrls = {
    channel_down: "/remote_control/D0034B4C0D2D/channel_down",
    channel_up: "/remote_control/D0034B4C0D2D/channel_up",
    down: "/remote_control/D0034B4C0D2D/down",
    home: "/remote_control/D0034B4C0D2D/home",
    home_hold: "/remote_control/D0034B4C0D2D/home_hold",
    left: "/remote_control/D0034B4C0D2D/left",
    menu: "/remote_control/D0034B4C0D2D/menu",
    next: "/remote_control/D0034B4C0D2D/next",
    pause: "/remote_control/D0034B4C0D2D/pause",
    play: "/remote_control/D0034B4C0D2D/play",
    play_pause: "/remote_control/D0034B4C0D2D/play_pause",
    previous: "/remote_control/D0034B4C0D2D/previous",
    right: "/remote_control/D0034B4C0D2D/right",
    select: "/remote_control/D0034B4C0D2D/select",
    set_position: "/remote_control/D0034B4C0D2D/set_position",
    set_repeat: "/remote_control/D0034B4C0D2D/set_repeat",
    set_shuffle: "/remote_control/D0034B4C0D2D/set_shuffle",
    skip_backward: "/remote_control/D0034B4C0D2D/skip_backward",
    skip_forward: "/remote_control/D0034B4C0D2D/skip_forward",
    stop: "/remote_control/D0034B4C0D2D/stop",
    menu_long: "/remote_control/D0034B4C0D2D/top_menu",
    up: "/remote_control/D0034B4C0D2D/up"
  };
  console.clear();
  const $appleTV = $(".zoom");

  var timeout,
    buttonclicked,
    longRepeatButtons = $(".zoom.long-repeat"),
    longButtons = $(".zoom.long"),
    clickButtons = $(".zoom.short");

  /* 
clicker.on("mousedown", function (e) {
    $(e.currentTarget).addClass("clicked");
    console.log("INTERVAL STARTED");
    return false;
  });

  clicker.on("mouseleave mouseup", function (e) {
    $(e.currentTarget).addClass("clicked").off("mouseleave");
    clearInterval(timeout);
    console.log("INTERVAL CLEARED");

    return false;
  });
  */

  //http://localhost:8080/remote_control/D0034B4C0D2D/menu
  longButtons.on("longhold", function (e) {
    e.stopImmediatePropagation();
    console.log(atvUrls[`${this.id}_long`]);
    $(e.currentTarget).removeClass("clicked"); //.off("click");
    buttonclicked = true;
  });

  longButtons.on({
    mousedown: function (e) {
      // console.log($(e), this.id);
      buttonclicked = false;
      timeout = setTimeout(function () {
        e.stopImmediatePropagation();
        console.log("running hold");
        $(e.currentTarget).trigger("longhold");
      }, 1000);

      $(this).one("mouseleave", function (e) {
        // e.stopPropagation();
        $(e.currentTarget).removeClass("clicked");
        console.log(`${e.type} with target ${e.delegateTarget}`);
        clearTimeout(timeout);
      });
      $(this).addClass("clicked");
    },
    mouseup: function (e) {
      clearInterval(timeout);
      $(this).removeClass("clicked");
    },
    click: function (e) {
      $(e.currentTarget).off("mouseleave");
      buttonclicked
        ? (buttonclicked = false)
        : console.log(`${this.id} BUTTON CLICKED`);
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.css

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue";
  user-select: none;
  background-color: clear;
  margin: auto;
  cursor: default;
}
svg {
  overflow: visible;
  width: 100%;
  height: 100vh;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
}
body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0;
  /*   overflow: hidden !important; */
  background-color: clear;
}

.remote {
  height: 100%;
  padding: 0;
}
.window {
  height: 100%;
  margin: auto;
  padding: 0px;
  border-radius: 6px;
  border: 0.06em solid #6d6d6d;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.7);
}

.button__clicked {
  transform: scale(0.9) !important;
  transition: 0s !important;
}

.clicked {
  transform: scale(0.9) !important;
  transition: 0.05s !important;
}
.zoom {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: 0.1s;
  transform-box: fill-box;
}

g.zoom:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

#left-trigger:hover {
  transform: translateX(-100 px);
  transition: 0.3s;
}

#ring {
  animation-name: dash;
  animation-fill-mode: forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
    /*     stroke-linejoin: 1; */
  }
  to {
    stroke-dashoffset: 245;
  }
}