<main>
  <svg class="iphonetop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 34.1"><path d="M161,52s8,0,10,12,3,22,20,22H386s19,0,20-18,14-16,14-16Z" transform="translate(-161 -51.9)"/><rect class="cls-1" x="98.1" y="8" width="58.5" height="7.65" rx="3.5"/><path class="cls-1" d="M341.2,56.4a7.4,7.4,0,1,0,7.4,7.3A7.3,7.3,0,0,0,341.2,56.4Zm0,11.7a4.4,4.4,0,1,1,0-8.8,4.4,4.4,0,1,1,0,8.8Z" transform="translate(-161 -51.9)"/></svg>

  <section class="home-img">
    <svg class="bellfull" xmlns="http://www.w3.org/2000/svg" viewBox="-40 0 200 103">
  <defs>
    <clipPath id="clip-path" transform="translate(-61.4 -9.5)">
      <rect class="rectmask" x="51.5" y="99.9" width="96.9" height="42.59"/>
    </clipPath>
  </defs>
  <g class="bellgroup">
    <circle clip-path="url(#clip-path)" id="dingle" class="cls-3" cx="37.3" cy="91.6" r="11.4"/>
    <path id="bell" d="M136.5,88.8a4.8,4.8,0,0,0-1-2.8l-7.8-10.5a13.2,13.2,0,0,1-2.4-5.9l-3.4-24.8a23.3,23.3,0,0,0-16.8-19.1V15.6a6.2,6.2,0,0,0-12.3,0V25.7A23.3,23.3,0,0,0,76,44.8L72.6,69.6a13.2,13.2,0,0,1-2.4,5.9L62.4,86a4.8,4.8,0,0,0-1,2.8v4.1a2.5,2.5,0,0,0,2.5,2.5H134a2.5,2.5,0,0,0,2.5-2.5Z" transform="translate(-61.4 -9.5)"/>
    <circle class="bloop" cx="48" cy="50" r="20" />
  </g>
  <g>
    <line class="xline1" x1="38" x2="38" y1="5" y2="80" />
    <line class="xline2" x1="38" x2="38" y1="5" y2="80" />
  </g>
</svg>

    <div class="h2contain">
      <h2 class="htitle">Homes for Rent</h2>
      <h2 class="hnotify">Notifications</h2>
    </div>
    <img class="homeview1" src='https://images.unsplash.com/photo-1506126279646-a697353d3166?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <div class="indexlines">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias vitae omnis explicabo! Mollitia, qui. Ratione sed laudantium velit, veritatis vitae possimus illo necessitatibus? A numquam vitae fugiat sed. Tempora, quasi.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore delectus, ratione corrupti dolores recusandae provident ea corporis sint nihil omnis, nostrum eos, optio ducimus natus impedit expedita. Reprehenderit, quae. Deserunt.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et architecto deserunt voluptatem quisquam iure porro accusantium, eos veritatis reiciendis necessitatibus nulla, assumenda facere laborum quas delectus cumque. Saepe, enim vero.</p>
    </div>
    <div class="nextto">
      <h3>Santa Fe Home</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    
    <ul class="restlist">
      <li>
        <img src='https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div>
          <h3>Santa Fe Home</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </li>
      <li>
        <img src='https://images.unsplash.com/photo-1501183638710-841dd1904471?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div>
          <h3>Santa Fe Home</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </li>
       <li>
        <img src='https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div>
          <h3>Santa Fe Home</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </li>
       <li>
        <img src='https://images.unsplash.com/photo-1515516089376-88db1e26e9c0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div>
          <h3>Santa Fe Home</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </li>
       <li>
        <img src='https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div>
          <h3>Santa Fe Home</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </li>
    </ul>
  </section>
</main>
body {
  background: #333;
  font-family: 'Gothic A1', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  margin: 20px;
  display: flex;
  font-size: 14px;
  justify-content: center;
}

main {
  width: 350px;
  height: 700px;
  position: absolute;
  left: 300px;
  background: #eee;
  border-radius: 50px;
  border: 15px solid black;
  overflow: hidden;
  .iphonetop {
    width: 60%;
    margin-left: 70px;
    margin-top: -2px;
  }
}

