Jump to content
Search Community

Is there a default x, y of element?

Learning 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 have a set of squares arranged using css in my stage.

And I have another set of objects which I would like to use gsap to move into these squares.

My problem is, how do I get the current x and y of those squares so that I can assign my objects to move to their location?

Searching the forum, I found that _gsTransform is supposed to store details about the objects, but my squares appear to have undefined _gsTransform.
I'm checking using,
console.log( $( '#square-one' )._gsTransform )
Is _gsTransform still being used? Or is it because my squares are not being transformed and thus doesn't have a _gsTransform. But I'm not going to touch my squares though. Is there another way to make use of it's x and y, so that my objects can move into them?

Link to comment
Share on other sites

Hello @Learning

 

GSAP needs to be initialized with its various methods of set(), to, from(), fromTo(), staggerTo(), staggerFrom(), or staggerFromTo() before it can create that internal _gsTransfom object. So to better help you, can you please create a codepen demo example. This way we can test your code in a live editable environment and help you with this ;)

 

 

 

Thanks! :)

  • Like 3
Link to comment
Share on other sites

13 minutes ago, Learning said:

Is _gsTransform still being used? Or is it because my squares are not being transformed and thus doesn't have a _gsTransform. 

 

Exactly. Here's a safe way to initialize a transform.

console.log(myElement._gsTransform); // => undefined

TweenLite.set(myElement, { x: "+=0", overwrite: false });

console.log(myElement._gsTransform); // => x, y, scaleX, scaleY, rotation, etc...

 

But that's only for transforms. If you're not translating your element with CSS or with GSAP, it doesn't matter where it's positioned, its x and y will always be 0,0. To get screen coordinates for an element, use getBoundingClientRect.

 

See the Pen 8e89fc5d88e0449cb56cce58d4ac1044 by osublake (@osublake) on CodePen

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Hi guys,

Thanks for the help!

  1. I need to add a +=0 to kick off _gsTransform
  2. I need to use [0] when using jQuery to get my object to find _gsTransform
  3. Everything is 0, 0 if I don't move it. Ha. I always thought the x, y is relative to either bounding element or screen... guess not. I'll have to check out getBoundingClientRect to see if I can use that then. Cos I'm arranging my squares using a div that wraps and align them, if I have to position each square manually so that I can use it's x and y, seems a little tricky.
  • Like 2
Link to comment
Share on other sites

You can just pass all squares at once using their class name, or pass multiple objects at once.

 

x and y indicates element's translation from it's own position.

 

Quote

I need to use [0] when using jQuery to get my object to find _gsTransform

 

That zero indicates element's index in jQuery object. So in case you are looping through multiple elements or using selector that will return multiple objects, you can use index to access each DOM object.

  • Like 2
Link to comment
Share on other sites

17 minutes ago, Learning said:
  1. Everything is 0, 0 if I don't move it. Ha. I always thought the x, y is relative to either bounding element or screen... guess not. I'll have to check out getBoundingClientRect to see if I can use that then. Cos I'm arranging my squares using a div that wraps and align them, if I have to position each square manually so that I can use it's x and y, seems a little tricky.

 

Look at the code in my demo above. I don't have to see how you're positioning stuff, getBoundingClientRect will work 100% of the time as long as your elements aren't rotated.

 

Check out the post.

 

And the original post in question.

 

That's power positioning, allowing you to crazy stuff like this. Drag the gray box in and out.

 

See the Pen zvpEMg by osublake (@osublake) on CodePen

 

 

 

 

 

 

  • Like 5
Link to comment
Share on other sites

13 minutes ago, Learning said:
  1. Everything is 0, 0 if I don't move it. 

 

I know, it totally makes sense :lol: 

 

The DOM is just crazy. I could show you several different ways to get the location of something, and they will all be technically correct, but totally different values.

  • Like 2
Link to comment
Share on other sites

Quote

The DOM is just crazy. I could show you several different ways to get the location of something, and they will all be technically correct, but totally different values.

 

