Jump to content
Search Community

tweenFromTo not working

xhostar 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 everyone,


I am newbie in gsap and I am still trying to assimilate all the basic concepts, sorry.

For example, I am very confused with "tweenFromTo" method using labels.


Starting from this example: https://greensock.com/jump-start-js#timelinelite-labels


tl.add("skew") // adds a new label
  .add(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end
  .add(getStaggerAnimation(), "stagger") //creates new label and adds animation there
  .add(getParticlesAnimation(), "particles");

tl.play('skew'); // this play from skew to the end... ok
tl.play('stagger'); // this play from stagger to the end... ok
tl.play('particles'); // this play particles and finish

tl.tweenFromTo('skew','particles'); // Why does nothing happen when you execute this method?

I can understand why last line of code does nothing.




According to the documentation... timeline should execute from skew to particles (excluded), but nothing happens.


See the Pen LdYory by xhostar (@xhostar) on CodePen

Link to comment
Share on other sites

Thank you Sahil... that happens to me for not paying attention, sorry.

Another question that I do not understand is in this codepen.


Why "play(page3)" and "tweenFromTo(3,5)" buttons are showing first and fastly page1 and page2? I think that both pages should remain hidden and the animation should start from page3 (to finish for the first button) and from page3 to page4 (with last one).


what am I doing wrong? thanks...


See the Pen yKyLjg by xhostar (@xhostar) on CodePen


  • Like 1
Link to comment
Share on other sites

Well it's okay, we all miss something obvious.


The reason it shows up is because you are working with entire timeline so when you play from certain label entire timeline jumps to that point and it will affect all elements as if timeline had played to that point. Unfortunately I don't think there is way to prevent this behavior. I mean what if you have overlapping tweens? What should timeline do? It creates this complexity. You might want to take some different approach.


Can you give us more details about what you are trying to do? so we can suggest accordingly.

  • Like 1
Link to comment
Share on other sites

No doubt I have a serious problem of concept.

I thought that you can create a long animation full of steps and then, go executing parts of it (like the ancients heads of music tape) ignoring the rest.
In such a way that if you need to stop the execution, you can do it at once by calling pause() once (because you only have an unique timeline).

What I want to do is a "page transition" component with ajax/xhr load content and, for example, a fade effect between the old and new content.

New content does not exist at the beginning, obviously (another thing to keep in mind when creating tweens).

Something like this:


var newContent;
var transition = new TimelineMax({paused:true}); // <- paused at beginning
  .add(someDomSettings(), "someDomSettings")
  .add(hideOldContent(), "hideOldContent")
  .add(showNewContent(), "showNewContent")
  .add(finishAnimation(), "finishAnimation")
function someDomSettings() { /* adding classes to body, etcetera... */ }
function hideOldContent() { /* opacity 0 for the old content... */ }
function showNewContent() {
  var tl = new TimelineLite();
  tl.to(newContent, 1, {opacity:1});
  return tl;
/* function that gets new content via ajax/xhr... */
function getNewAjaxContent() {
  Promise.resolve($.ajax('/new-content')).then(function(content) {
    newContent = content;

// and finally, to do something like this...

  getNewAjaxContent,  // retrieving new content through xhr/ajax...
  transition.tweenFromTo("someDomSettings","showNewContent"); // this will execute someDomSettings and hideOldContent...
]).then(function() {
  transition.play("showNewContent"); // finish transition executing showNewContent and finishAnimation...


this is a simple example, I am aware of the complexity of the whole process, but I intended to use gsap more or less as explained above



Link to comment
Share on other sites

As far as I can imagine you just need to worry about current content and new content without worrying about other pages. You can write your timelines by using functions and feed your new content to it to perform transitions. Following tutorials show how you can create complex timelines using functions, which you can reuse by passing parameters.




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