Jump to content
Search Community

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

siktreklame test
Moderator Tag

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

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

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

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.
×
×
  • Create New...