Curious to see what you mean by that.

 

BTW amazing grid, I like how it creates little tornado when you drag it slowly.

Link to comment
Share on other sites

 

3 hours ago, Sahil said:

Curious to see what you mean by that.

 

In general, I find absolutely positioning everything at some common origin, like 0,0, and using gsTransform to navigate and move stuff around to be the best approach. That works really well when using multiple draggables instances, like in a grid.

 

However, that's not always possible, so you will need to use other approaches. I already mentioned how getBoundingClientRect is really reliable, but so are element properties like clientLeft, clientTop, clientWidth, clientHeight, offsetLeft, offsetTop, offsetWidth, offsetHeight. The difference between the client and offset properties aren't that great, so I'll skip that comparison.

 

I made a demo that does some really basic animations, and displays how gsTransform, getBoundingClientRect, and the offset properties are interpreting those changes. Check out how the properties for getBoundingClientRect start to differ from gsTransform when its rotating. That's why I said rotation was a huge gotcha in another post.

 

 

I would say that everything being displayed there is technically correct, even though their values don't match up. If you're wondering what's up with the offset properties, it's because they don't take into account any transforms. That doesn't make them any less important or inaccurate. In fact, sometimes that's exactly what you want. 

 

In that grid demo above, I use offsetLeft and offsetTop for positioning because I know the coordinates won't be affected by any transforms, making it much easier to calculate stuff.

 

And if you like that grid demo, here's another version using SplitText!

 

See the Pen mepBam by osublake (@osublake) on CodePen

 

 

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

Quote

Yeah... my problem is I don't know what to write about. Suggestions???

 

Well most of the things you cover in the forums. So I guess it's upto you, what you feel like people need to learn or maybe things you feel like should be part of the blog so those who go through blog can access it.

 

  1. Maybe series of articles including tips and tricks by you.
  2. Or there is always that question by many about how to create some great website they come across. So maybe a small series that shows very simple example of single page site that shows how to create something using SVG, Canvas together. Just yesterday I came across a site that was using Canvas as background, other elements with SVG and HTML and in the comments of that video someone was asking Kirupa how he can make that website. Not good idea maybe :D but maybe more like a myth buster so people will realize it will be more than simple or set anybody in right path who wants to learn it.

 

 

  • Like 2
Link to comment
Share on other sites

Yep, I'd echo Sahil's suggestions, like "Animation Tips & Tricks from Blake" or some more advanced tutorials about particular effects. Also:

  1. "This week in Blake's musings" or "Blake's Brain Bubbles" or "Bobbing in Blakes Brain" - stuff that you've been toying with, explained. Sometimes your experiments may help others, even if they're not fully developed into some in-depth tutorial. Basically take the stuff that excites you that you're working on lately and share it with a little more description/explanation.
  2. Since you're one of the most long-standing moderators here in the forums (lots of experience), maybe ponder what the most common questions are that could really use some extra attention and dive in. Could be scroll-based stuff or using GSAP in React/Webpack/Node, getting things to work with Typescript, or a "GSAP + Canvas Playground". Maybe physics or a learning resource for animators who want to figure out PixiJS + GSAP. Lots of possibilities.
  3. Perhaps a big curated list of learning resources (links) for various topics like physics, canvas, SVG, collision detection, dragging, etc. It could include codepens too. Almost like a glorified bookmarks list by topic that reflect your journey. 

Just a few ideas :)

  • Like 2
Link to comment
Share on other sites

Oh wow! I totally missed these comments. Good stuff here.

 

16 minutes ago, Sahil said:

Any polyfill that supports x, y? If not, what are the drawbacks of using left, top of getBoundingClientRect?

 

Are you talking about x and y on getBoundingClientRect? If so, no, but you can always make your own. Not really useful, but you could do something like this...

function getBounds(el) {
  var rect = el.getBoundingClientRect();
  return {
    x: rect.left,
    y: rect.top,
    width: rect.width,
    height: rect.height
  };
}

 

