ethanttp

Hi, I'm newbie and looking for a solution using ScrollTrigger to replicate the moving up section when scrolling down as this site https://videinfra.com/ Here is my approaching but it seems not working right. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); var tl = gsap.timeline({ scrollTrigger: { trigger: "#wrapper", start: "top top", end: "bottom bottom", scrub: true, markers: true, }, }); tl.to(".parallax-section", { y: "-100%", duration: 1, ease: "power4.out", }); Please advise. Thank you.

Thanks @GreenSock

Hi @GreenSock, I do appreciate your advice. However as I mentioned above "Tween height to 0 is smoother than scaleY to 0 when scroll up back on trackpad ", specified in my code the col3, col1, col6 are animated smoother than col4, col2 and col5 when scroll up back. Still not sure what I did wrong in the code.

Hi @Rodrigo Thanks for your support. I'm using ScrollTrigger. It seems Tween height to 0 is smoother than scaleY to 0 when scroll up back on trackpad. Here is the project I'm working on project and here is the script. Kindly advise what I did wrong. $("#wrapper-team").each(function (index) { let triggerElement = $(this); //let targetElement = $(".reveal-col"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top +100px", end: "bottom +100px", scrub: 0.01, pin: true } }); tl.to("#ani-col4", { scaleY: 0, duration: 5, stagger: 0.2, ease: "none", transformOrigin:"bottom" }); tl.to("#ani-col3", { height: 0, duration: 4, stagger: 0.3, ease: "none", transformOrigin:"top" },'<+=0.2'); tl.to("#ani-col1", { height: 0, duration: 6, stagger: 0.1, ease: "none", transformOrigin:"top" },'<+=0.1'); tl.to("#ani-col6", { height: 0, duration: 6, stagger: 0.6, ease: "none", transformOrigin:"top" },'<+=0.3'); tl.to("#ani-col2", { scaleY: 0, duration: 6, stagger: 0.2, ease: "none", transformOrigin:"bottom" },'<+=0.2'); tl.to("#ani-col5", { scaleY: 0, duration: 4, stagger: 0.2, ease: "none", transformOrigin:"bottom" },'<+=0.2'); });

Hi everyone, I have the code line as below: timeline.to(".targerEle", { scaleY: 0, duration: 5, stagger: 0.2, ease: "none", transformOrigin:"bottom" }); Is there any way to adjust height instead of using scaleY, something like: timeline.to(".targerEle", { height: 0, duration: 5, stagger: 0.2, ease: "none", transformOrigin:"bottom" }); I knew that the transformOrigin doesn't work for changing height. Kindly advise.