Changing img style on set interval

So, I’m pretty close as this is a react app and in a react-materialize parallax, I have the imgSrc properly changing every three seconds. How do I go about targeting this and changing the style every three seconds? I want the pictures to have transition: .3s ease-in-out on them, but I can’t target it for some reason.

Code:

import React from 'react'
import { Parallax } from 'react-materialize'
import './parallax.css'

export default class ParallaxImage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }

  componentDidMount() {
    const imgTransition = {
      transition: '.3s ease-in-out'
    }
    setInterval(() => {
      this.setState({
        ...this.state,
        counter: this.state.counter === this.props.artList.length - 1 ? 0 : this.state.counter + 1,
      })
    }, 3000)
  }

  render () {
    return (
      <div>
        <Parallax className="parallax" imageSrc={this.props.artList[this.state.counter]} />
        <h5 className="about"><span className="firstLetter">H</span>i! My name is Chizette and art is my passion. I wish to share my art with the world. Please enjoy!</h5>
      </div>
    )
  }
}

I see you have the transition in there, but nothing on what you want it to transition to/from.

Check these out…it may help piece some things together:

1 Like

I had it there for testing and added inline styling on the parent and child, but couldn’t get it to work. Will keep digging.

import React from 'react'
// import { Parallax } from 'react-materialize'
import './parallax.css'

export default class ParallaxImage extends React.Component {
  constructor(props) {
    super(props)
    const imgOpaque = {
      opacity: 1,
      transition: '.5s ease-out-in'
    }
    
    this.state = {
      counter: 0,
      style: imgOpaque
    }
  }

  componentDidMount() {
    const imgOpaque = {
      opacity: 0,
      transition: '1.5s ease-in-out'
    }

    const imgNotOpaque = {
      opacity: 1,
      transition: '1.5s ease-in-out'
    }

    setInterval(() => {
      if (this.state.style === imgOpaque) {
        this.setState({
          ...this.state,
          counter: this.state.counter === this.props.artList.length - 1 ? 0 : this.state.counter + 1,
          style: imgNotOpaque
        })
      } else {
        this.setState({
          ...this.state,
          counter: this.state.counter === this.props.artList.length - 1 ? 0 : this.state.counter + 1,
          style: imgOpaque
        })
      }
    }, 3000)
  }

  render () {
    console.log(this.state.style)
    return (
      <div>
        <img className="parallax" style={this.state.style} src={this.props.artList[this.state.counter]} />
        <h5 className="about"><span className="firstLetter">H</span>i! My name is Chizette and art is my passion. I wish to share my art with the world. Please enjoy!</h5>
      </div>
    )
  }
}

This is actually much much closer! The transition works on the img tag, but when it is at 1 opacity, it switches to a picture and then fades out. I want a picture to fade in then back out. How do I do this?

This had me stumped…so I did a search for “css fade in then out” and found this. Looks like you need to use keyframes…thats the missing link.

And heres one for if you want it to fade in and out repeatedly…also uses keyframes.

1 Like

Thank you so much that did it!

1 Like

Awesome! Good to hear…learned something new myself with this…havnt used keyframes before