Jump to content
Search Community

Ways to animate back to initial value?

katerlouis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an element that needs to be positioned with CSS for first paint. (114% to the right)

Then I want to animate it to x: 0, which is obviously not the problem.

 

Now I want to animate the element back to where it came from without hard coding the 114%

 

I fear due to keeping size small GSAP doesn't remember the "start values" of elements it animates for the first time, right?

 

 

I could grab the whole transform property with jQuery, which doesn't help me when I use GSAPs 'x' property.

And even if it worked somehow, transform can contain lots more than the x-translation, so it wouldn't be that clean.

jQuerys .offset() function returns absolute pixels. But I want it to go back percentage.

 

How would you implement remembering the start value of the x alone, so GSAP can easily animate back to it without hardcoding it?

See the Pen OpVxRj by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

To add to Pedro's great advice..

 

You might want to look at using xPercent instead of x for percentage based transforms in the x axis.

 

https://greensock.com/gsap-1-13-1

 

The x property is pixel based only. Also make sure that when you animate transforms that your element is set to position: absolute so it animates outside the flow of the document. You can use the GSAP set() method to set the element to set your initial x position using xPercent. But the percentage really wont be set consistently without defining the width and height of the div's parent.

 

Uses xPercent and set() method to set 114% for x

 

See the Pen xqGMqK by jonathan (@jonathan) on CodePen

 

xPercent is part of the GSAP CSSPlugin:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
 

Notes about transforms

  1. To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts.

:)

  • Like 4
Link to comment
Share on other sites

Just to add my two cents worth to Jonathan and Pedro's advice: you may also find the _gsTransform object useful for what you're doing. From the docs:

  • All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

Happy tweening.

:)

Link to comment
Share on other sites

Funnily I came across xPercent 30 minutes later myself.

 

Still don't fully understand how x / xPercent plays along with CSS's transform: translate()

I updated the CodePen to xPercent. The yellow box is translated right 114% with CSS; 

When I tween it to xPercent 0, nothing happens. It appears xPercent ignores the current translate value. How can I take this into account? (of course without hardcoding xPercent: -114)

 

The core question isn't answered for me yet.

I know that I can clear animated values with "clearProps", but I don't know how to animate back to them.

 

It appears that I don't quite understand the _gsTransform concept.

 

 

Still a bit hazy to me.

Appreciate if someone brings light into this. <3

Link to comment
Share on other sites

Hello kreativzirkel,

 

You removed the set() method i had in there that sets your initial start position.  :blink:  This will allow GSAP to set that translateX() cross browser. Its best to let GSAP set and manage the transform so it gets applied properly in each browser. GSAP will create and use matrix() or matrix3d() to make sure the transorm gets applied correctly cross browser. Since the CSS transform property would need to also use the -webkit- prefix to handle webkit based browsers like: Chrome, Safari, Opera, MS Edge, as well as older Android devices.

 

See the Pen wJMKyY by jonathan (@jonathan) on CodePen

 

:)

  • Like 2
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...