Andy777

Understood @GreenSock, how can i contact y'all for paid consulting?

Home i make these animations works even when scroll up and down, can you help me? Please https://codepen.io/Andy199807/pen/dyqVrJL

Thanks @GreenSock, but if i reload the page i would like to start from the first div instead of restart from the div it was before. How i do this?

When a user scroll fast the first and the second div animated immediately jumping into the third div. How i prevent fast scrolling?

Ok now i understood @Cassie,but if i reload the page the first and the second div are not visibile. I would like have those restart from the beginning once reload the page, how i do that?

the first scroll does what i want and i would like it does the same with the second div on scrolling into it. Not that it does it automatically, but once is scrolling.

I am confused dunno how to fix that issue. Do you?

Why the second div animate automatically once finished the first div animation?

Hi, I have a problem on this animation. When a user scroll for the first time the first div scale to 0 and set its height to 0 then it displays none. That's works well on first div animation but with the second div it don't work as it should do with the first. What i am doing wrong and how i can solve that issue?

It wooooks thanks @elegantseagulls and @GreenSock, but now want the duration to during 2 second but it don't work, you can see my site at the same address: http://andyrighetto.com, how i solve this issue?

i post to you the link to my port when you maybe find what's going on on inspect element tab css of element. @GreenSock you will see that on not in viewport of the tirdth section the text is translated(0px, -25px) and that's okay and when the third section in in viewport it impost to text IT translate3d(0px, -24.9795px, 0px) and not translate3d(0px, 0px, 0px) that's the problem. Here my site : https://andyrighetto.com

Nothing says console @elegantseagulls

Here the working minimal demo @elegantseagulls it work well but not i my site webflow https://codepen.io/Andy199807/pen/LYJGyyd

I try to rephrase. When i scroll into the view gsap set the .text translate3d(0px, -24.9795px, 0px) instead of translate to y axis to 0px, that's the problem i think @Cassie

hello there, On my local development the animation works well but if i replicate it on my site it doesn't work here is the code: .body{ height: 100vh; } .myskillssection{ width: 100%; height:100vh; background-color: black; } .box{ border:1px solid red; overflow: hidden; } .box .text{ color:aqua; } <div class="myskillssection"> <div class="box"> <div class="text">My text</div> </div> </div> gsap.set(".text",{ y: -25}) var tx = gsap.timeline({ defaults: { duration: 100, ease: "none" }, scrollTrigger: { trigger: ".myskillssection", scrub: true, start: "top top", end: "bottom top", pin:true, markers: true } }); tx.to(".text", {y:0}) In my site it translateY to -25px default and when it is in viewport it transform to translate3d(0px, -24.9795px, 0px) -24.etc instead of 0px, how i fix that issue?