Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qweq3

Animate motion between DOM elements

Recommended Posts

Is it possible to animate position of an element from element-a position to element-b position only by passing their ID into GSAP? I pass element ID's and GSAP do the calculation and animate it.

For example

 

motionPath:{
    path: [{#element-a}, {#element-b}],
    curviness: 1
  }

 


In a pen below I use svg path but this is not what I want

See the Pen xxxNxmG?height=523&theme-id=32665&default-tab=js,result by drozumek (@drozumek) on CodePen

Share this post


Link to post
Share on other sites

I'm a bit confused - how would it know which direction to curve? And you have 3 elements in the equation, right? The one you want to animate, and then 2 others between which you want it to animate? Is there some other point through which you want the curve to animate? 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for quick response. 

Quote

Is there some other point through which you want the curve to animate? 

First - I'd like to achieve an effect of animating between elements with no additional point, curve.

 

Then I'd like to know if it's possible to add a curve when animating between elements.

Share this post


Link to post
Share on other sites

But how would it know which way (and how far) to curve??

  • Like 2

Share this post


Link to post
Share on other sites

Ok sorry, I thought GSAP can add random small curve by adding " curviness"  in random direction. Sorry.

Ok let's say I have SVG path between 2 elements. But when I resize window vertically the distance between elements changes, so the path isn't working properply anymore like in my Pen in the first post. How I can a make this scalable to the screen (viewport) size?

 

 

edit: nevermind

How to just animate between 2 elements. I know how to do that via JS, but im asking if GSAP has native function to do that (I believe it has)

Share this post


Link to post
Share on other sites

I whipped together an effect that you can reuse in GSAP 3 and it's totally configurable: 

See the Pen JjjqMYX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's the effect (you just copy this once into your project and then use it as much as you want):

gsap.registerEffect({
	name: "curveBetween",
	effect: (targets, config) => {
		let gap = (element1, element2) => { //returns the x/y gap between element1 and element2 in terms of viewport pixels.
				let b1 = gsap.utils.toArray(element1)[0].getBoundingClientRect(),
					b2 = gsap.utils.toArray(element2)[0].getBoundingClientRect();
				return {x: b2.left - b1.left, y:b2.top - b1.top};
			},
			curveBetween = (elementToAnimate, fromElement, toElement) => {
				let startGap = gap(elementToAnimate, fromElement),
					endGap = gap(fromElement, toElement),
					startX = startGap.x + gsap.getProperty(elementToAnimate, "x"),
					startY = startGap.y + gsap.getProperty(elementToAnimate, "y"),
					angle = Math.atan2(endGap.y, endGap.x) + Math.PI / 2,
					lengthFactor = Math.sqrt(endGap.x * endGap.x + endGap.y * endGap.y) / 2 * config.strength;
				return gsap.fromTo(elementToAnimate, {
						x: startX,
						y: startY
					}, {
						motionPath: [{
							x: (startX + endGap.x / 2) + Math.cos(angle) * lengthFactor,
							y: (startY + endGap.y / 2) + Math.sin(angle) * lengthFactor
						}, {
							x: startX + endGap.x,
							y: startY + endGap.y
						}],
						duration: config.duration,
						onComplete: config.onComplete,
						immediateRender: config.immediateRender,
						delay: config.delay,
						ease: config.ease
					});
			},
			tl = gsap.timeline();
		targets.forEach(target => tl.add(curveBetween(target, config.from, config.to), 0));
		return tl;
	},
	plugins: "motionPath",
	defaults: { duration: 2, strength: 1, delay:0 }
});

And then to use it, you'd do something like this: 

gsap.effects.curveBetween("#rect-2", {
  from: "#rect-1", 
  to: "#rect-3", 
  delay: 1, 
  strength: 1 // strength can be a negative number to make it curve in the opposite direction!
});

If you want it to curve out more, increase the strength value. Make it negative if you want it to go the other direction. 

 

Is this what you're looking for? 

  • Like 3

Share this post


Link to post
Share on other sites
8 hours ago, GreenSock said:

 

Is this what you're looking for? 

 

 

WOW! Yes! This is exactly what I'm looking for! Amazing!

I will test some GSAP options on codepen and definitely buy Shockingly Green Membership.

 

@mikel Thank you for your answer, it's also nice, but Jack's solution fits better to my need

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×