I found this on codepen and it's great except I find it a bit fast and there is no easing. I tried to add duration and easing to various places in this code but it doesn't seem to make much difference in a good way, just breaks the animation.
console.clear();
gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".hero",
start: "top top",
scrub: true,
pin: true,
markers: true
},
});
//add animation code here
tl
.to('.dot', {
y:"0",
})
.to('.inner', {
y:"0"
}, 0)
.to('.dot', {
scale:1,
})
.to('h1', {
x:"0",
duration:1
},">-0.5")
.to('.inner', {
scale:0,
duration:1
},"<0")
.set('body', {
backgroundColor:'#113059'
})