Jump to content
Search Community

Animate motion between DOM elements

ConradBastian test
Moderator Tag

Recommended Posts

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.

Link to comment
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)

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...