Jump to content
Search Community

TimelineMax.to >>> insert TweenMax

Thomas James Thorstensson test
Moderator Tag

Go to solution Solved by Thomas James Thorstensson,

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

Good  evening,

 

Curious, the documentation for TimelineMax.to says

 

.to( target:Object, duration:Number, vars:Object, position:* ) : *

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

 

- But what if I instead wanted a TweenMax.to() added ? Is there  way to still use to.() instead of doing :

 

TimelineMax.add(TweenMax etc.

 

Have a good one   ^_^

 

.t

Link to comment
Share on other sites

Hello Snoop, and Welcome to the GreenSock Forum!

 

The GSAP add() method is best used when adding child timelines to a master timeline. That does not mean you cant use it that way.

 

Here is great video tut explaining how to sequence tweens using TweenMax and then converting those TweenMax tweens to a timeline using TimelineMax:

 

 

Also here is a great quick start guide called that GSAP Jump Start Playground:

 

https://greensock.com/jump-start-js

 

To better help you, if you can provide a reduced codepen example of what your trying, with your code we can better help you.

 

 

and some other helpful GSAP videos on GreenSock YouTube channel:

 

https://www.youtube.com/user/GreenSockLearning/videos

 

:)

Link to comment
Share on other sites

Hello 

 

 

Albeit I thank you for the links I have them already as I used greensock since the days this site was created:) My confusion is only regarding specific topics.

 

I only have one question, so if you instead could adress that please.

 

I only wondered if there is some flag that you can set so that instead of as below (which is from the api documentation), .to by default will add a TweenMax instance. I am chainging many things with to but some of the things I am doing require TweenMax.

 

So my question again then as it is simple. The below is from the documentation. And I wonder if it as said above could Add a TweenMax.to() instead.

 

.to( target:Object, duration:Number, vars:Object, position:* ) : *

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

 

 

 

Thanks,

 

.t

Link to comment
Share on other sites

Sorry for the confusion. So you said this:
 

 

- But what if I instead wanted a TweenMax.to() added ? Is there  way to still use to.() instead of doing :

TimelineMax.add(TweenMax etc.

 

 

and if i understand your questions the answer is Yes.

 

There really isn't any flag you can set, but you can use any type of tween, like TweenLite.to() or TweenMax.to() in there, it just depends what you want and are trying to do.

 

But as i said above your better off setting up your tweens or timeline without the add() method and just sequence or chain them without add() unlees your adding child tweens to a master timeline.

 

Just so there no further confusion can you post the full tween you want to write, so we can see it in its full context. I just want to make sure we fully understand your question.

 

Thanks :)

  • Like 1
Link to comment
Share on other sites

Hi Snoop,

 

Users wanted to be able to use timeline.to() with repeats so the TimelineLite and TimelineMax convenience methods (to(), from(), fromTo(), etc) now will add a TweenMax tween if the tween has a repeat property AND TweenMax is present. (see source code)

 

notice how the to() tween repeats:

http://codepen.io/GreenSock/pen/XKGazg?editors=0010

 

var tl = new TimelineLite();


tl.to(".green", 1, {x:200, repeat:2, yoyo:true});
// same as tl.add(TweenMax.to(".green", 1, {x:200, repeat:2, yoyo:true}))

Does that clear things up?

 

 

 

 

 

If for some reason you need to add a TweenMax tween that does not repeat, then you will need to use 

timeline.add(TweenMax.to(...))
Link to comment
Share on other sites

  • Solution

Hello Carl,

 

 

Snoop here. Yippii. This answers what I was trying to do  :-P  :-P  :-P  :-P  :-P  :-P  :-P  :-P

 

Seeing clearly now again!

 

It seems to me I can just use repeat on some little something with 0 time just to set it to tween max. And then go about my business!!!

 

Thanks. See you around.

 

.s

 

 

 

Hi Snoop,

 

Users wanted to be able to use timeline.to() with repeats so the TimelineLite and TimelineMax convenience methods (to(), from(), fromTo(), etc) now will add a TweenMax tween if the tween has a repeat property AND TweenMax is present. (see source code)

 

notice how the to() tween repeats:

See the Pen XKGazg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

var tl = new TimelineLite();


tl.to(".green", 1, {x:200, repeat:2, yoyo:true});
// same as tl.add(TweenMax.to(".green", 1, {x:200, repeat:2, yoyo:true}))

Does that clear things up?

 

 

 

 

 

If for some reason you need to add a TweenMax tween that does not repeat, then you will need to use 

timeline.add(TweenMax.to(...))
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...