Timeline with images + videos and animation-related progressbars...

[Milenoi]

Hi Guys!

 

I need a little bit help. 

I created a timeline that contains several animations. 

Each Media-Container can contain an Image or a Video. ( it's like instagram-stories). 

I start the animation onclick. Then the first animations shows its image for some seconds. The duration of each animation is defined in a data-attribute. 

When a media-container contains a video the duration should be the duration of the video. 

Ok, this works - i have no idea if this is a good elegant solution.. but it works as far... 

 

No i have several problems: 

Problem Nr. 1: Progressbar - how can i do that?

On the top of the images there is a progressbar which should show the progress of EACH animation.

I really have no idea how to do this. there is an onupdate function but how can i get the progress of an single animation in a timeline?

 

Problem Nr.2: Play the video. 

The video should play when the previous animation has ended - so far so good. 

But when i PAUSE the timeline (tl.pause())- is there a good way to pause the video, too?

Do i have to write a custom stopAnimation function that will stop the timeline AND the video? 

I am totally confused at this time and need some help to clear up my mind. 

 

I appreciate your ideas and help SO much!!!

 

Melanie

 

<div class="button-bar">
  <div class="button1">Start Animation</div>
<div class="button2">Restart Animation</div>
<div class="button3">Stop Animation</div>
  <div class="button4">Resume Animation</div>
</div>
<section class="wrapper">
  <div class="inner">
    <div class="progress-bar">
    </div>
  <div class="media media-visible" data-duration="2">
    <img src="https://images.unsplash.com/photo-1629893250400-a29b567843c8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media1">
  </div>
  
    <div class="media" data-duration="2">
    <img src="https://images.unsplash.com/photo-1629872874038-b1d600221640?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Media2">
  </div>
  
    <div class="media" data-duration="2">
    <img src="https://images.unsplash.com/photo-1629795452973-89255c467c44?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media2">
  </div>

<div class="media">
  
<video class="story-layer-video" crossorigin>
 <source src="https://media.istockphoto.com/videos/looped-cinemagraph-activating-data-center-with-server-racks-full-of-video-id1062074890" type="video/mp4">
</video>
 
  </div>
      <div class="media" data-duration="2">
             
    <img src="https://images.unsplash.com/photo-1629795452973-89255c467c44?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media2">
  </div>
  </div>
</section>

const mediaElements = document.querySelectorAll('.media');
const btn1 = document.querySelector('.button1');
const btn2 = document.querySelector('.button2');
const btn3 = document.querySelector('.button3');
const btn4 = document.querySelector('.button4');
const progressBar = document.querySelector('.progress-bar');
const tl = gsap.timeline();

let addProgressbar = (mediaElements, progressBar) => {
     mediaElements.forEach(mediaElement => {
       let item = document.createElement('div');
        item.classList.add('progress-bar-item');
            progressBar.appendChild(item);
     });
}

let startAnimation = (mediaElements) => {
    mediaElements.forEach(mediaElement => {
       tl.to(mediaElement, {
                ease: "power1.inOut",
                duration: typeof mediaElement.querySelector('video') !== 'undefined' &&           mediaElement.querySelector('video') !== null ? mediaElement.querySelector('video').duration : mediaElement.getAttribute('data-duration'), 
                onStart: (mediaElement, mediaElements) => {
                   mediaElements.forEach(mediaElement => {
                     mediaElement.classList.remove('media-visible');
                   });
                      mediaElement.classList.add('media-visible');
                        const video = mediaElement.querySelector('video');
                    if(video !== null) {
                        video.play();
                    }
                },
                onComplete: (mediaElement) => {
                 const sibling = mediaElement.nextElementSibling;
                  if(typeof sibling !== 'undefined' && sibling !== null) {
                        mediaElement.classList.remove('media-visible');
                        sibling.classList.add('media-visible');
                    }
                
                },
         onUpdate: () => {
           
         },
                onStartParams:[mediaElement, mediaElements],
                onCompleteParams:[mediaElement]
            });
        });
  
 
  
  tl.paused( true ); 
}

startAnimation(mediaElements);
addProgressbar(mediaElements, progressBar);

btn1.addEventListener('click', function (e) {
  e.preventDefault();
  tl.play();
}, false);

btn2.addEventListener('click', function (e) {
  e.preventDefault();
  tl.restart(true, false);
}, false);

btn3.addEventListener('click', function (e) {
  e.preventDefault();
  tl.pause();
}, false);


btn4.addEventListener('click', function (e) {
  e.preventDefault();
  tl.resume();
}, false);

 

See the Pen RwgPPRG by Milenoi (@Milenoi) on CodePen

[OSUblake]

17 minutes ago, Milenoi said:

Do i have to write a custom stopAnimation function that will stop the timeline AND the video? 

 

Yes.

 

19 minutes ago, Milenoi said:

I really have no idea how to do this. there is an onupdate function but how can i get the progress of an single animation in a timeline?

 

Working with video is hard. You can use onUpdate to set the progress of an animation. I just did it here using the ticker.

 

See the Pen eYRNJqP by GreenSock (@GreenSock) on CodePen

 

[Milenoi]

@OSUblake thank you!!  

I will try to figure this out. 

 

Meanwhile i have a new problem on top. 

Is it possible to go to a specific animation in a timeline? 

e.g. i click on a button and want to go directly to the animation with the video?

 

Is this possible?

 

[nico fonseca]

@Milenoi you can use Labels and Seek to go to a specific part of your timeline. 🙂

See the Pen 14585a76fbb7490c4917556978f8c4e3 by nicofonseca (@nicofonseca) on CodePen

[GreenSock]

And if you want to animate the playhead to that spot, check out tweenTo() - you can pass a time or label to it.  

[Milenoi]

Thank you Guys!

Gsap ist abolutely awesome!