AFrame + React + Anim

aframe_react_anim.jsx

AFRAME.registerComponent('infocard', {
  init: function(){
    const infocard = this.el

    //Find "show" elements

    const shows = infocard.querySelectorAll('*[begin="show"]')
    const hides = infocard.querySelectorAll('*[begin="hide"]')

    infocard.addEventListener('hover', function (event) {
      for (const item of shows){
        item.emit('show', true)
      }
    }, true)

    infocard.addEventListener('return', function (event) {
      for (const item of hides){
        item.emit('hide', true)
      }
    }, true)
  }
});

const InfoCard = ({
  id,
  children,
  width = 4,
  height = 3.2,
  depth = 0.15,
  manufacturerImage,
  position = '0 0 0',
  background = '#93EFF9',
  title = 'Title Missing',
  description = 'Description Missing'
}) => (
  <a-entity infocard="" look-at="#main-camera" id={id} className={`infocard`} geometry={`primitive: box; depth: ${depth}; width: ${width}; height: ${height}`} material={`color: ${background}; transparent: true; opacity: 0; side: double; metalness: 0.8; sphericalEnvMap: #skybox-sm; npot:true`} position={position} rotation="0 90 0">

    <a-image id={`board-${id}-infocard-manufacturer`} src={manufacturerImage} material="opacity:0; transparent:true" width="2" height="0.25" position="-0.65 2.3 0">
      <a-animation attribute="material.opacity" from="0" to="1" dur="300" delay="450" begin="show"></a-animation>
      <a-animation attribute="material.opacity" from="1" to="0" dur="210" delay="0" begin="hide"></a-animation>
    </a-image>

    <a-entity id={`board-${id}-infocard-title`} className="infocard-title" text-geometry={`value:${title}; size:0.3; height:0.05; bevelEnabled: true; bevelSize:0.010; bevelThickness:0.010`} material={`side:double; color:${colors.title}; transparent:true; metalness:0.5; roughness:0.5; opacity:0`} position={`-1.65 1.65 0.03`}>
      <a-animation attribute="material.opacity" from="0" to="1" dur="300" delay="450" begin="show"></a-animation>
      <a-animation attribute="material.opacity" from="1" to="0" dur="210" delay="0" begin="hide"></a-animation>
    </a-entity>

    <a-entity id={`board-${id}-infocard-desc`} className="infocard-desc" text-geometry={`value:${description}; size:0.2; height:0.05`} material={`side:double; color:${colors.description}; transparent:true; metalness:0.4; roughness:0.6; opacity:0`} position={`-1.65 1.22 0.03`}>
      <a-animation attribute="material.opacity" from="0" to="1" dur="300" delay="750" begin="show"></a-animation>
      <a-animation attribute="material.opacity" from="1" to="0" dur="210" delay="0" begin="hide"></a-animation>
    </a-entity>


    <a-entity id={`board-${id}-infocard-button`} geometry={`primitive:box; depth:${depth}; width:${width}; height:0.85`} material={`color:${colors.buttonBackground}; transparent:true; roughness:0.5; opacity:0; side:single; metalness:0.9;`} position="0 -3.20 -0.01">

      <a-entity id={`board-${id}-infocard-button-title`} className="button-title" text-geometry={`value:BUY; size:0.3; height:0.05`} material={`side:double; color:#ffffff; opacity:0; transparent:true; metalness:0.1; roughness:0.3;`} position="-0.50 -0.11 0.3">
        <a-animation attribute="material.opacity" from="0" to="1" dur="300" delay="750" begin="show"></a-animation>
        <a-animation attribute="material.opacity" from="1" to="0" dur="210" delay="0" begin="hide"></a-animation>
      </a-entity>

      <a-animation attribute="material.opacity" from="0" to="0.35" dur="300" delay="750" begin="show"></a-animation>
      <a-animation attribute="material.opacity" from="0.35" to="0" dur="210" delay="0" begin="hide"></a-animation>
    </a-entity>

    {children}
  </a-entity>
)