Prev/Next Controls for Simple Seamless Loop

[clayteller]

Hi, I used @Carl's excellent code for creating a seamless loop to create a nice "testimonial slider" section on my websites. Now I'd like to update it with some prev/next controls so visitors can jump ahead or back through the testimonials.

Maybe I didn't search hard enough, but i couldn't find an instance of the seamless loop code I'm using where someone has modified it to do this.

I did find this related post GSAP Slider/Carousel, Next and Previous Buttons, but the approach there seems different enough from my current code that I'm reluctant to completely overhaul what I have.

Before I do an overhaul, anyone know of a "simple" update to my current seamless loop code to add prev/next functionality?

My code: 

Thanks for your help!

See the Pen gOmBGEG by clayteller (@clayteller) on CodePen

[Toso]

hi @clayteller i would recommend going with the seamlessloop to save your time

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

[clayteller]

Thanks @Toso that's a good suggestion, but I'm not a great coder and I'm doubtful about my ability to customize that seamlessLoop helper function to animate the way my current code loop is, with the vertical fading in and out of elements.

I guess in my mind seems easier to "add" prev/next functionality to my current code (since the animation actually works exaclty like I want) than restarting with a new set of code.

I wish I was better at javascript and GSAP to know which is the smartest route to go.

[Toso]

here is a quick one you can add any effect you want or play with the other options,

just 5-10 min to take a look at the seamlessloop documentation and you're ready 

See the Pen RwOpyVX?editors=0011 by ahmed-attia (@ahmed-attia) on CodePen

 

 

you can check Carl's courses here and GSAP3 Express is free by the way 

 

 

https://www.creativecodingclub.com/bundles/creative-coding-club

https://www.creativecodingclub.com/courses/FreeGSAP3Express

[Cassie]

Really helpful answer thanks @Toso 🥳

[clayteller]

@Toso thanks so much for creating that proof of concept! I will have a go at it and see if I can add the fade in / fade out effect I need. Will report back…

[clayteller]

I've tried but can't figure out how to change the animation of the helper function to fade elements in when they enter the viewable area and fade them out when they exit the viewable area. 

I found this part of the code but my attempts to add "opacity" tweens there aren't working.

tl.to(item, {yPercent: snap((curY - distanceToLoop) / heights[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0)
            .fromTo(item, {opacity: 0, yPercent: snap((curY - distanceToLoop + totalHeight) / heights[i] * 100)}, {opacity: 1, yPercent: yPercents[i], duration: (curY - distanceToLoop + totalHeight - curY) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond)

The helper function offers config options but I don't understand how I can config the animation in the way I want using those.

[clayteller]

I do understand the code I've been using to perform this animation
 

	tl.from( rotatingItems, {
		y:        70,
		duration: transitionTime,
		opacity:  0,
		stagger: {
			each:        staggerTime,
			repeat:      -1,
			repeatDelay: repeatDelay,
		},
	} );

	tl.to( rotatingItems, {
		y:        -70,
		duration: transitionTime,
		opacity:  0,
		stagger: {
			each:        staggerTime,
			repeat:      -1,
			repeatDelay: repeatDelay,
		},
	}, staggerTime );

but I don't understand how I can customize the helper function code to do this kind of animation

[GreenSock]

That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: 

See the Pen qBwmOex?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[clayteller]

@GreenSock I really appreciate you taking time to tweak the helper function. I just can't get it to work with the animation effect I'm going for.  I need the elements to be "overlapped" to achieve the effect (see attached screenshot) and I can't figure out how to use translate or negative margin with the enterAnimation and leaveAnimation functions.

Tbh I really thought it would be possible to add prev/next controls to the code I was already using, which already has the animation just like I want. I was hoping I'd post on here and someone smarter than me  would look at my original code pen and say yeah it's simple, you just need to use the seek() or tweenTo() method (or some such) to move the playhead to the previous or next element, and then I would be able to figure it out from there.

I attempted to do that (in my code pen below) and almost have prev/next working like I want, but I think my approach must be flawed. Seems to work for a few clicks and then inevitably fails.

Anyways, I appreciate the help. I'll keep at it—bound to get it eventually.

 

Edit: Hmm my code pen isn't showing, but it's the same one in my original post.

[GreenSock]

Personally, I would take an entirely different approach to this: 

See the Pen wvZjeGN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

That gives you much more flexibility and the transitions are more intuitive. 

[clayteller]

@GreenSock that is slick! You're right, thanks so much for coming up with that!