Animate left and top back to default

[rctneil]

Hi,

 

I'm working on a small animation that has 3 states and snaimates between them.  The 3rd animation should animate the circles back to their original top and left postion as specified in the CSS. Can anyone help me figure out how to do that?

 

Also any suggestions about how to improve this animation?  This is my first time using GSAP.

 

Thanks,

Neil

 

 

See the Pen yLVYJEK by rctneil (@rctneil) on CodePen

[ZachSaucier]

Hey Neil and welcome to the GreenSock forums. Good work so far!

 

A few notes:

• You should avoid animating the top and left properties and instead use properties like x and y. This is because animating properties like top and left is not as performant as ones like x and y which use transforms.
• You make heavy use of labels which is completely valid. However there might be cases where using a different position parameter like "<" might save you some time. For more info see the position parameter post.
• I see that you set GSAP's global defaults. That's also completely valid and you might be intending to do that. But since all of your animations are in the same timeline here, it might make more sense to include the defaults in the timeline object itself so that those defaults are only used for that timeline.

2 hours ago, rctneil said:

The 3rd animation should animate the circles back to their original top and left postion as specified in the CSS. Can anyone help me figure out how to do that?

The solution to that is logical. You're not setting the values back to the ones that they are at the start. It looks like part of the issue is that you switched to x and y on the circles in the thirdMove section. You should use the same properties throughout (probably switching all of your top and left values to x and y). Then it's just a matter of setting the values to the same ones that they are at the start.

 

Happy tweening!

[rctneil]

On 2/10/2021 at 2:40 PM, ZachSaucier said:

Hey Neil and welcome to the GreenSock forums. Good work so far!

 

A few notes:

• You should avoid animating the top and left properties and instead use properties like x and y. This is because animating properties like top and left is not as performant as ones like x and y which use transforms.
• You make heavy use of labels which is completely valid. However there might be cases where using a different position parameter like "<" might save you some time. For more info see the position parameter post.
• I see that you set GSAP's global defaults. That's also completely valid and you might be intending to do that. But since all of your animations are in the same timeline here, it might make more sense to include the defaults in the timeline object itself so that those defaults are only used for that timeline.

The solution to that is logical. You're not setting the values back to the ones that they are at the start. It looks like part of the issue is that you switched to x and y on the circles in the thirdMove section. You should use the same properties throughout (probably switching all of your top and left values to x and y). Then it's just a matter of setting the values to the same ones that they are at the start.

 

Happy tweening!

 

Hi Zach,

 

Thanks for replying.

 

I'll try to take those notes onboard as I tweak my animation.

 

I understand I can just set them to the same values as I have set in my CSS but I hate repeating stuff when it's been specified already.  Basically, i'd rather just have something that can say "use the originally specified values from CSS before GSAP modified them".  This way, if the CSS original positions change then the final end state of my animation updates with no changes.

 

I hate repeating code when i'm sure there must be a way but just not sure of the actual solution.

 

Then again, there may not be.  I don't know.

 

I really hope we can find a resolution.

 

Thanks,

Neil

[ZachSaucier]

You could measure the original value of the relevant properties on page load (before the animation is initialized to assure that you're get the correct values) and then use those as your end values. But that's a trade off because it's more work every time that the page loads. If you just set the values when writing the JS you avoid that work.

 

If you do want the JS to get the values from the CSS on page load, you can either using .getComputedStyle() or CSS variables. Getting the CSS variables would be less work I think but it might not have the browser support that you need.

[rctneil]

1 hour ago, ZachSaucier said:

You could measure the original value of the relevant properties on page load (before the animation is initialized to assure that you're get the correct values) and then use those as your end values. But that's a trade off because it's more work every time that the page loads. If you just set the values when writing the JS you avoid that work.

 

If you do want the JS to get the values from the CSS on page load, you can either using .getComputedStyle() or CSS variables. Getting the CSS variables would be less work I think but it might not have the browser support that you need.

 

So i'm assuming that there's no GSAP property that effectively says "remove any positioning added by GSAP", equalling the return to default values? It seems weird to have to measure the initial values so use them later when a removal of the added properties SHOULD achieve the same effect.  Am I missing something?

[ZachSaucier]

2 minutes ago, rctneil said:

i'm assuming that there's no GSAP property that effectively says "remove any positioning added by GSAP", equalling the return to default values?

Sure there is: clearProps: true. But that doesn't animate to those values. 

 

3 minutes ago, rctneil said:

It seems weird to have to measure the initial values so use them later when a removal of the added properties SHOULD achieve the same effect.  Am I missing something?

GSAP doesn't automatically store the starting values of properties that it's animating in an expectation that sometime in the future they would be needed again. That'd be really inefficient and almost never used. So if you need to go back to those initial values you should store them yourself. 

[GreenSock]

10 minutes ago, ZachSaucier said:

GSAP doesn't automatically store the starting values of properties

An individual tween does record the starting values internally, yes, so that it can very quickly interpolate and of course you could reverse() your animation. But you're asking to animate back to a previous state from an entirely different tween, right?  There are a bunch of ways to do that, here are a couple and I whipped together a few helper functions you could tap into: 

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

 

This function lets you pass in some targets, a comma-delimited list of CSS properties, and optionally a vars object (which could contain things like duration, ease, onComplete, etc.) and it'll record the current values in a vars object so you can easily pass that into a tween later to animate back to them: 

// records the current CSS properties in a vars object so we can animate back to them easily
function propsToVars(targets, props, vars) {
	let data = [];
	props = props.split(",");
	vars = vars || {};
	gsap.utils.toArray(targets).forEach((target, i) => {
		let d = data[i] = {},
			get = gsap.getProperty(target);
		props.forEach(p => d[p] = get(p));
	});
	props.forEach(p => vars[p] = i => data[i][p]);
	return vars;
}

And here's a function you could pass a list of targets to, a comma-delimited list of property names, and optionally a vars object to and it'll remove those properties inline and animate back to the native state accordingly (it uses the previous propsToVars() function too): 

// eliminates the inline CSS properties (in the comma-delimited "props" list) and animates to that state
function toNative(targets, props, vars) {
	vars = propsToVars(targets, props, vars);
	gsap.set(targets, {clearProps: true});
	return gsap.from(targets, vars);
}

You could use the Flip plugin instead if you prefer. LOTS of ways to do it. 

 

Does that help?