I think left and top are on there because the rect also contains right and bottom properties. If it was just x and y, what would right and bottom be called?

 

And in the future, there will be another way to get the bounds of a shape, getBoxQuads.

https://hacks.mozilla.org/2014/03/introducing-the-getboxquads-api/

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Yeah Blake, you don't need to concern yourself with what to write about. You've already wrote about half a dozen posts within these forums, all you need to do is collect them into a blog.

 

Then, when you are done with that, there will be a dozen other questions here already dying to be answered by a blog post.

 

Another thing to convert into a blog post is anything that is asked three times or more. That'll save a ton of time - we could even talk about having a shared repo or something to keep them all updated and relevant to the latest trends.

  • Like 4
Link to comment
Share on other sites

14 hours ago, Dipscom said:

Yeah Blake, you don't need to concern yourself with what to write about. You've already wrote about half a dozen posts within these forums, all you need to do is collect them into a blog.

 

Yeah. I should do some data mining on this forum and Codepen. I know I've written some gems, and I have a couple thousand demos on Codepen, although most of them are private. So I have enough content, the problem is finding and organizing everything.

 

Anybody ever tried JavaScript 30?

https://javascript30.com/

 

I haven't, but it looks like an interesting format. GSAP 30? Animation 30? 

 

Link to comment
Share on other sites

7 minutes ago, OSUblake said:

Yeah. I should do some data mining on this forum and Codepen.

 

You don't need to use fancy words to say 'collate'...

 

I'll be happy to lend you a hand finding stuff on the forums during the holiday break. But, you can always start with just what's going on right now. This thread is a good enough start as any. The moment you start writing, people will start asking for particular topics. Soon enough you will have more potential posts than you can keep up writing.

 

10 minutes ago, OSUblake said:

Anybody ever tried JavaScript 30?

 

As it would be nobody's surprise - I have it on my 'to-do at some point' list.

 

Get yourself a Patreon account, a youtube channel and people will start throwing money at you. Then, you can hire me to be your minion. That way I'm sure to learn something.

 

:D

 

Blake for President!

 

  • Like 2
Link to comment
Share on other sites

Quote

Yeah. I should do some data mining on this forum and Codepen. I know I've written some gems, and I have a couple thousand demos on Codepen, although most of them are private. So I have enough content, the problem is finding and organizing everything.

 

I had thoughts of creating a book out of all your forum posts, wasn't going to actually do it :D but you know somebody can do it. I like the idea of Patreon and YouTube channel, or make a something similar to javascript30.

 

@Dipscom If he becomes president he will ask everyone including you to learn all the new stuff you hate.

  • Like 1
Link to comment
Share on other sites

2 minutes ago, Dipscom said:

Get yourself a Patreon account, a youtube channel and people will start throwing money at you.

 

Can you find a Patreon account that is related to JavaScript, and makes decent money? Vue.js is the highest I've seen at $9,322.

https://www.patreon.com/evanyou

 

That's probably not a lot considering all the work that goes into Vue, and how many people use it, 1,015,780 downloads on npm in the last month.

https://www.npmjs.com/package/vue

 

 

6 minutes ago, Dipscom said:

Then, you can hire me to be your minion.  

 

Yeah, I need a minion. I don't like making videos or creating assets.

Link to comment
Share on other sites

I'm not aware of anybody making rivers of money out of online education. It's more about the nice feeling and flexibility that theoretically comes from it.

 

I still sell my soul making banners so, that's the only place I know there's money. No idea where else it is hidden. Except some React gold-mines but they are still rumors to me, I've never seen one.

 

You have my number, let me know when the minion position opens up. Given your idea of decent money, I'll expect some decent crumbs for the minions. ;)

 

@Sahil - You misunderstand me. It is not that there's stuff that I hate to learn. My frustration comes from not having the time to learn all this stuff that's out in the world. Having to be an adult, feed me, clothe me is always in my way. :\

 

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