Jump to content
GreenSock

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

DDROTT

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by DDROTT

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

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