h1, h3, h3 {
  font-weight: 900;
}

h2 {
  margin: 10px 0 20px;
  font-size: 26px;
}

.home-img {
  padding: 0 30px;
  position: relative;
  img {
    width: 100%;
    margin-bottom: 10px;
  }
  h3 {
    margin-bottom: 0;
  }
}

.cls-1 { fill:#4d4d4d; }

.bellfull {
  width: 60px;
  height: 60px;
  margin-left: -10px;
  cursor: pointer;
}

.bellgroup {
  fill: #ccc;
}

.bloop {
  fill: none;
  stroke: #777;
  opacity: 0;
}

.hnotify {
  display: none;
}

.h2contain {
  position: relative;
  height: 60px;
  h2 {
    position: absolute;
  }
}

.xline1, .xline2 {
  stroke-width: 15px;
  stroke: #777;
  stroke-linecap: round;
  visibility: hidden;
}

.nextto {
  width: 60%;
  right: 0;
  top: 107px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  h3 {
      margin: 15px 0 10px;
    }
  p {
    margin-top: 3px;
  }
}

.restlist {
  padding-left: 0;
  position: absolute;
  top: 192px;
  width: 82%;
  visibility: hidden;
  opacity: 0;
  li {
    border-top: 1px solid #ccc;
    display: flex;
    padding: 10px 0;
    img {
      width: 30%;
      height: 68px;
      margin-right: 24px;
    }
    p {
      margin-top: 3px;
    }
    h3 {
      margin: 5px 0 10px;
    }
  }
}

h3, p {
  color: #555;
}
View Compiled
const bellfull = document.querySelector('.bellfull'),
      pLines = new SplitText('.indexlines p', {type: 'lines'}),
      htitle = new SplitText('.htitle', {type: 'chars'}),
      hnotify = new SplitText('.hnotify', {type: 'chars'}),
      grey = '#777',
      magenta = '#df27ab';

let notificationOpen = false;

gsap.set('.hnotify', {
  display: 'block'
})

gsap.set(hnotify.chars, {
  autoAlpha: 0
})

gsap.set('.xline1, .xline2', {
  autoAlpha: 0,
  scaleY: 0,
  transformOrigin: '50% 0%'
})

const initialBell = () => {
  const tl = gsap.timeline({
    defaults: {
      duration: 0.5
    }
  });
  
  tl.add('mousein', '+=1')
  tl.fromTo('.bellgroup', {
    rotation: 0
  }, {
    rotation: 40,
    transformOrigin: '50% 0%',
    ease: 'back.in(1)'
  }, 'mousein')
  tl.to('.bellgroup', {
    duration: 1.25,
    rotation: 0,
    transformOrigin: '50% 0%',
    ease: 'elastic.out(1.75, 0.4)'
  }, 'mousein+=0.5')
  tl.fromTo('.bloop', {
    strokeWidth: 10,
    scale: 0.5,
    opacity: 0
  }, {
    strokeWidth: 0,
    stroke: magenta,
    scale: 3.5,
    opacity: 0.2,
    transformOrigin: '50% 50%',
    ease:'sine'
  }, 'mousein+=0.5')
  
  //circle
  tl.fromTo('#dingle', {
    x: 0
  }, {
    x: 20,
  }, 'mousein+=0.15')
  tl.to('#dingle', {
    duration: 0.25,
    x: -20,
  }, 'mousein+=0.6')
  tl.to('#dingle', {
    x: 0,
    ease: 'back.out(1)'
  }, 'mousein+=0.75')
  tl.fromTo('.bellgroup', {
    duration: 1.5,
    fill: grey
  }, {
    fill: magenta,
    ease: 'elastic'
  }, 'mousein')
  tl.to('.bellgroup', {
    duration: 0.25,
    fill: grey,
    ease: 'sine.in'
  }, 'mousein+=1.25')
  
  return tl
}

bellfull.addEventListener('click', () => {
  if (!notificationOpen) {
    const tl = gsap.timeline({
      defaults: {
        duration: 0.5,
        ease: 'sine'
      }
    });
    
    tl.add('showN')
    tl.to('.homeview1', {
      scale: 0.3,
      transformOrigin: '0% 0%'
    }, 'showN')
    tl.to(pLines.lines, {
      autoAlpha: 0,
      stagger: {
        amount: 0.5
      },
      transformOrigin: '50% 0%'
    }, 'showN')
    tl.to('.homeview1', {
      float: 'left',
      transformOrigin: '0% 0%'
    }, 'showN+=0.5')
    tl.to(htitle.chars, {
      autoAlpha: 0,
      scaleX: 0,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%',
      ease: 'sine.in'
    }, 'showN')
    tl.fromTo(hnotify.chars, {
      autoAlpha: 0,
      scaleX: 0,
    }, {
      scaleX: 1,
      autoAlpha: 1,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%'
    }, 'showN+=0.4')
    tl.to('.nextto', {
      autoAlpha: 1,
    }, 'showN+=1')
    tl.to('.restlist', {
      autoAlpha: 1
    }, 'showN+=1')
    tl.fromTo('.restlist li', {
      autoAlpha: 0
    }, {
      autoAlpha: 1,
      stagger: {
        amount: 0.1
      }
    }, 'showN+=1')
    
    bellTL.play()
    notificationOpen = true
  } else {
    const tl = gsap.timeline({
      defaults: {
        duration: 0.5,
        ease: 'sine'
      }
    });
    
    tl.add('hideN')
    tl.to('.homeview1', {
      scale: 1,
      transformOrigin: '0% 0%'
    }, 'hideN')
    tl.to(hnotify.chars, {
      autoAlpha: 0,
      scaleX: 0,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%',
      ease: 'sine.in'
    }, 'hideN')
    tl.fromTo(htitle.chars, {
      autoAlpha: 0,
      scaleX: 0,
    }, {
      scaleX: 1,
      autoAlpha: 1,
      stagger: {
        amount: 0.3
      },
      transformOrigin: '50% 50%'
    }, 'hideN+=0.4')
    tl.to('.nextto', {
      autoAlpha: 0,
    }, 'hideN')
    tl.fromTo('.restlist li', {
      autoAlpha: 1
    }, {
      autoAlpha: 0,
      stagger: {
        amount: 0.1
      }
    }, 'hideN')
    tl.to('.restlist', {
      autoAlpha: 0,
    }, 'hideN+=0.5')
    tl.to(pLines.lines, {
      autoAlpha: 1,
      stagger: {
        amount: 0.5
      },
      transformOrigin: '50% 0%'
    }, 'hideN+=0.5')

    bellTL.reverse()
    notificationOpen = false
  }
})

let bellTL = gsap.timeline({
paused: true,
  defaults: {
    duration: 0.7,
    ease: 'sine'
  }
});

bellTL.add('bell')
bellTL.to('.rectmask', {
  scaleY: 1.5,
  transformOrigin: '50% 100%',
  ease: 'sine.in'
}, 'bell')
bellTL.to('#bell', {
  scale: 0,
  autoAlpha: 0,
  transformOrigin: '50% 50%',
  ease: 'sine.in'
}, 'bell')
bellTL.to('#dingle', {
  y: -80,
  ease: 'bounce'
}, 'bell+=0.5')
bellTL.to('#dingle', {
  duration: 0.1,
  autoAlpha: 0,
}, 'bell+=1.2')
bellTL.to('.xline1, .xline2', {
  duration: 0.1,
  autoAlpha: 1,
}, 'bell+=1.1')
bellTL.to('.xline1, .xline2', {
  duration: 0.5,
  scaleY: 1,
}, 'bell+=1.1')
bellTL.to('.xline1', {
  duration: 0.3,
  rotation: 45,
  transformOrigin: '50% 50%',
  ease: 'back.out(2)'
}, 'bell+=1.5')
bellTL.to('.xline2', {
  duration: 0.3,
  rotation: -45,
  transformOrigin: '50% 50%',
  ease: 'back.out(2)'
}, 'bell+=1.5')
  

window.onload = () => {
  initialBell()
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js