We Keep Coding

Speed up setInterval() for one revolution of an infinite carousel (React)

I'm trying to build an infinite carousel for a webpage. I've managed to get it to work quite well, but there is one small bug which is annoyingly noticeable. Here is the setup:
I have each of the images in an array and I have both an activeIndex and a looping variable in the state. The image array has three clones at the end of it ([...imgArray, imgArray[0], imgArray[1], imgArray[2]]) as 3 images are visible at all times.
I use a useEffect() and setInterval() to update the active index every 2 seconds and if the index is the second from the last item in the array, it sets looping to true.
Then, down in the rendering components, I am dynamically changing the transform: translateX() to move the images and when looping is true it sets transition: none.
The problem is, when the carousel loops back to the beginning, it takes twice as long for that image to move again because it uses two rounds of the setInterval(). I wanted to just make it loop back to the next image, but because there are more animations in there, it doesn't seem possible to me.
My next attempt was to make the setInterval have a variable time, but I can't get that to work either.
Let me know if anybody has any ideas. Please and thank you in advance!
Here is what the code looks like:
// Carousel.tsx
useEffect(() => {
const interval = setInterval(() => {
setActiveIndex(prev => {
setLooping(false)
if (prev + 1 >= carouselArray.length - 1) {
setLooping(true)
return 1;
}
return prev + 1
});
}, 2000)
return () => {
if (interval) clearInterval(interval)
}
}, [carouselArray.length])
return (
<div className={style.carousel}>
<div
className={style.inner}
style={!looping ?
{ transform: `translateX(-${(1 / 3 * 100) * (activeIndex - 1)}%)` } :
{ transition: 'none' }}
>
{carouselArray.map((img, i) =>
<div
className={style.video}
style={
i === activeIndex ? !looping ?
{ margin: '0 0.3rem', opacity: 1, transform: 'scale(100%)' } :
{ transition: 'none' } :
{ opacity: '50%', transform: 'scale(85%)' }}
>
<ImgPreview />
</div>
)}
</div>
</div>
)
// Carousel.module.scss
.carousel {
width: 100%;
overflow-x: hidden;
margin: 0 auto 1rem;
max-width: 800px;
.inner {
display: flex;
transition: transform 0.5s ease;
.video {
flex: 1 0 calc(100% / 3);
transition: all 0.5s ease;
video {
width: 100%;
}
}
}
}

How to remove some portion of an image

I am trying to build a component, where it takes images and the first image will be shown while remaining images will be shown in a half circle.
Here I am trying to clip the image portion from second image by adding a class which is not working. I need to get the images as shown in the attached image below.
Images.js
const Images = ({ images = [] }) => {
return (
<div>
{images?.map((image, index) => {
const isFirst = index === 0;
return (
<img
src={image.url}
alt={image.title}
key={image.title}
className={isFirst ? "" : "semi-circle"}
/>
);
})}
</div>
);
};
export default Images;
style.css
img {
border-radius: 50%;
width: 100px;
height: 100px;
}
.semi-circle {
clip: rect(0px, 25px, 25px, 0px);
}
What am I doing wrong here.
Sandbox
See the image that illustrates what I'm trying to achieve:
this

You can use clip-path: path() to create custom shapes. This is now supported in modern browsers.
.semi-circle {
clip-path: path('m27.215 9.6962c70.511-13.195 81.235 89.479 4.948 82.882 16.494-5.773 43.709-54.43-4.948-82.882z');
}
Updated Sandbox
Clip-path Caniuse.com

How to delete image from array if display="none" using Vue.js?

