Need the characters spring back to their original position after dragging | using Draggable and Inertia Plug-in| Not working- need help

[sanindie]

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: 

See the Pen bNdNeQM by apeandme (@apeandme) on CodePen.

[Rodrigo]

Hi @sanindie and welcome to the GSAP Forums!

 

Maybe using the Elastic ease function?

https://gsap.com/docs/v3/Eases

 

onDragEnd: function (event) {
  const target = event.target;
  gsap.to(target, {
    x: this.deltaX,
    y: this.deltaY,
    duration: 0.5,
    ease: "elastic.out"
  });
}

 

Here is a fork of your demo:

See the Pen zxGxKgd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[sanindie]

Thanks for reminding me of the ease value of elastic, yes, I got the desired dragging behavior, but now the issue remains with the onRelease() callback, whenever I'm dragging and releasing any particular alphabet, it stays in that position. What possibly am I doing wrong. Kindly suggest.

[Rodrigo]

Hi,

 

I'm not exactly sure what you mean with this. It could be the fact that if you drag outside the bounds of the Draggable instance. If you release outside the bounds the letter will stay in that position because the event happened outside the Draggable target, which is quite logic actually. Is worth mentioning that you're using the event for the drag end callback, just use the char element you're passing in the forEach loop, is simpler. Finally instead of using the delta values from the Draggable instance just use 0 for X and Y since those are the values that mark the initial values of each letter:

onDragEnd: function () {
  gsap.to(char, {
    x: 0,
    y: 0,
    duration: 0.5,
    ease: "elastic.out"
  });
}

Here is an updated demo:

See the Pen emNmKQV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[sanindie]

Thanks Rodrigo, this solves my issue, will keep in mind the soln. Thanks a lot.