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?

How i make this scale to 0.7 on scrolling? I mean the first section to scale

I have another problem when i visualise the site on mobile devices, i think the problem is in set the height of each sections, but i am not sure. If someone could help me i will really appreciate. I suggest to find the issue to see the site on mobile screen of "inspect element". You will see that the height of the body is too hight respect of the entire size of the sections. Here the codepen: https://codepen.io/Andy199807/pen/WNgegOG

Thanks @Rodrigo and @rubenmeines was helpful.

Hi, as i title explain i would like to add scroll smooth when scrolling, how can i do it?

Anyway @mvaneijgen, i fix the problem thanks to your code. Thanks.

Really thanks you @mvaneijgen for your suggestions, but i need after the completed of the animation of the tx timelime and tl timeline, in my previous codepen, when it completed each timelines and then the section is scale to 1 i would like that the section on scroll down the section scales down and when scrolling up the section scale up. Could you help me?

Hi there, How i scale down the section element on scrolling down and how i scale up on scrolling up? Please help me letting me know what i miss in the code?

It add the div but is not visible because miss the proprieties css. So how i add them and make the slider work even with the new div? Here is the minimal demo: https://codepen.io/Andy199807/pen/WNyGqZo

Hi @Cassie , sorry i was not specific, the divs that you added must be added once a user click on button "Add div to wrapper", once you add the new div you will see what the problem is.

Hello, if i add another div to the slider the same doesn't work, so how can i add more divs and make the slider work properly?