Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jayson

On Complete play new timeline

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")

    }

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

this is amazing can you explain to me the third option in more depth please as this is how I want to do it but I'm not exactly sure how to implement it as I want to add another timeline after tl

Share this post


Link to post
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

Share this post


Link to post
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);

 

Share this post


Link to post
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 :) 

Share this post


Link to post
Share on other sites
2 hours ago, Movecloser said:

this don`t work :(

Hey Movecloser and welcome to the forums. That code looks like it should work for me. Can you please create a minimal demo of your issue? This thread talks about how to do so:

 Same thing to you @Page Tailoring.

Share this post


Link to post
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.

 

 

 

Share this post


Link to post
Share on other sites

We can't help blindly. Please create a minimal demo like I asked if you're wanting aid:

 

  • Like 1

Share this post


Link to post
Share on other sites

I have done this like this:

 

slideAnim[1].timeScale(2).play();
setTimeout(() => {slideAnim[2].timeScale(2).play();}, slideAnim[1].duration() * 0.5 * 1000);

 

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

I know that demo is best, but it takes time :( especially with such an extensive project.

 

Thank You for help.

Share this post


Link to post
Share on other sites
1 minute ago, Page Tailoring said:

I know that demo is best, but it takes time :( especially with such an extensive project.

 

We don't want to see your project, just the problem. The less the code the better. 😉

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×