Tweening help

[fabio96 1 Likes (Newbie)]

I would like to use tweening otherwise. 

I wish that instead of going straight ahead, move to other positions, down, diagonally. 

 

I am a student of 12th grade, I would have a different design than usual and so I would use greenscok, but do not know how you do what I said earlier. 

 

I would appreciate if someone would help.

 

 

i am working 

See the Pen dgmia by GreenSock (@GreenSock) on CodePen

[Carl 11,180 Likes (Superhero)]

Sure, to move down diagonally you would just change the left and top position at the same time like here:

http://codepen.io/GreenSock/pen/ILuDq

[fabio96 1 Likes (Newbie)]

Another question.

 

How can I make multiple drives simultaneously. 

3 images such as moving forward.

 

Thank you for your help. 

[Carl 11,180 Likes (Superhero)]

I don't know if I understand you properly, but this is how you can animate 3 things at once:

http://codepen.io/GreenSock/pen/GKpDo

[fabio96 1 Likes (Newbie)]

I want to do something like this. but is not working

 

 

TweenLite.to("#logo1", 1, {left:"632px",top:50px});

TweenLite.to("#logo2", 2, {left:"532px",top:100px});

TweenLite.to("#logo3", 3, {left:"432px",top:200px});

[Rodrigo 5,435 Likes (Superhero)]

Hi,

 

When you include the units in the tween vars, like you're doing right now, it has to be passed as a string, like this:

TweenLite.to("#logo1", 1, {left:"632px",top:"50px"});
TweenLite.to("#logo2", 2, {left:"532px",top:"100px"});
TweenLite.to("#logo3", 3, {left:"432px",top:"200px"});

Otherwise you just pass the value without any unit suffix. Be careful though, if you want to tween a unit different than pixels, because the CSS plugin treats unitless numbers as pixels. This code should have the exact same effect:

TweenLite.to("#logo1", 1, {left:632,top:50});
TweenLite.to("#logo2", 2, {left:532,top:100});
TweenLite.to("#logo3", 3, {left:432,top:200});

For percentages: top:"50%"

For em: top:"2em"

For pixels: top:"100px" or top:100

 

And so forth.

 

Rodrigo.

[fabio96 1 Likes (Newbie)]

Thank you Rodrigo. 

 

Now works.. 

 

I had a 17 in the presentation of my work

 

More questions for Monday

[fabio96 1 Likes (Newbie)]

How can I make 3 moves with Relative Tweens 

See the Pen BLajh by GreenSock (@GreenSock) on CodePen

TweenLite.to(logo, 0.5, {left:"+=100px",top:"200px"}); Like this, but three times

 

1-Rises 

2-Down 

3-Rises

[Carl 11,180 Likes (Superhero)]

Sounds like a TweeMax repeating tween will do the trick:

 

http://codepen.io/GreenSock/pen/qsyfF

[fabio96 1 Likes (Newbie)]

Not so. 

I'm trying to make the move 3 players in 3 frames. 

As a tactical football

[Carl 11,180 Likes (Superhero)]

I think there might be some translation issues here. 

Its difficult to guess what you are trying to do without better explanations.

 

"3 players in 3 frames" and "tactical football" are not terms I'm familiar with. 

 

Please feel free to provide a simple example of your code so that we can better understand what you are working with and what needs to happen. It might help if you provide a storyboard which depicts where things are a certain points in time too.

[fabio96 1 Likes (Newbie)]

I wanted something that genre, but I'm a bit new to be able to do without help

 

http://i.imgur.com/euDgZUB.png

[Carl 11,180 Likes (Superhero)]

Ok, that helps. 

For something like that I would recommend our sequencing tool TimelineLite 

http://codepen.io/GreenSock/pen/kaeiq

 

Learn more about sequencing here:

http://www.greensock.com/sequence-video/

 

 

Docs:

http://api.greensock.com/js/com/greensock/TimelineLite.html

[Rodrigo 5,435 Likes (Superhero)]

