siktreklame

Awesome. Thanks! Here is the final solution, and it seems to work ? https://codepen.io/Siktreklame/pen/QWmeWBb

Thank you, Cassie! One step closer. I try to figure out how to add the video duration to the timeline, while playing the video. When I call the function - how can I tell the timeline to wait videoDuration sec before it continues? const video02 = document.getElementById("video02"); const videoDuration = video02.duration; const tl02 = gsap .timeline() .to("#wrapper02", { opacity: 1, duration: 0.25 }) .call(function () { video02.play(); }) .duration(videoDuration) .to("#wrapper02", { opacity: 0, duration: 0.25 })

Hi, I am trying to build a looping slideshow with images and video. Here is my approach: 1. Create a wrapper for each slide and create a timeline for each wrapper. This is nice for future enhancements. 2. Add the timelines to a master timeline and loop the master timeline The problem I need to solve is how to add video(s) to the timeline. The videos can vary in length, so I do not know the length of the video. I have tried to pause the timeline by using addPause(); then listen for the ended event on the video. When the ended event ha been triggered I try to resume the timeline. But with no luck.

Fantastic! Thank you very much for helping me out!

Hello, I am new to this forum, and at beginner level of javascript/GSAP. I am creating a looping slideshow with motion - with sliding transition. It works as intended, but at the end of the last slide, I need the first image to slide in from right to left. Now there is a gap between the last slide and the firs slide. Each slide is wrapped in a div.slide, and I create a timeline for each slide, which is added to a master timeline. My approach is to check if next slide exist or not, and then pull in the first slide, if it does not exist. nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]); + slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0, }, { left: 0, top: 0, ease: Expo.easeInOut }, '-=1' ); Here is the complete javascript code. $(function() { // Slider variables var width = 300; var slides = $(".slide"); var totalSlides = slides.length; var tl = new TimelineMax({ repeat: 1 }); var slideTl; var activeSlide; var nextSlide; //slider for (var i = 0; i < totalSlides; i++) { slideTl = new TimelineMax(); activeSlide = $(slides[i]); nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]); slideTl.to(activeSlide, 2, { x: -width, ease: Power0.easeNone, force3D: false }); slideTl.to(activeSlide, 1, { x: -(width * 2), ease: Expo.easeInOut }); slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0 }, { left: 0, top: 0, ease: Expo.easeInOut }, "-=1" ); tl.add(slideTl, "slide-" + i); } }); and here it is on codepen: https://codepen.io/Siktreklame/pen/mXJaBL