Milenoi Posted August 26, 2021 Share Posted August 26, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 26, 2021 Share Posted August 26, 2021 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 1 Link to comment Share on other sites More sharing options...
Milenoi Posted August 26, 2021 Author Share Posted August 26, 2021 @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? Link to comment Share on other sites More sharing options...
nico fonseca Posted August 26, 2021 Share Posted August 26, 2021 @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 2 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 26, 2021 Solution Share Posted August 26, 2021 And if you want to animate the playhead to that spot, check out tweenTo() - you can pass a time or label to it. 2 Link to comment Share on other sites More sharing options...
Milenoi Posted August 27, 2021 Author Share Posted August 27, 2021 Thank you Guys! Gsap ist abolutely awesome! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now