Jump to content
Search Community

How to get initial properties of tween target?

pioSko 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

Hi Guys,

I am trying to get the x and y properties of my targets before any tweens actually happen.

Basically, when the page loads.

 

The reason for this is that I have multiple targets in multiple carousel items and I want the tweens to always start from the initial values.

At the moment, when the carousel is rotated to different items and then rotated back to previous items, the TweenMax.allFrom() method gets values from the "new" target positions.

 

What I want to do is to run a function once that gets the values and writes them to a new data- attribute of each target.

 

I have an example (below CodePen), but there must be an easier way :/

See the Pen LnhKD by pioSko (@pioSko) on CodePen

Link to comment
Share on other sites

Hi pioSko :)

 

 

With the translate() ( "x" and "y" are the same as "translateX()" and "translateY()" ) method, the element moves from its current position , depending on the parameters given for the left (X-axis) and the top (Y-axis) , so ;  (x:0, y:0) = element position without any movement , as an independent .
 
in the other hand ; Left / Top are the relative positions to parent container .
 
in your codepen you get left/top position , not the x/y .
 
anyway i think these posts can help you :
  • Like 2
Link to comment
Share on other sites

Sorry if I misunderstood, but what's wrong with the approach in your codepen? Other than a line to add the attribute, it seems to do exactly what you say you want. In fact if anything, it seems like TweenMax's role in this codepen is unnecessary:

 

See the Pen wzFBa by jamiejefferson (@jamiejefferson) on CodePen

 

If we had a better idea of how your carousel was running we might be able to provide a more interesting solution.

  • Like 2
Link to comment
Share on other sites

@Diaco.AW

Thanks helped a bit. I wasn't sure about the Left/Top position but it was the properties that made the most sense from the properties available.

I saw other posts where people used the _gsTransform object to get some values. However, that object is not present in my targets :/ 

 

@jamiejefferson

Sure, it does what I need. However, It's additional work for the client to get and write and then constantly get again all the values from the DOM elements.

I was hoping for something internal in TweenMax. For example something like target.x  or TweenMax.get(target, x) or something. Just a basic way of getting ALL/ANY properties that you are able to tween.

 

Thank you for your help, anyway :)

Link to comment
Share on other sites

I saw other posts where people used the _gsTransform object to get some values. However, that object is not present in my targets :/

 

GSAP has to do a transform on the element before the _gsTransform object will be available. You could do something like this to setup the initial transform.

TweenMax.set(target, { x: "+=0" });
 

 

 

If you have already done a transform and still cannot find the _gsTransform object, you're probably looking at a jQuery wrapped element, which is an array. The DOM element will be the first item in the array, so try this.

 

var xPos = target[0]._gsTransform.x;
  • 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...