Jump to content
GreenSock

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

How to start function after .to(); has finished?

Go to solution Solved by Carl,

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

I need to play HTML5 video in one of the timeline tasks. Something like this:

<video class="video">
    <source src="video.mp4" type="video/mp4">
</video>
tl1.to('.video', 1, { opacity: 1, ease: Power4.easeIn}) // fade in video
   .to('.video', 0, { play video }) // than play video
   .to('.video', 1, { opacity: 0, ease: Power4.easeOut}) // wait for video to finish, than fade-out

Is it possible?

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

You need to do a few things

 

  1. pause the timeline with addPause()
  2. call a function that starts your video. addPause() has a callback parameter (woohoo)
  3. detect when your video is done playing and tell the timeline to resume().

For the first two:

 

tl1.to('.video', 1, { opacity: 1, ease: Power4.easeIn}) // fade in video
   .addPause("+=0", playMyVideo)
   .to('.video', 1, { opacity: 0, ease: Power4.easeOut}) // wait for video to finish, than fade-out


function playMyVideo() {
  //myVideo.play() or whatever
}

check out the docs for addPause() here: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/

  • Like 3
Link to comment
Share on other sites

Thank You Carl!

 

Do you maybe know why I have a problem with running this playVideo function twice at the same time?

I have two videos during the timeline, and when first should start - both are starting. 

 

playVideo() function looks like this:

function playVideo(element){
    var video = $('' + element);
    video.get(0).play();
    video.bind("ended", function() {
        console.log('video ' + element + ' ended') // just to see which videos has ended
        tl1.resume();
    });
    video.bind("play", function() {
       console.log('video ' + element + ' played') // just to see which videos are playing
    });
}

and the timeline looks like this:

 

tl1.to('.video1', 1,             { opacity: 1, ease: Power3.easeIn}) // fade in video1
   .addPause("+=0", playVideo('.video1')) // pause, play video 1, after video has finished, resume
   .to('.video1', 1,             { opacity: 0, ease: Power3.easeIn})

   // zoom in/out first
   .to('.first', .75,         { scale: 3, top: 135, right: 120, ease: Bounce.easeOut }, "-=.20") // 1st element zoom in
   .to('.first', .75,         { scale: 1, top: 0, right: 0, ease: Power4.easeIn}, "+=2.5")     // 1st element zoom out

   // zoom in/out second
   .to('.second', .75,         { scale: 4, top: 202, left: 60, ease: Power3.easeIn}, "-=.20")  // 2nd element zoom in
   .to('.second', .75,         { scale: 1, top: 0, left: 0, ease: Power4.easeIn}, "+=2.5")      // 2nd element zoom out

   // play video
   .to('.video2', 2,             { opacity: 1, ease: Power4.easeIn}, "+=.6")  // fade in video2
   .addPause("+=0", playVideo('.video2')) // pause, play video, resume timeline

    // zoom in/out third
   .to('.third', .75,         { scale: 4, top: 202, left: 60, ease: Power3.easeIn}, "-=.20")  // 3rd element zoom in
   .to('.third', .75,         { scale: 1, top: 0, left: 0, ease: Power4.easeIn}, "+=2.5")   //3d element zoom out

and this is the basic html5 video markup:
 

<video class="video video1" muted>
    <source src="videos/video1.mp4" type="video/mp4">
</video>
<video class="video video2" muted>
    <source src="videos/video2.mp4" type="video/mp4">
</video>

 
and I'm getting this in the console:

KBGrhwE.png

Link to comment
Share on other sites

Thanks for the code.

 

when you write playVideo('.video1') with the parenthesis () you are telling that code to execute immediately.

 

Note my first example used playVideo, not playVideo().

 

If you are passing parameters to playVideo then you would use an Array like this

.addPause("+=0", playMyVideo, [".video1"]);

addPause() docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/

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

×