basit
/
personal-web
mirror of https://github.com/rjbasitali/personal-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

gsock title animation

main
Basit Ali 2022-10-01 16:40:14 +05:00
parent c4e723b6de
commit a1b3901b1c
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/index.html
View File

@ -210,6 +210,15 @@
transform: scaleY(1); transform: scaleY(1);
} }
} }
.char {
transform: translateY(115px);
transition: transform .5s;
}
h1 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
</style> </style>
@ -222,7 +231,6 @@
</head> </head>
<body> <body>
@ -299,13 +307,12 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-7 col-xl-6"> <div class="col-12 col-sm-12 col-md-8 col-lg-7 col-xl-6">
<h1 class="display-1"> <h1 class="display-1" id="title">
Hello, I’m Basit. Hello, I’m Basit Ali.
<br />
<span
>Software Developer</span
>
</h1> </h1>
<h1>
<span>Software Developer</span>
</h1 class="display-1">
<p class="lead"> <p class="lead">
I work at <a target='_blank' href='https://rail.town/'>Railtown</a>, a software development company in Canada. Right now I’m working on providing video conferencing and other VoIP solutions using WebRTC, Golang and other cool technologies. I work at <a target='_blank' href='https://rail.town/'>Railtown</a>, a software development company in Canada. Right now I’m working on providing video conferencing and other VoIP solutions using WebRTC, Golang and other cool technologies.
</p> </p>
@ -655,6 +662,19 @@
}) })
</script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js" integrity="sha512-gsEItzcNkWxfxHjr4BaEZAd9YuRWYjxnj7c/yukcZ0/nWehUb5TjJNyyv1ApCU2DFH/qgw+stFZHPOKnoQnIuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
const title = new SplitType('#title');
gsap.to('.char', {
y: 0,
stagger: 0.05,
delay: 0.2,
duration: .1
});
</script>
</body> </body>
</html> </html>