Scaling slides while transitioning

[blimpmason]

Hi, I'm attempting to recreate this carousel using embla:
https://arcades.studio/

The slide in the first position is 100%, second position is 66.66%, and third position is 33.33%

I'm attempting to build on the scale example, but I can't seem to get it to work. Here's my work in progress codesandbox:
https://codesandbox.io/s/embla-carousel-scale-react-forked-co7zpe

Any tips or guidance would be very much appreciated!

[davidjerleke]

Hi @blimpmason,

Thank you for your question. Here's a working CodeSandbox with the align option set to start. I noticed the following:

• You changed the slide inner transform-origin from center to bottom left. This works but maybe it doesn't work as you would expect and this might not be the effect you're looking for. If it is, ignore this 🙂.

I'm not sure why your CodeSandbox is failing but you can use mine as a starting point. It's not possible for me to spend time doing debugging, because you can do it as well as me and compare it with my CodeSandbox in order to see what differs.
I can be help you with explaining why it fails if you find differences.

Best,
David

[davidjerleke]

Thanks for the further explanation @blimpmason.

but I'm attempting to remove the gaps between the slides while transitioning (which is why I changed the transform-origin), and show 3 at once — one at 100% size, one at 66%, and one at 33%.

I don't think it's easy to achieve that with this setup. Because the slides that aren't in focus are scaled down and that's why the gaps appear. I think you have to rewrite most of the logic to achieve what you want.

Best,
David

[blimpmason]

I was thinking there might be a way if I scale the slide container itself rather than the inner container, leveraging the variable width embla functionality. But the math gets off very quickly when slides are changing widths dynamically while transitioning. I'm thinking it might be more worthwhile for me to push my design collaborator in a different direction :)

[davidjerleke]

@blimpmason as you already have figured out the approach needs to be different than the Scale example CodeSandbox 🙂. I wish you luck on pivoting and finding a nice alternative to your initial plan.

[blimpmason]

@davidjerleke one last quick question for you! I ended up compromising with the designer and only showing 2 slides at a time instead of three. The method in the codesandbox demo above works in this case.

The only issue now is that the following code breaks with the latest version of embla-carousel-react (the codesandbox you linked is using v 6.0.2):

if (engine.options.loop) {
	engine.slideLooper.loopPoints.forEach((loopItem) => {
		const target = loopItem.getTarget();
		if (index === loopItem.index && target !== 0) {
		        const sign = Math.sign(target);
		        if (sign === -1)
			        diffToTarget =
				        (scrollSnap - (1 + scrollProgress)) * slideCountMultiplier;
		        if (sign === 1)
			        diffToTarget =
				        (scrollSnap + (1 - scrollProgress)) * slideCountMultiplier;
		}
        });
}

It looks like the getTarget() has been replaced by target() method on loopItem:

embla-carousel/packages/embla-carousel/src/components/SlideLooper.ts

Line 65 in 06aaac9

const target = () => shift.set(scroll.get() > point ? initial : altered)

I believe the 6.0.2 version
But it's not returning the same thing — when I try loopItem.target() a function is returned instead of a number.

I'd like to use the latest version for various reasons (primarily for the breakpoints option), though if needed I can stay on 6.0.2.

Thanks again for any tips!
David

[blimpmason]

@davidjerleke sorry, disregard — I figured out that target().get() gives me exactly what I need and replaces the getTarget() method. I'm all good! Will share the final version when it launches in a few weeks.

[davidjerleke]

Hi @blimpmason,

I’m glad you figured it out 👍🏻. At the time of writing, all example CodeSandboxes are static, unfortunately. So every time I release a new version they need manual updates which is incredibly tedious. But I’ve been able to work on and made great progress on this issue this week:

• Generate CodeSandboxes #281

I’m hoping to finish it in the near future. That means no more CodeSandboxes out of sync, because they will be generated dynamically and share the exact same code as the documentation website examples. This also means that they’ll automatically always use the latest version of Embla.

Best,
David

[davidjerleke]

@blimpmason, all sandboxes are dynamic now. No more figuring out things like this on your own anymore 🙂.