Skip to content

Instantly share code, notes, and snippets.

View Kvaibhav01's full-sized avatar
:octocat:
In 💗 with React and Next

Vaibhav Khulbe Kvaibhav01

:octocat:
In 💗 with React and Next
View GitHub Profile
@Kvaibhav01
Kvaibhav01 / base.css
Last active November 27, 2023 17:55
Layers Animation with clip-path and GSAP
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 16px;
--color-text: #fafafb;
--color-bg: #0b0c0e;
@Kvaibhav01
Kvaibhav01 / style.css
Created January 6, 2019 17:32
CSS Text Background animation
body {
font-family: Monstserrat, sans-serif;
background: #000;
color: #fff;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
@Kvaibhav01
Kvaibhav01 / anime.js
Last active September 20, 2019 07:41
JS code for AnimeJS demo
var btn = document.getElementById('cta');
var btn2 = document.getElementById('cta2');
btn.onclick = function () {
var morphing = anime({
targets: '.polymorph',
points: [
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
],
@Kvaibhav01
Kvaibhav01 / style.css
Created July 10, 2018 18:54
CSS code for AnimeJS demo
body {
margin: 0;
font-family: "Montserrat";
}
.polymorph {
fill: #398f5a;
}
#cta, #cta2{
@Kvaibhav01
Kvaibhav01 / indexWithoutAnimeJS.html
Created July 10, 2018 18:52
HTML file without Anime.JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AnimeJS Demo</title>
<link rel="stylesheet" href="style.css">
</head>
@Kvaibhav01
Kvaibhav01 / animationCSS.css
Created July 3, 2018 19:03
CSS animation code snippet for animating with Keyframes extension
@keyframes divAnimation{
0%{
transform: rotate(0) translateY(-15%);
opacity: 0;
}
100%{
transform: rotate(0) translateY(0%);
opacity: 1;
}
}
@Kvaibhav01
Kvaibhav01 / styleWithoutExtension.css
Created July 3, 2018 18:21
CSS file for animating with Keyframes extension without using the extension
body{
background: #f1f1f1;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.container{
background: rgb(103, 170, 89);
padding: 5em;
color: #fff;
@Kvaibhav01
Kvaibhav01 / index.html
Created July 3, 2018 18:14
HTML file for animating with Keyframes extension
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animate with extension</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
@Kvaibhav01
Kvaibhav01 / style.css
Created June 22, 2018 08:07
CSS file for landing page animation demo
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,700'); /* import Montserrat font */
body, html{
font-family: 'Montserrat', sans-serif;
height: 100;
margin: 0;
}
body{
background: #F4F4F4 url('../assets/candlebg.svg');
@Kvaibhav01
Kvaibhav01 / index.html
Created June 22, 2018 08:05
HTML file for landing page animation demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CRYPTS-landing page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>