Search the Community

Hi GSAP community, I’m a beginner with GSAP, and I’ve used the seamlessLoop helper function (with some modifications) to create a carousel that slides automatically every few seconds. I also added custom snapping functionality for Draggable since it wasn’t included in the original helper. The carousel works fine initially, but I’m facing two major issues: Resizing Issue: On the initial window load, the slides are perfectly aligned and animate correctly. However, when I resize the window, the slides go off their positions, and the animation becomes misaligned. This issue is especially noticeable if I resize mid-animation. Important Note: When I don’t use the seamlessLoop function, the slides are perfectly aligned even after resizing, which suggests there’s no issue with my CSS. Dragging Snap Issue: On the first slide, when I drag to the right to go to the previous slide (which is the last slide due to the seamless looping), the carousel slides all the way to the first slide and then snaps. For other slides, the dragging snap works perfectly. Things I’ve Tried So Far: Verified that the issue isn’t caused by CSS by testing without the seamlessLoop function. Checked the distanceToStart and distanceToLoop calculations in the populateTimeline function. They appear to be miscalculated during resizing. Added logging to debug these values and noticed inconsistencies when resizing. Ensured proper cleanup of event listeners like resize and visibilitychange. Experimented with adjusting margins, including the spaceBefore and xPercents arrays, but couldn’t resolve the issue. Here’s the CodePen with my implementation: https://codepen.io/Mohd-Usaid/pen/bNbLBBw Since I’m just a beginner, I’d really appreciate any help or advice on how to resolve these problems. Thank you for your patience and support!

Hi everyone, I'm experiencing an issue with my animation. I've searched through existing topics, but couldn't find a solution that matches my problem. To provide some context, I've created a dynamic page for displaying project details. It consists of a description section on the left and an image section on the right. The description is scrollable, and the image changes based on the current description. The issue like i start from project/1 i show all there descriptions all good but when i go to the project/2 or project/^n the scroll still in the register or some where that affect to my animation (the scroll affect to the first image because the scroll still ) ,However, everything works fine if I refresh the page like what i want , So, I'm looking for a solution to reset the ScrollTrigger and resizing functionality dynamically. (methods or props in the useGSAP) Thanks for your help, and I apologize for the lengthy explanation. I just wanted to ensure the context is clear. gsap.registerPlugin(ScrollTrigger); const workInfoItemsRef = useRef(); let imageRefs = useRef([]); const ParrentRef = useRef(); useGSAP( () => { // initialise the imageRefs if ( workInfoItemsRef.current && imageRefs.current.length > 0 && NumberOfFeature > 1 ) { // N2aficti ZIndex directly lrefs: imageRefs.current.forEach((item, index) => { item.style.zIndex = imageRefs.current.length - index; }); // nInitialiser clip-path b refs: gsap.set(imageRefs.current, { clipPath: function () { return "inset(0px)"; }, }); // nCriyi l'animation : const animation = gsap.to( imageRefs.current, // fiha ta last child ! rd lball { clipPath: function (i) { return i != imageRefs.current.length - 1 ? "inset(0px 0px 100% 0px)" : "inset(0px)"; }, stagger: 2, ease: "none", } ); // nCriyi ScrollTrigger l Parrent ref: ScrollTrigger.create({ trigger: ParrentRef.current, start: "top bottom", // markers:true, animation: animation, scrub: 1, }); } }, { dependencies: [CurrentProject], scope: ParrentRef, revertOnUpdate: true } );

Hello Everyone , Recently i have started using React with GSAP, i have been creating a react app and i was able to achieve the animations but resizing doesn't happen and the container inside gets resized only when the page gets a reload and below is my demo code that illustrates the problem Thanks in advance for help! https://stackblitz.com/edit/gsap-react-basic-f48716-oddg3v?file=src%2Fhome.js https://gsap-react-basic-f4871

Hey, I'm trying to create an infinite slider but I'm unable to get it working after resize. The slider works great before resizing tho. Here's a simplified demo of the problem: I have separated the wrappers with colors so it is easier to see whats happening. https://codesandbox.io/s/silly-star-87kp94?file=/src/views/Home.vue:0-2690 I have tried to update the wrapWidth and the position directly inside the animation modifiers on resize but nothing seems to have any effect. Keep in mind that my project uses VW as a base font-size unit so everything scales based of the screen width so that might change the dynamic of the recalculating. Do you guys have any tips or tricks for this??

Hi there! I am trying to create a slider that shows a number, depending on its position (like an input range with a number directly on the thumb) using the Draggable plugin. I have defined a bounds object to keep the slider within these bounds. However, since the thumb's size increases during dragging, the thumb does not stay within the bounds all the time. Draggable allows the thumb to move into a position that would have kept it in its original bounds (not its updated bounds). The issue becomes apparent if you try to drag the slider from 1 to 100 in one go. Notice also, when you arrive at 100 and then let go, the slider snaps into the correct position. How can I change my setup to make sure that the slider stays within the bounds at all times? Thanks!

Wassup, GSAP! My goal is to build a dynamic sections container, which should be adaptive. Some of the sections should have height: 100vh; While I resizing my viewport`s height (perfectly repeats at codeOpen (especially when resizing fast)) my sections are resizing too. While all of my section are position: absolute; (for other section animation types) I have to set their top: property manually via gsap.set({ }) I also noticed that scrollTrigger refreshes a while longer than window.onresize, and i have to handle resize by scrollTrigger`s onRefresh It works perfect, until I pin one of the sections. After that, my pinned section starting to have some wierd top offset value (screenshot). I`m missing something essential here, console.log says that my top calculations are correct, but my top value is overwriting by something. Plus, I still cant get if there is a possibility to refresh markers ( and ScrollTrigger start-end behavior ) in a correct way.

hi, thank you for this great and useful tool. my xml: <data> <ImageLoader name="digital_01" url="imgs/digital_01.jpg" centerRegistration="true" width="640" height="400" twx="342" twy="391" kw="230" kh="200" load="true"/> <ImageLoader name="digital_02" url="imgs/digital_02.jpg" centerRegistration="true" width="734" height="400" twx="594" twy="389" kw="215" kh="192" load="true"/> </data> as3: var queue_xml:XMLLoader = new XMLLoader("imgs/digitals.xml", {name:"digitalsXML", maxConnections:1, estimatedBytes:5000, onChildComplete:imageCompleteHandler, onComplete:queueCompleteHandler}); queue_xml.load(); var img_xml:XML = new XML; function imageCompleteHandler(event:LoaderEvent):void { addChild(event.target.content as ContentDisplay); img_xml = LoaderMax.getLoader(event.target.name).vars.rawXML; //i want to scale down images for using them as thumbnails too TweenMax.to(event.target.content, 0, {autoAlpha:0.2, blurFilter:{blurX:5, blurY:5}, width:img_xml.@kw, height:img_xml.@kh, x:img_xml.@twx, y:img_xml.@twy}); trace("original image value:"+ img_xml.@width +", xml thumbnail size(kw) value:"+ img_xml.@kw +", current image value:"+ event.target.content.width); // trace result for first //original image value:640, xml thumbnail size(kw) value:230, current image value:820 //trace result for second //original image value:734, xml thumbnail size(kw) value:215, current image value:1095 } function queueCompleteHandler(event:LoaderEvent):void { } problem: my images bigger than its actual size but i want them smaller. when i set kw or kh to negative values, result is what i want. btw this is my first project with greensock tools.