Jump to content
Search Community

On Complete play new timeline

Jayson 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

Hey, can anyone help me I want tl to play after start is finished but I just don't know the syntax thank you so much!! 

 

  var start = new TimelineMax();
      var tl = new TimelineMax({paused: true, repeat:2});

      start.add("start",0);
      start.add("fade1",2.5);

      tl.add("fade2",0);
      tl.add("fade3",2.5);
      tl.add("fade4",5);


      start.to("#white-cover", 0.5, {
        opacity: 0,
        ease: Power0.easeNone
      }, "start")
      .to("#asset-img1", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade1")
      .to("#asset-img2", 0.5, {
        left:0,
        opacity: 1,
        ease: Power0.easeNone}, "fade1")
      .to({}, 2.5, {})


      tl.to("#asset-img2", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img3", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img1", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img1", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img3", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img2", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img2", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade4").
      to("#asset-img3", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade4").
      to("#asset-img1", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade4")

    }

 

Link to comment
Share on other sites

There are many ways actually...

//after you build out both timelines, simply add tl to start (by default it'll be placed at the end):
start.add(tl);

//or you could add a delay to tl: 
tl.delay(start.duration()); 

//or you could pause tl initially and use an onComplete:
start.eventCallback("onComplete", function() {
  tl.play(0);
});

//or you could drop them both into a master timeline, sequenced:
var master = new TimelineLite();
master.add(start).add(tl);

 

There are a few other options but I don't want to overwhelm you ;)

 

Does that help?

  • Like 3
Link to comment
Share on other sites

If your goal is to sequence several timelines, I personally think it's much cleaner to go with option 1 or 4 because you it gives you a centralized place for control. When you string things together with callbacks, there's no way to really scrub back and forth through the whole sequence or check the overall progress of everything, etc. I mean, it's totally fine to do callbacks if you prefer - I just don't think it's as elegant personally. You can't really reverse everything either (well, you could, but it's a lot more cumbersome). 

 

I would STRONGLY recommend reading this article: 

https://css-tricks.com/writing-smarter-animation-code/

 

To answer your question, here's more pseudo code:

//reminder: I personally don't recommend this strategy, as I think it's usually cleaner to nest timelines

var tl1 = new TimelineLite();
tl1.to(...); //add whatever animations.

var tl2 = new TimelineLite({paused:true});
tl2.to(...); //add whatever animations

var tl3 = new TimelineLite({paused:true});
tl3.to(...); //add whatever animations;

//when tl1 is done, play tl2
tl1.eventCallback("onComplete", function() {
  tl2.play(0);
});

//when tl2 is done, play tl3
tl2.eventCallback("onComplete", function() {
  tl3.play(0);
});

 

Here's my recommended approach:

var tl1 = new TimelineLite();
tl1.to(...); //add whatever animations.

var tl2 = new TimelineLite();
tl2.to(...); //add whatever animations

var tl3 = new TimelineLite();
tl3.to(...); //add whatever animations;
       
var master = new TimelineLite();
master.add(tl1).add(tl2).add(tl3);

//now you can control everything with master!

//jump to the middle of the entire sequence, for example
master.progress(0.5);

 

Happy tweening!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 11 months later...

Hi, how to do it in gsap3.

 

this don`t work :(

 

var tl1 = gsap.timeline();
tl1.to(...); //add whatever animations.

var tl2 = gsap.timeline();
tl2.to(...); //add whatever animations

var tl3 = gsap.timeline();
tl3.to(...); //add whatever animations;
       
var master = gsap.timeline();
master.add(tl1).add(tl2).add(tl3);

//now you can control everything with master!

//jump to the middle of the entire sequence, for example
master.progress(0.5);

 

Link to comment
Share on other sites

Hi, how to do it in gsap3.

 

this don`t work :(

 

var tl1 = gsap.timeline();
tl1.to(...); //add whatever animations.

var tl2 = gsap.timeline();
tl2.to(...); //add whatever animations

var tl3 = gsap.timeline();
tl3.to(...); //add whatever animations;
       
var master = gsap.timeline();
master.add(tl1).add(tl2).add(tl3);

//now you can control everything with master!

//jump to the middle of the entire sequence, for example
master.progress(0.5);

i have:

const 	longTime = .6,
		time = .3,
		shortTime = .15,
		longOverlap = '-=0.6',
		overlap = '-=0.3',
		shotOverlap = '-=0.15',
		easeingInOut = 'circ.easeInOut',
		easeingOut = 'circ.easeOut',
		easeingIn = 'circ.easeIn',
		popUpEase = 'elastic.out(1.5, 1)'
		;

slideAnim[1] = gsap	.timeline() // slider no.1
.to('.tv', {duration: longTime, y: '-=55vh', ease: easeingInOut})
.to('.header', {duration: longTime, y: '-=102%', opacity:0, ease: easeingInOut}, overlap)
.to('.container.-hero', {duration: longTime, opacity: 0, ease: easeingInOut}, 0)
.set('.swiper-wrapper', {zIndex:'6'})
.to('.darknes', {duration: longTime, opacity:.4 ,ease: easeingInOut})
.fromTo('.container.-chatbot', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1}, overlap)
					.pause();


slideAnim[2] = gsap	.timeline() // slider no.1 
.to('.container.-chatbot', {duration:time, opacity:0 , ease: easeingInOut})
.fromTo('.container.-ready', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1})					
.pause();


let master = gsap.timeline();
master.add(slideAnim[1]).add(slideAnim[2]);


				
master.play();

 

 

on console.log(master) i have:

Timeline {vars: {…}, _tDur: 0, _dur: 0, _delay: 0, _repeat: 0, …}

 

Please, help me :) 

Link to comment
Share on other sites

(same person, on to accounts :)
Is complicated, it is quite long code. It is page o swiper and I wrote separate animations to change all slide. When i going forward I'm using slideAnim[x].play(), when going back slideAnim[x].reverse(). I have 13 steps. It's working perfect when I moving one step, between slides. Now I'm traying make animations for step n slides. 

 

I have some basic function for this:

function handleAnimations(previusSlide, activeSlide) {

	console.log('f: handleAnimations');	

	if (activeSlide > previusSlide) {

		console.log('active -> ' + activeSlide);
		console.log('previus -> ' + previusSlide);

		if (activeSlide - previusSlide === 1) {
		
			slideAnim[activeSlide].play();
			mySwiper.allowSlideNext = false;

			setTimeout(() => {
		
				mySwiper.allowSlideNext = true;
				previusTransitionTime = nextTransitionTime;
				nextTransitionTime = slideAnim[activeSlide].duration() * 1000 + 100;
				console.log(`transition ${previusSlide} -> ${activeSlide} took ${nextTransitionTime / 1000}s`);
		
			}, nextTransitionTime);
		} else {

			/// work evemple 0 -> 2

			if ((activeSlide === 2) && (previusSlide === 0)) {

				console.log('test handling');

				let master = gsap.timeline();
				master.add(slideAnim[1], 0).add(slideAnim[2], 0);

				console.log(master);
				console.log(slideAnim[1]);
				
				master.play();

			} else

			console.log('handle me down');

		}

	} else {

		console.log(previusSlide - activeSlide);

		if (previusSlide - activeSlide === 1) {

			slideAnim[previusSlide].reverse();
			mySwiper.allowSlidePrev = false;

			setTimeout(() => {
		
				mySwiper.allowSlidePrev = true;
				nextTransitionTime = previusTransitionTime;	
				previusTransitionTime = slideAnim[previusSlide].duration() * 1000 + 100;
				console.log(`transition ${activeSlide} -> ${previusSlide} took ${previusTransitionTime / 1000}s`);
		
			}, previusTransitionTime);
		} else {

			console.log('handle me up');
		}
	}
}

(there is to blocking swiper for time of animations)

 

from:

console.log(master);
console.log(slideAnim[1]);

 

I have:

1798744254_Screenshot2019-11-28at15_43_19.thumb.png.2d5e256d96a89d0542b77288358447a0.png

 

So in function console.log(slideAnim[1]) is visible and it have 1.7s (second 0.9) and master animation have duration 0. It's starts and finish at  17.611? <- that strange.

 

 

 

Link to comment
Share on other sites

36 minutes ago, Page Tailoring said:

I have done this like this:

 

Using setTimeout for animations is always a bad idea. It will still run if you change tabs, but your animations won't.

 

The best way to get a meaningful response is to post a demo. Then it would have been easy to spot that the problem is you are adding paused timelines.

 

// BAD
var tl1 = gsap.timeline()
  .to("#box1", { x: 100 })
  .pause();

var tl2 = gsap.timeline()
  .to("#box2", { x: 100 })
  .pause();

var master = gsap.timeline()
  .add(tl1)
  .add(tl2)
  .progress(0.5);

// GOOD
var tl1 = gsap.timeline()
  .to("#box1", { x: 100 });

var tl2 = gsap.timeline()
  .to("#box2", { x: 100 });

var master = gsap.timeline()
  .add(tl1)
  .add(tl2)
  .progress(0.5);

 

 

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