Ha!!! Carl's way faster than I am... I guess is true what they say about a New York minute 

 

Well basically what Carl said, but without the pause:

 

See the Pen dKrgE by rhernando (@rhernando) on CodePen

[fabio96 1 Likes (Newbie)]

Ty , GooD Help

[fabio96 1 Likes (Newbie)]

I like to read a php file with all the data. 
It was easier for me. 
The php file should have something like
 

//start 3 tweens at the same time
tl.to("#logo1", 1, {left:"200px", top:"+=60"}, 0)
  .to("#logo2", 1, {left:"200px", top:"-=60"}, 0)
  .to("#logo3", 1, {left:"200px"}, 0)
 
//add a label where frame3 animation will start 1 second later
.add("frame3", "+=2")
 
//add 3 more tweens at the frame3 label
.to("#logo1", 1, {left:"400px", top:"-=60"}, "frame3")
.to("#logo2", 1, {left:"400px", top:"+=120"}, "frame3")
.to("#logo3", 1, {left:"400px", top:"-=60"}, "frame3")

[Jonathan 5,392 Likes (Superhero)]

Hello fabio96.. Do you mean you want to convert that JS code into concatenated php string ? .. and have php build the JS tweens in php and then output to js or script tag ?

[fabio96 1 Likes (Newbie)]

I just want the positions (top, left etc.) in php

[Jonathan 5,392 Likes (Superhero)]

Are you just including the php in the page? .. or are you making an ajax request to fetch the positions object literal in the php via ajax using json?

 

Do you just want a php block on the page with the positions (left, top, etc), and then echo or print the values in the javascript?

 

If so, try this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
#logo1{
   width:100px;
   height:100px;
   position:absolute;
   background:#CCC;
   top:0px;
   left:0px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
</head>

<body>
<div id="logo1"></div>

<?php
$positions = array(
        "top" => "60px",
        "left" => "200px"
);

// echo $positions["top"];
// echo $positions["left"];
?>

<script>
TweenMax.to("#logo1", 1, {
          left: "<?php echo $positions["left"]; ?>",
          top: "+=<?php echo $positions["top"]; ?>"
}, 0);
</script>

</body>
</html>

Im still confused on what your trying to do! If the above doesn't help.. can you please clarify

[fabio96 1 Likes (Newbie)]

See the Pen kaeiq by GreenSock (@GreenSock) on CodePen

 

http://imgur.com/LornSER -->When I click the "1 tactic" button the program does that tactic. 

When I click the "tactic 2" was another tactic .. 

I just can not connect the buttons to move

[Rodrigo 5,435 Likes (Superhero)]

Hi Fabio,

 

We need to see a live reduced sample. Unfortunately is impossible to help by just looking at an image and what you mention about two different tactics.

 

Please fork that codepen and post one of your own that help us identify the issue.

 

Rodrigo.

[fabio96 1 Likes (Newbie)]

See the Pen kaeiq by GreenSock (@GreenSock) on CodePen

 

I just want that when I click the button 1, they do a certain movement. 

When I click the button 2, clean everything and make another move. 

 

Both with 3 objects

[Rodrigo 5,435 Likes (Superhero)]

Hi,

 

What I meant is that you have to fork that codepen and add whatever code you already have to it in order to see what's your issue. You mention buttons clicks, but in that codepen there are no buttons and has only one timeline.

 

Next time please put your best effort in creating a base so we can edit and play with it in order to see the issue.

 

Anyway I believe that you're after something like this:

 

See the Pen dKrgE by rhernando (@rhernando) on CodePen

 

If not, please fork and adapt it to your scenario in order to identify the issue.

 

Rodrigo.

[fabio96 1 Likes (Newbie)]

Rodrigo are an angel. It was really what I wanted to do .. 

Thank you very much

[fabio96 1 Likes (Newbie)]

See the Pen wDrue by anon (@anon) on CodePen

 

I want an object whose name is "bola" that moves to the side of another object