1

I have an webapp created using 8thwall and I implemented a new button for the animation. I added the same logic for this button as the other ones (the prior ones are working fine), but for some reason this button has no functionality.

The button that is not working is the shareButtonComponent. Can someone please guide me?

const replayButtonComponent = () => ({
init() {
const model = document.getElementById('model')
const replayButton = document.getElementById('replaybutton')
const shopButton = document.getElementById('shopbutton')

const entity = document.querySelector('[sound]')

model.addEventListener('animation-finished', () => {
model.setAttribute('animation-mixer', {
clip: 'rabitidle',
loop: 'once',

timeScale: 0,
})
replayButton.classList.remove('inactive')
shopButton.classList.remove('inactive')
})

replayButton.style.display = 'block'
const replayAnimation = () => {
replayButton.classList.add('inactive')
shopButton.classList.add('inactive')

model.setAttribute('animation-mixer', {
clip: 'rabitanim',
loop: 'once',
timeScale: 1,
})
entity.components.sound.playSound()
}
replayButton.onclick = replayAnimation
},
})
export {replayButtonComponent}

const shareButtonComponent = () => ({
init() {
const shareToggle = document.getElementById('sharebutton')
shareToggle.style.display = 'block'
const holder = document.getElementById('hyperlink-holder')

shareToggle.addEventListener('click', () => {
holder.classList.toggle('holder-active')
})
},
})
export {shareButtonComponent}

const shopButtonComponent = () => ({
init() {
const shopButton = document.getElementById('shopbutton')
shopButton.style.display = 'block'
const shop = () => {
window.open(
'https://www.amazon.com/Goodnight-Bubbala-Sheryl-Haft/dp/0525554777/ref=sr_1_1?crid=1EDVMUS03H9C5&keywords=Sheryl+haft&qid=1640032526&sprefix=sheryl+haft%2Caps%2C120&sr=8-1'
)
}
shopButton.onclick = shop
},
})
export {shopButtonComponent}

const animationComponent = () => ({
init() {
const entity = document.querySelector('[sound]')
const model = document.getElementById('model')
this.el.sceneEl.addEventListener('realityready', () => {
model.setAttribute('animation-mixer', {
clip: 'rabitanim',
loop: 'once',
})
entity.components.sound.playSound()
model.setAttribute('scale', {x: 1, y: 1, z: 1})
})
},
})

export {animationComponent}
Drinos Shala
  • 105
  • 6

1 Answers1

0

Please provide more info about how you are importing the exported component. The component need to be imported in app.js first like this https://www.8thwall.com/8thwall/animation-mixer-aframe/code/app.js#L8 and then registered with a name as aframe-component. The named component then needs to be called into the scene for the component to work like this https://www.8thwall.com/8thwall/animation-mixer-aframe/code/body.html#L9

Ambriel.AR
  • 11
  • 3
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31262870) – Kerel Mar 14 '22 at 10:42