Search the Community

Hi there, I'm new to GSAP and new to development in general, I'm coming from Webflow as a designer. Anyhow, I've been trying to make - as the title states - a carousel/slider with all the features I want for UX purposes. I intend on reusing this code on future projects. I the features I set out to achieve are: Smooth motion Draggable for mobile mainly Clickable for desktop mainly Infinite scrolling I have made something that works the way I want using the Infinite Scrolling helper function from the GSAP Docs page and added my own alterations, but I am not sure if this is how it is supposed to be done, since I started with an existing function I might have accidentally "doubled down" on the wrong solution, I would love some pointers to the right direction. I've attached a demo here so everyone can see what I'm trying to get at, it's quite a specific thing I'm looking for so it's really hard to find good information. P.S. I'm very new to coding in general, I absolutely am not expecting a full-on tutorial or anything but even some pointers to like "hey learn this one first" would be appreciated, I'm also not at the stage to fully commit to pure code and will be utilizing a lot of Webflow in the foreseeable future hope this add all the necessary context. Thank you everyone in advance.

Hello, I'm trying to achieve a drag animation where I want to bring back each characters after dragging them to their original position using a spring like animation. The character set is actually first animating with Splitext then they become draggable. The HTML: <div class="hero-text-stack"> <h1 class="lora-font-bold">Playground</h1> <!-- will be draggable text layer but first its using Splittext animation to appear --> <h1 class="fixed lora-font-bold">Playground</h1> </div> The JS: // Initialize GSAP timeline for the main text animation const hero = document.querySelector('h1'); const fixedHero = document.querySelector('.fixed'); const heroSplitText = new SplitText(hero, { type: 'lines, chars, words', //mask: 'lines', charsClass: 'hero-char++', reduceWhiteSpace: true, }); tl.from(heroSplitText.chars, { yPercent: 'random([-180, 180])', //xPercent: 'random([-150, 150])', autoAlpha: 0, //rotation: 'random([-130, 130])', stagger: { amount: 1, from: 'random', }, ease: 'power4.inOut', }).to(fixedHero, { autoAlpha: 1, duration: 0.8, }); const heroSection = document.getElementById('hero'); const heroTextStack = document.querySelector('.hero-text-stack'); //gsap.set(heroSection, { perspective: 800 }); const draggableHero = gsap.utils.toArray('.hero-char'); //console.log(draggableHero); draggableHero.forEach((char) => { Draggable.create(char, { type: 'x,y', bounds: heroTextStack, inertia: true, minY: -100, maxY: 200, minX: -100, maxX: 200, lockedAxis: 'x', onDrag: function () { this.deltaX = this.x - this.startX; this.deltaY = this.y - this.startY; console.log(`Dragged: ${this.deltaX}, ${this.deltaY}`); }, onDragEnd: function (event) { const target = event.target; gsap.to(target, { x: this.deltaX, y: this.deltaY, duration: 0.5, ease: 'power4.inOut', }); }, }); }); Code pen URL: https://codepen.io/apeandme/pen/bNdNeQM

Hi all, I need to programmatically update the rotation draggable element position when the user click on the blue donut area visible on the CodePen. I found the following solution that involve a gsap.to method, but i'd prefer use something like draggable.snapTo(180deg) Any suggestion? Thanks, you're awesome gsap.to("#controller", 1, { duration: 1, rotation: closest, ease: "back.out(1.4)", onUpdate: function () { draggable.rotation = closest; draggable.update(true) // doesn't work }, onComplete: function () { draggable.vars.onThrowComplete.call(draggable); } });

Hello, it's me again with GSAP 3 migration I have a case, when I check Draggable's endX and if it is smaller than I need I return the dragged object back to original position. In the previous version of GSAP, when I applied TweenMax.to to the dragged object it "rewrote" the Draggable's behaviour and did what I want. But now, after gsap.to finishes its animation the Draggable continues its work and places object into the endX coordinate. Please, help. I couldn't find a proper "stop" method for Inertia in the Docs.