Jump to content
GreenSock

fabio96

Tweening help

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

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


Link to comment
Share on other sites

Another question.

 

How can I make multiple drives simultaneously. 
3 images such as moving forward.
 
Thank you for your help. 
Link to comment
Share on other sites

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});
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Thank you Rodrigo. 

 

Now works.. 

 

I had a 17 in the presentation of my work

 

More questions for Monday :D

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Not so. 

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

As a tactical football

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Well basically what Carl said, but without the pause:

 

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

  • Like 2
Link to comment
Share on other sites

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")

Link to comment
Share on other sites

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 ?

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Thank you very much

  • Like 1
Link to comment
Share on other sites

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

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