I am using Vue.js in my project. I have a background of images which are animated, they are moving from up to down. Everything connected to the random image, position and etc is inside created():
const vue = require("#/assets/images/vue.png");
const bootstrap = require("#/assets/images/bootstrap.png");
const bulma = require("#/assets/images/bulma.png");
export default {
name: "randImg",
data() {
return {
images: [
vue,
bootstrap,
bulma
],
addedImage: [],
imgTop: -100,
imgLeft: -100,
imgHeight: 64,
imgWidth: 64,
changeInterval: 250
}
},
created() {
const randomImg = func => setInterval(func, this.changeInterval);
randomImg(this.randomImage);
randomImg(this.addImage);
randomImg(this.randomPosition);
},
mounted: function () {
if (this.addedImage[i] = {
style: {display: `none`}
}) {
this.addedImage.remove(this.addedImage[i]);
}
},
methods: {
randomImage() {
const idx = Math.floor(Math.random() * this.images.length);
this.selectedImage = this.images[idx];
},
randomPosition() {
const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
this.imgTop = randomPos(screen.height / 10 - this.imgHeight);
this.imgLeft = randomPos(screen.width - this.imgWidth);
},
addImage() {
if (this.addedImage.length > 500) {
this.addedImage.splice(0, 300);
} else {
this.addedImage.push({
style: {
top: `${this.imgTop}px`,
left: `${this.imgLeft}px`,
height: `${this.imgHeight}px`,
width: `${this.imgWidth}px`
},
src: this.selectedImage
});
}
}
}
}
css
.image {
position: fixed;
z-index: -1;
opacity: 0;
animation-name: animationDrop;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
filter: blur(3px);
will-change: transform;
}
#keyframes animationDrop {
15% {
opacity: 0.2;
}
50% {
opacity: 0.4;
}
80% {
opacity: 0.3;
}
100% {
top: 100%;
display: none;
}
}
and html
<div class="randImg">
<img class="image" :style="image.style"
:src="image.src"
v-for="image in addedImage">
</div>
My site is lagging because images are adding to the DOM infinitely. The idea of my animation is that when my image is on keyframe 100% it will have display none. So I decide to simply create an if statement inside mounted() but it doesn't work; I get the error message "ReferenceError: i is not defined".
How can I delete the images when their display become none?

