enter image description here
Please help to make it animation as attached image, I tried with @react-spring/web library – useTransition leave config seems it’s not working as expected.
My code:
const MediaRenderDots = ({ item, index, currentSlide, photos }) => {
const activeDot = currentSlide === index;
const lastDotSmall = photos.length >= 4 && index > currentSlide + 2;
const hideDots =
photos.length >= 4 &&
(index > currentSlide + 3 || index < currentSlide - 3);
const firstDotSmall = photos.length >= 4 && index < currentSlide - 2;
const renderDots = () => {
if (lastDotSmall || firstDotSmall) {
return hideDots ? (
<></>
) : (
<CounterSmallDotIcon
key={`small-${index}-${item.path}`}
fillCircle={item.id ? colors.gray["500"] : "#D06369"}
/>
);
} else if (item.id) {
return (
<CounterDotIcon
key={`public-${index}-${item.id}`}
fillColor={activeDot ? "white" : colors.gray["500"]}
/>
);
} else {
return (
<CounterDotIcon
key={`private-${index}-${item.path}`}
isActivePrivate={activeDot}
fillColor={"#D06369"}
/>
);
}
};
const transRef = useSpringRef();
const transitions = useTransition(currentSlide, {
ref: transRef,
keys: currentSlide,
from: {
transform: `translate3d(100%,0,0) scale(0.8)`,
},
enter: {
transform: "translate3d(0%,0,0) scale(1)",
},
leave: {
transform: `scale(3)`,
},
config: { duration: 600 },
});
useEffect(() => {
transRef.start();
}, [currentSlide]);
return transitions((style) => {
return (
<animated.div
style={{
...style,
display: "inherit",
height: 6,
alignItems: "center",
}}
>
{renderDots()}
</animated.div>
);
});
};
...
on leave extra dots appearing, only line should connect to two dots of slider during switching the dots.
Is there any other library or solution where we can achieve above animation?
New contributor
Hiral Trivedi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.