Jump to content
GreenSock

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

siktreklame

ShockinglyGreen
  • Posts

    2
  • Joined

  • Last visited

About siktreklame

siktreklame's Achievements

  1. 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
×