Video Banner with GSAP


I would like to create an video banner (MP4), with a text appearing over it, after the video stops using GSAP.

I have created a sample fiddle page here,

I am new to GSAP animations. Can some one help to check, if this code is good? or in otherwords, is this the right way of doing it?

I want to auto play the video in the banner and the text to appear after the video finishes.

Any help appreciated.

Perumal RMAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

If I undestand your question, your code will like someting this:
<!DOCTYPE html>
    <script src=""></script>
    <video id="myVideo" width="420" height="276" controls>
        <source src='' type="video/mp4">
    <div id="preorder-text">
        <span>Pre order text after video loads</span>
        <script src=""></script>
        <script type= text/javascript>
            $(document).ready(function () {
                $("#preorder-text span:first").hide();
                $('#myVideo').on('ended', function () {                   
                    $("#preorder-text span:first").show();
                $('#myVideo').on('playing', function () {
                    $("#preorder-text span:first").hide();

Open in new window

Perumal RMAuthor Commented:
I would like to load the video using HTML5, and once its completed to animate the text over the video. I am looking for animation of text with GSAP.

I have done it with a very basic code, like this.

<div class="main-container">
  <div id="inner-container">
    <div class="videoArea">
        <video id="vid" preload="auto" autoplay width="100%" height="320px">
            <source src="takeover.mp4" />
        <div class="text-overlay preorder-text" style="display: none">
          <a href="" target="_blank" class="btn">Findout more</a>


var syncVideo = function(timeline) {
  var vid = document.querySelector('video');
  var _tl = timeline;

  _tl.pause(); // Pausing it immediately to sync with the video
  // Event listeners for video
  vid.addEventListener('ended', _ended);
  // Functions for video events
  function _ended() {;

  // Returning video object
  return vid;

// Create one timeline for your overlay animation
var overlayTimeline = new TimelineLite.default();

overlayTimeline.staggerTo('.text-overlay', 1, {rotationY:360, x:'-=85', y:'+=215', display:'block', ease: Power1.easeOut, force3D: true}, 0.5);

// Start text animation
var syncedTimeline = syncVideo(overlayTimeline);

$('.videoArea').css('background-image', 'none');;


this does the job, but animating preorder-text is very basic, can some one help to make it bit more nicer.

another question is, how to preload the video, sometime the video plays very slow (buffers) on a slow network. how to handle videos, in a better way.

Any help appreciated.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Perumal RMAuthor Commented:
I figured out the GSAP solution myself.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.