JJJ

Legend, thanks!

Another question I have, how do I set the initial position of the dot? Let's say I don't want it to move down and then expand but start expanded already. Please see screenshot as an example. I set the scale to an initially larger value which helped but it still moves down to 0 on the y axis as per the javascript but I want it to start at 0 on the y axis. transform: translate(-50%, -90%) scale(0.1714); .to('.dot', { y: "0", })

Thanks Carl, I really appreciate you taking the time to assist!

So, what I have noticed is that this slows the text down but the small circle and the big circle seem to move really, really fast still. It should basically work like the one as inspired by this codepen https://sofinnovapartners.com

Thank you, this definitely seems to help in some way. I will play around with that end value and see if I can get it how I want. Will provide feedback later today.. Thanks!

Is it possible to add duration and easing to this type of pinning?

Thanks so much for your quick response. I have adjust the scrub value to 0.5. I tried to make it more but then I didn't end up seeing the animation. Could you please elaborate on moving the end triggers further down the page, I don't really understand what you mean by that?

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' })