tweenFromTo not working

[xhostar]

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.

 

https://greensock.com/docs/TimelineMax/tweenFromTo()

 

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

 

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

[Sahil]

You are using TimelineLite, use TimelineMax instead while defining your timeline.

[xhostar]

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

 

[Sahil]

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.

[xhostar]

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

Promise.all([
  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
 

 

 

[Sahil]

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.