Jump to content
Search Community

First try, unexpected behaviour?

Wargasmic 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

Hi,

 

I've just came accross GS and decided to move over to it from Transit.

 

For my first attempt I have tried something simple but the behaviour I expected isn't the behaviour I get. I'm not sure if I'm missing something. Here's the code...

var tl = new TimelineMax({paused:false});
tl.insert( TweenMax.to($('#test'), 1, { left: "500px", ease: Linear.easeNone }, 0) );
tl.insert( TweenMax.to($('#test'), 0.5, { rotation: 90, ease: Linear.easeNone }, 0.5) );
tl.play();

I expected this to slide the element right by 500 pixels over 1 second while at 0.5 seconds start rotating to 90 degrees over 0.5 seconds but what I get is both tweens starting instantly so the element starts sliding and rotating at the same time. Eveything else seems fine, the duration of the rotation is correct, it is just starting at 0 instead of 0.5.

 

Did I do something wrong?

 

Cheers!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

It appears you posted in the ActionScript forums by mistake (i moved your post). No worries.

 

The reason why your animation wasn't working properly was because you were placing the insertion timeOrLabel parameter in the wrong spot.

 

BAD

tl.insert( TweenMax.to($('#test'), 0.5, { rotation: 90, ease: Linear.easeNone }, 0.5) );

GOOD

tl.insert( TweenMax.to($('#test'), 0.5, { rotation: 90, ease: Linear.easeNone }), 0.5 );

 

Although not the reason for things not working, it seems you are using a very old syntax from the ActionScript days. Perhaps you got into the wrong docs. Regardless, you can do the same thing with MUCH less code:

 

var tl = new TimelineMax({paused:false});
tl.to('#test', 1, { left: "500px", ease: Linear.easeNone })
  .to($('#test'), 0.5, { rotation: 90, ease: Linear.easeNone}, 0.5); //tween starts at an absolute time of 0.5 seconds

http://codepen.io/GreenSock/pen/cnDEz?editors=001

 

The old methods: append(), insert(), insertMultiple(), appendMultiple() have been replaced by much more concise and flexible methods like to(), from(), staggerFrom(), staggerFromTo() and more.

 

Start by watching this video: http://www.greensock.com/sequence-video/

 

Definiely read the JS docs for TimelineLite. If you read up on the to() method you will get a good sense of how the other methods work.

 

As you get familiar with the API, definitely experiment with using CodePen. It makes it easy for you to get real-time results and when you run into trouble you can easily share your work with us: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

 

  • Like 4
Link to comment
Share on other sites

Hi thanks for the reply. I actually thought I was going crazy as I came to have a look at my post to see if anyone had replied and saw I had posted it in the AS forum by mistake. So I edited the post apologising and saying it was meant for the JS forum. Then on reviewing the post it  was in the JS forum.....so I thought I had made a second mistake and removed the edit. It must have been moved as I made the edit :).

 

I did read some more after posting and managed to get things working. I'm loving the API, it is exactly what I needed. Wish I'd have found it before Transit, it would have made things a hell of a lot easier.

 

Thanks again!

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