Bird 1

bird-1.markdown

Bird 1

A Pen by Apon Palanuwech on CodePen.

License.

index.html

<div class="container">
<!--  Shadow  -->
  <div id="shadow"></div>
<!--    -->
  <svg width="1000" height="300" viewBox="0 0 139 83" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="Group 1">
    <path id="right-foot" d="M43.5 76.5L50 66L57.5 64.5L50 76.5H52C52 76.5 55 76.5 55 79.5C55 82.5 52 83 52 83H31C31 83 28 82.5 28 79.5C28 76.5 31 76.5 31 76.5H43.5Z" fill="#EC8050"/>
    <path id="left-foot" d="M57.5 76.5L64 66L71.5 64.5L64 76.5H66C66 76.5 69 76.5 69 79.5C69 82.5 66 83 66 83H45C45 83 42 82.5 42 79.5C42 76.5 45 76.5 45 76.5H57.5Z" fill="#DC7446"/>
    <path id="mouth" d="M0.5 18L13 13L15 29L3 27.5L10.5 21.5L0.5 18Z" fill="#EC8050"/>
    <path id="tail" d="M121 2.5L103 18L113.5 33L136.5 13C136.5 13 140 10 136.5 6C133 2 129 6 129 6C129 6 130 2.5 127.5 1C125 -0.499998 121 2.5 121 2.5Z" fill="#C5D6FF"/>
    <path id="body" d="M33 2.52932L112 15.0293C112 15.0293 122.42 16.8404 123.5 19C124.58 21.1596 117 31 117 31L84.5 58.5C84.5 58.5 72.5 67.5293 62.5 67.5293H62.4999C52.5 67.5293 52 67.5293 42.5 63.0293C33 58.5293 15 32.5293 15 32.5293C15 32.5293 5 21.0293 12 10.0293C19 -0.970679 33 2.52932 33 2.52932Z" fill="#ACB6FF"/>
    <path id="lowerbody" fill-rule="evenodd" clip-rule="evenodd" d="M62.5861 67.5289C62.5573 67.5292 62.5286 67.5293 62.5 67.5293H62.4999C52.5 67.5293 52 67.5293 42.5 63.0293C35.281 59.6098 23.1539 43.7754 17.7464 36.3687C26.0885 34.992 43.5757 35.0236 52.5 45.5C60.8892 55.3482 62.7095 63.7274 62.5861 67.5289Z" fill="#C5D6FF"/>
    <circle id="eye" cx="24" cy="18" r="6" fill="white"/>
    <path id="wing" d="M113 26.1124C105 24.6124 64 18.1124 57.5 17.1124C51 16.1124 51 22.1124 51 22.1124C51 22.1124 54 51.1124 79.5 55.1124C105 59.1124 117 32.6124 117 32.6124C117 32.6124 121 27.6124 113 26.1124Z" fill="#96A6F9"/>
    </g>
</svg>

</div>

<!-- <button id="fly">FLY</button> -->

script.js

const timer = 2

const ease = CustomEase.create("custom", "M0,0 C0,0 0.021,0.005 0.028,0.058 0.06,0.3 0.04,1 0.1,1 0.176,1 0.146,0 0.258,0 0.344,0 0.276,1 0.4,1 0.532,1 0.464,0 0.552,0 0.654,0 0.556,1 0.812,1 1.024,1 0.934,0.077 0.97,0.03 1,-0.01 1,0 1,0 ");

gsap.fromTo('svg', { rotate: 10, y: 0 }, { y: -240, transformOrigin: '50% 100%', rotate: -5, repeat: -1, yoyo: 1, duration: timer, ease: 'power2.out' })
gsap.fromTo('#wing', { rotate: 10 }, { rotate: -40, duration: timer, repeat: -1, ease, yoyo: 1 })
gsap.fromTo('#left-foot', { rotate: 0 }, { transformOrigin: '100% 0%', rotate: -30, duration: timer / 6, repeat: -1, yoyo: 1, y: '-10%' })
gsap.fromTo('#right-foot', { rotate: 0 }, { transformOrigin: '100% 0%', rotate: -20, duration: timer / 5, repeat: -1, yoyo: 1, y: '-10%' })
gsap.fromTo('#mouth', { rotate: 0 }, { transformOrigin: '200% 50%', rotate: -30, duration: timer, repeat: -1, yoyo: 1})
gsap.fromTo('#tail', { rotate: 0 }, { transformOrigin: '0% 50%', rotate: 10, duration: 0.5, repeat: -1, yoyo: 1})
gsap.fromTo('#shadow', { scale: 1, opacity: 1 }, { scale: 0.65, opacity: 0.5, duration: timer, repeat: -1, yoyo: 1, ease: 'power2.out'})

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/CustomEase3.min.js"></script>

style.scss

body {
  margin: 0;
  padding: 0;
  background: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
}

#shadow {
  background-color: rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 32px;
  position: absolute;
  bottom: 48px;
  z-index: 0;
  border-radius: 50%;
}

svg {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

button {
  margin-top: 24px;
  font-size: 16px;
}