You want each image to persist for five seconds (based on your animation-duration), and you're adding one image every 250ms (based on your changeInterval variable). This means that your image array needs to contain a maximum of twenty images, rather than the 500 you're currently limiting it to.
You could control this by modifying your addImage function to drop the oldest image before adding the newest one. (You're already doing this, except that you're waiting until five hundred of them have built up and then splicing off three hundred at once; better to do it one at a time:)
addImage() {
if (this.addedImage.length > 20) {
this.addedImage.shift() // remove oldest image (the first one in the array)
}
// add a new image to the end of the array:
this.addedImage.push({
style: {
top: `${this.imgTop}px`,
left: `${this.imgLeft}px`,
height: `${this.imgHeight}px`,
width: `${this.imgWidth}px`
},
src: this.selectedImage
});
}
There's no need to read the display value from the DOM, you can just depend on the timing to ensure that the images aren't removed before they're supposed to; modifying the array is all that's necessary to remove the elements from the DOM. (You could harmlessly leave a few extra in the array length, just in case, but there's no need to go all the way to 500.) mounted() wouldn't be useful for this case because that function only runs once, when the component is first drawn onto the page, before there's anything in the addedImages array.

Using v-if to remove images which style is display: none. And i think you can
delete all code in mounted().
<div class="randImg">
<template v-for="image in addedImage">
<img v-if="image.style.display !== 'none'" class="image"
:style="image.style" :src="image.src">
</template>
</div>

how to animate image in react when image change after some interval?

I am trying to make a image slider in react in which a image is change after 5000 second.
I checked from here http://mumbaimirror.indiatimes.com/ .where this website implement that functionality .
I tried to implement same this in react .I am able to make that , but my image is not slide(from right to left) in other words image not showing animation when second image show n view
here is my code
https://codesandbox.io/s/YrO0LvAA
constructor(){
super();
this.pre=this.pre.bind(this);
this.next=this.next.bind(this);
this.state ={
currentSlide :0
}
setInterval(()=>{
var current = this.state.currentSlide;
var next = current + 1;
if (next > this.props.stories.items.length - 1) {
next = 0;
}
this.setState({ currentSlide: next });
}, 5000);
}

One way to do this is to always have the future image (next image) be ready on the right side so you can transition it to the left, at the same time you transition the current one to the left. So they both move together.
In React this would mean that you would need to store the Index of both the current image and your next image, and each X seconds you need to move them both to the left (or the right depending on your action)
Here's a proof of concept:
https://codepen.io/nashio/pen/xLKepZ
const pics = [
'https://cdn.pixabay.com/photo/2017/06/19/07/12/water-lily-2418339__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg',
'https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg',
];
class App extends React.Component {
constructor(props) {
super(props);
const idxStart = 0;
this.state = {
index: idxStart,
next: this.getNextIndex(idxStart),
move: false,
};
}
getNextIndex(idx) {
if (idx >= pics.length - 1) {
return 0;
}
return idx + 1;
}
setIndexes(idx) {
this.setState({
index: idx,
next: this.getNextIndex(idx)
});
}
componentDidMount() {
setInterval(() => {
// on
this.setState({
move: true
});
// off
setTimeout(() => {
this.setState({
move: false
});
this.setIndexes(this.getNextIndex(this.state.index));
}, 500); // same delay as in the css transition here
}, 2000); // next slide delay
}
render() {
const move = this.state.move ? 'move' : '';
if (this.state.move) {
}
return (
<div className="mask">
<div className="pic-wrapper">
<div className={`current pic ${move}`}>
{this.state.index}
<img src={pics[this.state.index]} alt="" />
</div>
<div className={`next pic ${move}`}>
{this.state.next}
<img src={pics[this.state.next]} alt="" />
</div>
</div>
</div>
);
}
}
React.render(<App />, document.getElementById('root'));
// CSS
.pic {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
img {
width: 100px;
height: 100px;
}
}
.current {
left: 100px;
}
.current.move {
left: 0;
transition: all .5s ease;
}
.next {
left: 200px;
}
.next.move {
left: 100px;
transition: all .5s ease;
}
.pic-wrapper {
background: lightgray;
left: -100px;
position: absolute;
}
.mask {
left: 50px;
overflow: hidden;
width: 100px;
height: 120px;
position: absolute;
}
EDIT: Updated the POC a bit to handle left and right navigation, see full thing HERE

This is by no means an elegant solution, but it does slide the image in from the left when it first appears: https://codesandbox.io/s/xWyEN9Yz
I think that the issue you're having is because you are only rendering the current story, but much of your code seemed to assume that there would be a rolling carousel of stories which you could animate along, like a reel.
With the rolling carousel approach it would be as simple as animating the left CSS property, and adjusting this based on the currently visible story. I.e. maintain some state in your component which is the current index, and then set the 'left' style property of your stories container to a multiple of that index. E.g:
const getLeftForIndex = index => ((index*325) + 'px');
<div className="ImageSlider" style={{ left: getLeftForIndex(currentStory) }}>
<Stories />
</div>

React: Set background image with props from another component

I hope I'm asking this question correctly (I'm still green with React).
I am writing a component that will set the background image (from a folder of jpgs) from props of another component. So let's say the component is "projects" then the background image would be set as "project.jpg" (and component "About" would have a background image of "about.jpg")
I've tried writing this and seems like I get close but not all the way there. Any React.js Gurus that could help me crack this code would have me singing praises of your screen name
My code
import React from 'react';
import styled from 'styled-components';
const pathToBgImages = require.context('../../../src/static', true);
const bgImages = [
'about.jpg',
'blog.jpg',
'contact.jpg',
'projects.jpg'
]
const getImages = () => bgImages.map(name => `<img src='${pathToBgImages(name, true)}'/>`);
const BgBackground = styled.div`
width: 100%;
&::after {
content: "";
background: url(${getImages});
background-size: cover;
opacity: 0.25;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
`
class BgImage extends React.Component {
render() {
return (
<BgBackground />
);
}
}
export default BgImage;
I know there are some blanks in that component and not written correctly, I'm still trying to figure this out. Thank you in advance!