Jump to content
Search Community

Game two color circle rotate

lisartur 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

@lisartur You haven't provided us enough information to help you with what kind of effect you are trying to achieve, neither there is any new information in your PM.

 

Quote

You send me example two rectangle rotate but i must rotate two circle

Can you look in my post i write example images

 

The code I have posted can work with any images/svg elements/html elements, it doesn't matter if it is circle or rectangle. Also the way you have posted your images they don't look like they are rotating.

 

You can fork my demo and post an updated demo with your html/svg/images. Though keep in mind that games are already complicated thing to do, so we can't really spend a lot of time to help you implement something complex. If you have prior experience with JavaScript and game development we can help you with how certain specific effects can be achieved with GSAP.

  • Like 1
Link to comment
Share on other sites

Right – as I thought, this is a bit more complex than just rotating two independent elements. I'm not going to make a full demo as it would require more time than I have, but unless you can just rotate each wheel and work with opacity to achieve the effect you want, I think you want many individual parts rotating around one of the centers (depending on what key you're pressing); and you'd save where everything is after each rotation, so that you know what to target next time. In the pen, I'm using classes to do just that.

 

Here's a quick example, hopefully you can figure out the rest :)

 

See the Pen YeRddq?editors=0010 by Acccent (@Acccent) on CodePen

 

 

Also, I don't know if this is a trend or what (it happened to Sahil just a few days ago), but there is no need to send private messages to people to say you posted something in the thread. Users receive notifications by default when new content appears in a thread they've participated in, and if they turned off those notifications they probably don't want to receive messages. This forum is a source of voluntary help and personally any private message I get makes me less willing to contribute to a thread, not more...

 

  • Like 3
Link to comment
Share on other sites

Hi lisartur,

 

First of all, let me just say that I'll just stop replying to this thread if you keep sending private messages or profile status about it.

 

Now, with regards to your project, you added a whole lot of stuff to my codepen and made it more complicated than it should be. I understand that english isn't your first language (it isn't mine either) so I can totally take the time to explain things you don't understand :)

I would rather take the time to answer how and why my codepen above works, than fixing one of yours. Once you have something working with divs, it will be easy to switch to SVGs.

 

If you go back to my codepen, do you understand everything about it, or is there anything that needs more explanations? (Don't hesitate to ask! it's better to clarify things early than to be afraid to say anything)

Link to comment
Share on other sites

Ok

Thank you

 

I write my problem bellow

In your example, there are elements that have the same rotation radius
in my example, elements (1,2,3,4,5,6,7,8)  are rotated around the center of a large circle R, but if rotate left, elements 5,6 then its pivot point changes and revolves around a smaller circles

How change rotation position?

What i do must hange?

hh.png

 

Link to comment
Share on other sites

I think I understand what you're looking for now, and that's beyond what we typically provide in these forums - it's not really a GSAP-related question at all. You'd need to do some math to figure out how to move the transformOrigin while also converting the transforms seamlessly so that there's no jump, kinda like what our smoothOrigin feature does for SVG elements. It's entirely possible, but not simple. You may need to hire someone to help with that since it'll take some work to iron out all the details. GSAP doesn't provide a magic bullet for that type of thing, sorry. 

  • Like 3
Link to comment
Share on other sites

Also, the codepen I provided above already had that functionality. I changed a couple values (the transform-origins of the elements on the left) and now it has two circles of different sizes.

 

