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

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

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.