Jump to content
Search Community

Tweening help

fabio96 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

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



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.



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

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

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>
<meta charset="utf-8">
<title>Untitled Document</title>


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

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

$positions = array(
        "top" => "60px",
        "left" => "200px"

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

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


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.



  • Like 2
Link to comment
Share on other sites



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.



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