[How to add easing and change duration]

Legend, thanks!

[How to add easing and change duration]

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",
            })

[How to add easing and change duration]

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

[How to add easing and change duration]

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

[How to add easing and change duration]

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!

[Add duration/easing to pinning]

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

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

[How to add easing and change duration]

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?

[How to add easing and change duration]

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

 

See the Pen QWOqNVa by Anurella (@Anurella) on CodePen