Search the Community

I recently created a CodePen for parallax image sections, but I’ve noticed the animation finishes early. Even though it’s set to run from the top of the element to the bottom, and from the bottom of the screen to the top, it pauses during the last 100px. I can’t figure out why this is happening, and it’s driving me crazy. Am I missing something obvious? I assume it’s probably an easy fix.

https://codepen.io/Hima-Vamsi-Kummari/pen/dPbPeqz when i am increasing the screen size i am getting some extra space once you increase the code pen screen you will understand clearly

I was trying to replace this into a react component with tailwind css styling and I couldn't succeed since the scroll trigger is not working well. Can anyone please help me replicate this. Please take a look into this code const ProductsSection = () => { const containerRef = useRef<HTMLDivElement>(null); useLayoutEffect(() => { const context = gsap.context(() => { gsap.to(containerRef.current, { //xPercent: -100 * (sections.length - 1), x: -(containerRef.current!.scrollWidth - containerRef.current!.clientWidth), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: containerRef.current, start: "top top", end: `+=${containerRef.current!.scrollWidth}`, pin: true, scrub: 0.5, } }); }) return () => context.revert(); }, []) return ( <div id="container" className={"flex overflow-hidden"} ref={containerRef}> <div className="module dark bg-gray-400 flex-2 h-screen flex place-items-center"> <h1>Module dark</h1> </div> <div className="module white bg-white flex-2 h-screen flex place-items-center"> <h1>Module White</h1> </div> <div className="module blue bg-blue-400 flex-1 h-screen flex place-items-center"> <h1>Module blue</h1> </div> <div className="module orange bg-orange-400 flex-3 h-screen flex place-items-center"> <h1>Module Orange</h1> </div> </div> ) };

Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached. ubuntu screen recodere - Google Search.mp4 I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. Thanks in advance.

I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing