Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
oxhsun

target's position changed after forloop

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

Hello , Im new to GreenSock fourm . the question is I have a target using Timeline in forloop and the target's position changed to where the first loop started .

I want it to be the same position to go . How can i fix it ?

Any help would be appreciated . thanks !

 

			
			let tl = new TimelineLite()
            for (let i = 0; i < this.restoreInnerStone.length; i++) {
              
                tl.from(".stoneDestination", 1, {
                  left: this.restoreInnerStone[i].xx,
                  top: this.restoreInnerStone[i].yy,
                  
                });

 

Edited by oxhsun
problem changed
Link to comment
Share on other sites

Hi oxhsun,

 

Welcome to the forums!

 

I am afraid I do not understand what is it that you are asking.

 

You have a for loop, where you setting a bunch of positions for your ".stoneDestination". And then you want it to do what? I can't make sense of the bellow:

 

1 hour ago, oxhsun said:

I want it to be the same position to go .

 

Link to comment
Share on other sites

Hello Dipscom , 

Thanks for your kind replying  and sorry for my bad description of the question .

 

what I mean is the for example '.stoneDestination' element's css is ( left : 100 and top : 100 ) . After first loop and Timeline.from() , 

'.stoneDestination' 's  css is set to (for example left : 200 and top : 200 ) due to the logic inside my tl.fromTo(). But I want css is still ( left : 100 and top : 100 )

 

 

 

 

I also found it solved by using Timeline.fromTo method , but the '.stoneDestination' moves one by one . Is there any way to make them move at the same time ?

 

Thanks .

Link to comment
Share on other sites

Is there any chance you can put a reduced code example? I'm stilll fuzzy on what is the end result that you are trying to achive.

 

This is a handy explanation in case you haven't seen:

 

Is '.stoneDestination' one element? Several elements?

 

7 minutes ago, oxhsun said:

[...]but the '.stoneDestination' moves one by one . Is there any way to make them move at the same time ?

 

Who is 'them' in the above sentence?

 

I am pretty sure we can work this out, we just need to get the correct picture you're trying to paint here.

  • Like 2
Link to comment
Share on other sites

Hello Dipscom , 

 

Sorry for late reply , 

here is codePen 

See the Pen ywEvwJ?editors=1111 by ben790924 (@ben790924) on CodePen

 

what if I want all the red boxes to show up at the same time . 

How can I do that inside a forLoop ?

 

Thanks again =))

Link to comment
Share on other sites

Hi @oxhsun,

 

Now things are getting much clearer. And I have already some suggestions.

 

First I have to make some assumptions. One is that you want several boxes. In your example, you have a single box so, you need to create many more boxes otherwise, there is no way to have "all the red boxes" show up at the same time.

 

(Technically, you have all the red boxes showing up as is, given that you have a single box in your HTML).

 

With that in mind. You have to your your for loop to duplicate the current red box you have and then, make sure all duplicated boxes go somewhere different.

 

See the Pen ZPRZQM by dipscom (@dipscom) on CodePen

 

Note that I changed your code a bit as it's more performant to animate transform properties (x,y) than it is to animate left and top CSS properties.

 

Does that help?

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

Thanks a lot !! You truly are a Super Hero =DD

 

Now Ive learned a new method you are teaching me  !

 

It feels great to learn new things ~

 

Thank you Dipscom !

 

Have a nice Day ! :)

  • Like 2
Link to comment
Share on other sites

Happy to help!

 

Learn much and come back to teach others :D

 

That is also a super nice feeling. ;)

 

  • Like 4
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.
×