Search the Community
Showing results for tags 'urgent'.
Found 4 results
-
Hi , I hope this message finds you well. I'm currently working on a project that involves a horizontal scroll effect using GSAP (GreenSock Animation Platform). The animation looks visually appealing, but I've encountered a peculiar issue that I'm seeking advice on. The Problem: Towards the end of the animation, I've noticed that the section containing the horizontal scroll jumps or moves unexpectedly. I've carefully set up the trigger and pin elements, and the animation seems to work well until this point. However, the final moments of the animation are not as smooth as I'd like them to be. Have a look : https://streamable.com/5qptc3 Code Overview: I'm using the following code structure for the animation: // Reusable function for GSAP Animation function setupHorizontalScrollAnimation(containerId, sectionId, imageListId) { const container = document.getElementById(containerId); const section = document.getElementById(sectionId); const imageList = document.getElementById(imageListId); const images = imageList.querySelectorAll('img'); // Calculate the total width of all images const timeline = gsap.timeline({ scrollTrigger: { trigger: container, start: 'center center', end: () => `+=${images.length * 100}%`, // Adjust the end value based on the number of images pin: section, scrub: 0.2, markers: true, pinspacing: false }, }); timeline.to(images, { xPercent: -100 * (images.length - 1), ease: 'none', }); } // Apply the animation to each section setupHorizontalScrollAnimation('containerAround1', 'parcours-therap', 'imageList1'); setupHorizontalScrollAnimation('containerAround2', 'plan-traitement', 'imageList2');
-
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_LI-min.thumb.jpg.33e8153522df9f555f232034d112282d.jpg)
_LI-min.jpg.963ad853a3c5c0cced6a7dfdd1211e55.jpg)