Code:
Javascript/GSAP code for version 1 (hero experience with image)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.addEventListener("DOMContentLoaded", () => {
let tl1 = gsap.timeline();
let tl2 = gsap.timeline({
scrollTrigger: {
trigger: ".hero",
start: "top top",
end: "bottom bottom",
scrub: 1
}
});
tl1
.from(".hero", {
stagger: { each: 0.2 },
rotationX: -90,
skewX: 5,
skewY: -10,
y: "50%",
z: "-90px",
x: "10%",
autoAlpha: 0,
ease: "expo.out",
duration: 2,
delay: 0.2
})
});
</script>
Javascript/GSAP code for version 2 (hero experience with video)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.addEventListener("DOMContentLoaded", () => {
let tl1 = gsap.timeline();
let tl2 = gsap.timeline({
scrollTrigger: {
trigger: ".video-wrap",
start: "top top",
end: "top top",
scrub: 1
}
});
tl1
.from(".video-wrap", {
width: "40%",
height: "0vh",
ease: "sine.out",
duration: 2,
delay: 0.2
})
.from(".hero", {
stagger: { each: 0.2 },
rotationX: -90,
skewX: 5,
skewY: -10,
y: "50%",
z: "-90px",
x: "10%",
autoAlpha: 0,
ease: "expo.out",
duration: 2,
delay: 0.1
})
});
</script>