<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;
}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()
};
External CSS
This Pen doesn't use any external CSS resources.