@lisartur I'll help you understand the logic of the codepen if you'd like, but as @GreenSock said I won't be able to provide more code examples. Hopefully once you understand how the code works you'll be able to expand it further to add the extra functionality you need. Please first try to read and understand what I posted and if you need guidance to understand specific points you can ask here. (Unless Jack would rather this moves to PMs – I'm fine with either.)

  • Like 2
Link to comment
Share on other sites

Nice job, @Acccent. I hadn't noticed that you delivered a solution like that (without even needing the math). I guess I had in mind something that'd dynamically adjust its transform origin from/to anywhere seamlessly but that'd definitely be more complicated. I like your clever approach on this one...hopefully it'll give @lisartur what's desired. It may not, though, if the proportions are different, but this is at least a good starting point. Thanks again. And no, this doesn't need to move to PMs. 

  • Like 1
Link to comment
Share on other sites

I can't change my codepen, sorry!

 

The core of the solution is that every element is initially created at its "center" position (where the ball D is at the start). Then the JS code rotates everything immediately so it appears like it's all properly positioned.

The reason for that is so that we have a convenient and identical reference position for everything, which we can then use for all the transforms. Does that make sense? (Again, do say if anything at all is unclear. If you are not sure, it could help to read up on how CSS transforms, and particularly transform-origin, work.)

 

In your example with the 10 balls, it is a bit trickier because there is no universal "center" position – it would be between A and B. But the logic is the same: you need to find a position from which to instantiate everything. I would say in your case it could be where A is.

 

So you would have all 10 balls on top of each other on the A position. You make all of their transform-origins (100% 0%) (100% 100%), which is the bottom-right corner (= the center of the small circle). Then you would need to actually move them from there: so you rotate D by 90°, C by 180° and B by 270° (or -90°). At this point A, B, C and D are correct.

 

Then you need to place the balls for the big circle: first you rotate E by -90° so that it's just below F, do the same with G so that it's below H, and with I so it's below J. (Just to be clear: at this stage, A, F, H and J are in the same spot, and B, E, G and I are also in the same spot just below A/F/H/J.)

Then you change the transform-origin of F, E, G, H, I and J to (-200% 0%) (-200% 100%), the center of the big circle, and now you can rotate F and E by -90°, G and H by 180° and I and J by 90°.

 

Now you've placed everything and they all have the same initial reference position from which you can more easily work. When you want to rotate the big circle you make sure that whatever's in the A and B position has its transform-origin set to (-200% 100%), and you rotate all 8 balls by either 90° or -90°. When you want to rotate the small circle, then you change the transform-origin of the 2 balls in the center to (100% 100%) and rotate all 4 balls by 90° or -90°.

 

Try that out and let me know how it goes. Feel free to ask if you need more clarifications.

  • Like 5
Link to comment
Share on other sites

Thank you but im not understand how set start position

I write start position but is not correct

The ball A, B, C, D is set ok

TweenLite.set(S('.LA')[0], {rotation: 90, transformOrigin: '100% 0%'});
TweenLite.set(S('.LB')[0], {rotation: 0, transformOrigin: '100% 0%'});
TweenLite.set(S('.LC')[0], {rotation: 270, transformOrigin: '100% 0%'});
TweenLite.set(S('.LD')[0], {rotation: 180, transformOrigin: '100% 0%'});

 

but how set position E,F,G,H,I,J ?

 

TweenLite.set(S('.LE')[0], {rotation: 0, transformOrigin: '100% 0%'});
TweenLite.set(S('.LF')[0], {rotation: 90, transformOrigin: '100% 0%'});
TweenLite.set(S('.LG')[0], {rotation: 0, transformOrigin: '100% 0%'});
TweenLite.set(S('.LH')[0], {rotation: 90, transformOrigin: '100% 0%'});
TweenLite.set(S('.LI')[0], {rotation: 0, transformOrigin: '100% 0%'});
TweenLite.set(S('.LJ')[0], {rotation: 90, transformOrigin: '100% 0%'});

 

HOW SET THIS

Then you need to place the balls for the big circle: first you rotate E by -90° so that it's just below F, do the same with G so that it's below H, and with I so it's below J. (Just to be clear: at this stage, A, F, H and J are in the same spot, and B, E, G and I are also in the same spot just below A/F/H/J.)

Then you change the transform-origin of F, E, G, H, I and J to (-200% 0%), the center of the big circle, and now you can rotate F and E by -90°, G and H by 180° and I and J by 90°.

 

Now you've placed everything and they all have the same initial reference position from which you can more easily work. When you want to rotate the big circle you make sure that whatever's in the A and B position has its transform-origin set to (-200% 0), and you rotate all 8 balls by either 90° or -90°. When you want to rotate the small circle, then you change the transform-origin of the 2 balls in the center to (100% 0%) and rotate all 4 balls by 90° or -90°.

 

 

Link to comment
Share on other sites

For E, F, G, H, I and J you need to change the transformOrigin parameter so that it is at the center of the other circle.

 

Here are a few examples:

  • If you set transformOrigin to 50% 50%, that is the center of the element itself. If you then rotate the element it will rotate around its center, i.e stay in the same position.
  • If you set tO to 100% 100%, that is the bottom-right corner (100% of the element's width, 100% of its height). If you rotate it by 90°, it will move around its bottom-right corner, so it will end up at a position that is below and to the right of where it was initially.
  • If you set tO to -200% 50%, that's a point that is very much to the left of the element (2 times its width to the left), but aligned with the element vertically (half its height). If you rotate it by 90°, it will end up way below and way to the left.

 

You should try making a codepen and applying these transforms to an element via CSS, to see how they work.

 

When you understand this correctly, you can deduce what values to use for your project.

Going back to the solution above, if we take A as a starting position, the transform origin for the small circle is 100% 100% because the center of the circle is on the bottom right corner of A. The transform origin for the big circle is something like -200% 100%, ie. way to the left of A and aligned with its bottom side. In your code example, it didn't work because you kept all the transform origins at 100% 0%.

  • Like 4
Link to comment
Share on other sites

Ok so first of all, I need to correct two things I said above which were not quite correct, so my apologies for that:

  1. transformOrigin: 50% 0% is the top of the element and 50% 100% is the bottom. So in your codepen that was the first thing that needed to be changed.
  2. you actually can't rotate something by 90°, then change its transform origin to something else and rotate it again. I mean, you can, but if you do it will act as if it was all just one rotation using the latest transform origin. I made a small graphic to explain, attached. That means we need to find another way to position E below F – fortunately we can just translate it.

 

Here is a fork of your codepen with those changes. You're on the right track :)

See the Pen pLoMBO?editors=0010 by Acccent (@Acccent) on CodePen

 

 

rotate-01.png

  • Like 4
Link to comment
Share on other sites

Like I said above, you actually can't position A by rotating it at the start, because then when you want to rotate it again you'll need to change its transform origin and that will mess its positioning.

So you have to position it using translation.

 

Basically, think of it this way: you have 2 sets of 4 balls. B/I/G/E that can just be rotated at the start, with their transform origin still at -100% 0%. And A/J/H/F, that first need to be translated up, and can then be rotated with a transform origin of -100% 100%.

let la = S('.LA')[0], lf = S('.LF')[0], lh = S('.LH')[0], lJ = S('.LJ')[0];

TweenLite.set([la, lf, lh, lj], {y: -100, transformOrigin: '-100% 100%'});
TweenLite.set(lf, {rotation: 90});
TweenLite.set(lh, {rotation: 180});
TweenLite.set(lj, {rotation: 270});

(also note how I'm saving the references first, then using those in the tweens – better than using Sizzle or jQuery or whatever to find an element every time.)

 

After you've done that there's still a problem. (I'm only looking at the makeTLnew function here, right?)

You're changing the transform origins of the elements, which is the right thing to do, but you're not changing them to the right values:

// LB, LE, LI and LG were not translated at the start, so we want them to rotate around the point at the top and to the left
TweenMax.set([lb, le, li, lg], {transformOrigin: '-100% 0%'});

// We want LA, LF, LH and LJ to rotate around the point that is at the bottom, to the left (because we translated them at the start)
TweenMax.set([la, lf, lh, lj], {transformOrigin: '-100% 100%'});

 

When you've done that, the "1" rotation should work. You need to apply the same logic to all the rotations. And then you'll need to find a way to save some information about the balls to make sure you rotate the right ones and in the right direction every time, not just just the first time.

  • Like 1
Link to comment
Share on other sites

Okay, I think you lost me there. The examples I gave in my previous post were for the initial positioning, not for the rotations. You didn't change your positioning code in the first codepen...

 

In the second one, I don't know, you're doing a whole lot of new stuff that I don't know about, but on the other hand it seems to be working? So I'm not sure what the problem is...? (It doesn't help that you keep a lot of unused code in your examples and name functions "makeTTL", "makeTLnew", "makeTRnew1"... it's not very readable for someone else, and it might also lead you to make mistakes inadvertently...)

 

To be honest, I think maybe it would be wiser for you to go for a simpler concept for now. What you're trying to achieve is doable, but it will require a lot of trial-and-error and head-scratching, even for someone who's experienced in working with GSAP or making games – here the challenge is not knowing the tools but finding a logical and reliable way to use them. If you want to persevere on this, go for it, and I can provide more help and advice, but at this point I'm not sure what more I can say next to help you out; you know how to use GSAP, now you need to figure out the maths, and I don't have the time or energy to do that for you. (Unless you can compensate me for it.)

Link to comment
Share on other sites

Hi Acccent

Can you look in my example

I have changed your example.
And almost everything is fine, but I only have a problem with the ball C.
If you click 1, the big wheel turns to the left, but the C ball does not rotate by 90 degrees at the next click 1 it's already ok, the ball rotates 90 degrees. Can you help me improve this or what I need to do to rotate the sphere C?

See the Pen PRwrWx by lisartur (@lisartur) on CodePen

 

Link to comment
Share on other sites

Hi lisartur :)

 

I appreciate that you are really trying to get this to work but I must go back to what I said above and suggest that you go for simpler things first. There's a lot of things in your codepen that show you still have a lot to learn about Javascript in general, for instance all the lines like 

top = S(isLeft ? '.LA' : '.LA')[0]

that really don't make much sense and could just be replaced with

top = S('.LA')[0]

 

It makes me wonder how much of the initial example you actually understood, vs. how much you are just copying hoping that it will somehow work.

 

In your latest codepen, you have this part:

if (ff==false) {
	TweenLite.set(S('.LC')[0], {y: 100});
	TweenLite.set(S('.LC')[0], {rotation: 0, transformOrigin: '-100% 0%'});
}

which is called in your makeTL function, but ff is only ever false once – the first time you call that function – and then stays true forever. So why is that code even in the function, and not just before it? This is why you see C being a bit jumpy – you don't position it properly at the start, and then try to fix the bad positioning with a one-time adjustment. But like I explained above, if you change the transform origin of an element that's already been rotated it will appear to move somewhere else.

 

All of this is a matter of 1) understanding Javascript, and 2) figuring out the logic behind what you want to achieve. It isn't a matter of understanding GSAP; we've moved away from GSAP-related questions for a while now, and are just talking about general programming. This forum isn't the place for that and I don't have more time to dedicate to it. If you do figure out exactly how to get it to work "in theory" but can't find the GSAP methods to do it, then we'll be here to help you out with those.

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