[tweenFromTo not working]

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
 

 

 

[tweenFromTo not working]

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

 

[tweenFromTo not working]

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