[Slideshow with images and video - how to add video to the timeline?]

Awesome. Thanks!
Here is the final solution, and it seems to work 🎉

See the Pen QWmeWBb by Siktreklame (@Siktreklame) on CodePen

[Slideshow with images and video - how to add video to the timeline?]

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 })

 

[Slideshow with images and video - how to add video to the timeline?]

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. 

See the Pen wvmLxGZ by Siktreklame (@Siktreklame) on CodePen

[Looping slider with motion and sliding transition - problem at the end]

Fantastic! Thank you very much for helping me out!

[Looping slider with motion and sliding transition - problem at the end]

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: 

 

See the Pen mXJaBL by Siktreklame (@Siktreklame) on CodePen