Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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;

  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
      { left: 300, top: 0 },
      { left: 0, top: 0, ease: Expo.easeInOut },

    tl.add(slideTl, "slide-" + i);


and here it is on codepen: 


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

Link to comment
Share on other sites

Trick here is to append a clone of the first .slide to the end of #slider. Animate through for the count of the slides minus 1 (i.e. ignore the last slide ... that is to say, less than totalSlides minus 1 because we address them with a 0 index) so that as the last slide gets into position, the slider starts back from zero resulting in a fairly seamless loop.


See the Pen QQbYBd?editors=0010 by sgorneau (@sgorneau) on CodePen


  • Like 7
Link to comment
Share on other sites

Fantastic! Thank you very much for helping me out!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.