body {
position: relative;
}
header {
display:none !important;
}
#headline {
position: relative;
top: 0;
left: 0;
font-size: 2rem;
width: 100%;
max-width: 80vw;
}
svg {
overflow: visible;
fill: #fff;
}
#B1, #K1, #K2 {
fill: #ffffff;
}
.vp-wrapper {
position: absolute;
max-width: none;
width: 100vw;
height: 100vh;
top: 0;
margin: 0;
left: 0;
}
#giant {
position: relative;
bottom: 100px;
right: 100px;
max-width: 70vw;
display: block;
width: 100%;
}
.stagger {
opacity: 0.5;
display: block;
}
// use a script tag or an external JS file
document.addEventListener(“DOMContentLoaded”, (event) => {
gsap.registerPlugin(ScrollTrigger,ScrollToPlugin,TextPlugin,CustomEase)
// gsap code here!
var tl = gsap.timeline(),
mySplitText = new SplitText(“#headline”, { type: “words,chars” }),
chars = mySplitText.chars; //an array of all the divs that wrap each character
gsap.set(“#headline”, { perspective: 400 });
console.log(chars);
tl.from(chars, {
duration: 0.8,
opacity: 0,
scale: 0,
y: 80,
rotationX: 180,
transformOrigin: “0% 50% -50”,
ease: “back”,
stagger: 0.01
});
gsap.to(“.stagger”, {
duration: 0.8,
rotation: 0,
y: “-100”,
opacity: 1,
delay: 1,
stagger: 0.2,
ease: “back.out”,
force3D: true
});
// end gsap code
});
document.querySelectorAll(“.stagger”).forEach(function(box) {
box.addEventListener(“click”, function() {
gsap.to(“.stagger”, {
duration: 0.5,
y: -1000,
stagger: 0.1,
ease: “back.in”
});
});
});
Knock Knock Bang™
Designing Purpose Beyond Pixels
