Add animated glb to the Call to Action Link template

I want to use this template in my project: Call to Action Link | 8th Wall Playground | 8th Wall
Instead of the static model, an animated model will be placed. When users open the experience, the animation should be playing.
Can someone guide me on how to tweak the code to make the animation play?

Please give me some hints if anyone knows how to do it!

You can use the animation-mixer component for this.

Just load the component in head.html:

<script src="//cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js"></script>

And add the animation-mixer component to the model entity:

<a-entity gltf-model="#myModel" animation-mixer="clip: *"></a-entity>

Hi Evan, I’ve been using the animation-mixer template for my other projects, and they work well.

However, in this project, the reason to use the β€œcall to action link” template is that I want to navigate users to another website page upon clicking the button. Meanwhile, I want them to see an animated model instead of a static one.

In this case, do you have other suggestions? Thanks!

Did you try using the animation-mixer component? All you need to do is add the <script> in head.html and the animation-mixer component to the model entity. See above for relevant code snippets.

Hi Evan, good news! I got what you actually meant after writing the reply and tried to integrate the codes into the call-to-action link template. It works perfectly now. Feel free to try the experience: keiraliu.8thwall.app/lets-dog-out-takemeout/

Thank you for the information! The method you provide is very helpful!

1 Like

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.