3D Card Flip in Carousel not aligned to scroll distance.

[blackKojak]

Following Snorkl.tv's 3D Flip tutorial, 

See the Pen VwKGVjb by snorkltv (@snorkltv) on CodePen.

 I'm building a carousel that flips cards onto the front face when centred in the viewport.

Essentially, I'm trying to get it to behave like Revolut's card switcher. 

In my demo, I can't seem to fine tune the spin animation of the cards based on the scroll distance.

I've tried playing with the timeline repeat value + scrollTrigger's start and end values. In this instance, I discovered that matching the repeat to the number of cards almost makes it perfect.

 

Each button click scrolls the slide container by 180px. Based on this scroll distance, I want the animation to reach it's halfway point (180º flip). Is this possible?

See the Pen gbPLLEa by Pensive1 (@Pensive1) on CodePen.

Edited October 3, 2025 by blackKojak
I didn't know the codepen link would replace the text

[mvaneijgen]

Hi @blackKojak welcome to the forum! 

 

Thanks providing a great demo and reference video. If I check the video to me it seems each card just animates 180 degrees instead of 360, eg it just flips on each movement, but if you want that different be sure to change that. 

 

Having these loops/repeats is great, but I find that sometimes it is easier to take a step back and just make a 'dumb' animation that works before you optimise your code. I've written a whole post about this, check it out 

 

I just learned that this is called "fence-post problem" in math, eg should you count the first element or need an extra element at the end? 

 

 

 

Here a fork of your pen, instead of 360 I tween to "+=180" which means tween 180 from the previous recorded value, so it will just keep adding 180 each time, you can off course swap this for any value you like. And as you can see I've just copied the tween a bunch of time to see what the result would be. Be sure to make it 'smart' again when you feel like you've nailed the animation. 

 

Hope it helps and happy tweening! 

 

See the Pen GgoNvaw?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[blackKojak]

@mvaneijgen You're a life saver!

I've implemented your solution but also created a utility function (repeatTween) to repeat the tweens programatically. This will run 1 less from the total cards.

See the Pen qEbqXep?editors=1111 by Pensive1 (@Pensive1) on CodePen.

 

A couple of things:

1. I didn't know it was possible to keep animating from an existing value (rotationY: "+=180"). I thought vars only relied on numerical values.
2. I thought toggleActions were mandatory for ScrollTrigger settings.

I'm still new to GSAP, doing Carl's (Snorkl.tv) course and reading the docs.

I don't know what the optimum way is or how it  impacts browser performance, but I'm glad it works!

[mvaneijgen]

That is the beauty of GSAP, there so many small helper functions that you didn't even know you needed, wrapping a value in "+=number" or "-=number" gets you dynamic tweens from the previous instead of tweening to a specific number. 

 

scrub: true overwrites toggleActions. 

 

4 minutes ago, blackKojak said:

I don't know what the optimum way is or how it  impacts browser performance, but I'm glad it works!

If it works it works! You'll be hard pressed before you run in to browser issues with GSAP, there is so many ways to write the same things and none are specifically more optimized then the other and is only really relevant when your animating like 500+ elements, but if you run in to any just post back here. Especially if you're providing such clear demo's, we love these around here! 

 

Happy tweening!