Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code:

<a-gltf-model color="#FFFFFF" width="1" height="1" depth="1"
                   position="0 0 0"
                   scale="8.03 8.03 8.03"
                   src="https://cdn.glitch.com/18a85eac-a71c-4578-ad89-80f59b3a68c3%2Fscene%20(94).glb?v=1619466136777">
      <a-animation attribute="position" repeat="indefinite" to="0 0 15" delay="5000"></a-animation_2>
             
   <a-animation attribute="position" repeat="indefinite" to="15 0 0" delay="10000"></a-animation>
            </a-a-gltf-model>

I'm having trouble getting the animations to occur sequentially. Any suggestions on how to achieve this?

javascripthtmlcssanimationaframe

Answer №1

If you're looking to dive into animations in A-Frame, I highly suggest checking out the documentation page Animation - A-Frame

See it in action:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
        <style>
        
        </style>
    </head>
    <body>
        <a-scene>
        <a-sphere
            color="blue"
            animation__position1="
                property: position;
                from: 0 0 0;
                to: 0 0 -5;
                dur: 5000;
                easing: linear;
                autoplay: true;"
            animation__position2="
                property: position;
                from: 0 0 -5;
                to: 5 0 -5;
                dur: 5000;
                easing: linear;
                startEvents: animationcomplete__position1">
        </a-sphere>
        </a-scene>
    </body>
</html>

Remember, you can trigger animations using startEvents or adjust timing with delay and duration parameters.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

javascriptphphtmljquerycss

The instance is referring to "close" as a property or method during render, but it is not defined. Ensure that this property is reactive and properly defined

Upon my initial foray into Vue.js, I encountered a perplexing warning: vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "success" is not defined on the instance but referenced during render. Make sure that this property is reactive, e ...

javascriptvue.jsvuejs2

Creating a unique ticket ID in Flask Python involves combining a string with an incremented integer value. This process ensures that

I am working on developing a Ticketing System using Python Flask and storing it in SQLite. However, I am facing challenges when trying to store the ticket ID. My expectation is that the ticket ID will be a combination of Datetime and an increment number. Y ...

pythonhtmlsqliteflaskticket-system

Steps for automatically toggling a button within a button-group when the page is loaded using jQuery in Bootstrap 3

Here is a button group setup: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="environment" id="staging" value="staging" />Staging </label> <label class= ...

javascriptjquerytwitter-bootstrap-3

Using radio buttons to toggle the visibility of a div element within a WordPress website

I am currently working on creating a WordPress page using the custom page tool in the admin interface. My goal is to have 3 radio buttons, with 2 visible and 1 hidden. The hidden button should be automatically checked to display the correct div (although ...

javascripthtmlcsswordpress

Step-by-step guide on accessing values from a JavaScript object

I have a dictionary variable declared within a script tag on an HTML page. My goal is to retrieve the values associated with the "Roads" and "Intersections" keys, which change each time the page is refreshed. By capturing these values, I can then use JavaS ...

javascripthtmljsondom-eventsjavascript-objects

Show a button instead of text based on the current status

I have a dynamic table displaying various data, mostly text, but with a few buttons included. Now, I need to figure out how to handle this Here is the current data structure: [ { "BET": 57630343, "CUSTOMER": 181645, "XX_FILL OPEN": true }, { "BET": 57 ...

javascriptangularjs

Is there a way to identify a location in close proximity to another location?

With a position at (9,-3), I am looking to display all positions surrounding it within a square red boundary. However, I am struggling to find the algorithm to accomplish this task. Any help or alternative solutions would be greatly appreciated. Thank you ...

javascriptnode.js

When attempting to import Quill-blot-formatter with react-quill via next/dynamic, the registration process fails and continues to display a loading message

After creating a function component and configuring quill-blot-formatter with react-quill, I added the blotFormatter to the modules list. Then, I imported this module using next/dynamic on the desired page. The custom function looks like this: import Reac ...

javascriptreactjsnext.jsquillreact-quill

Issue with ERR_HTTP_HEADERS_SENT persists despite implementation of return statements

When attempting to send a POST request to the server, an error is encountered: Error [ERR_HTTP_HEADERS_SENT]: Cannot modify headers after they are sent to the client at new NodeError (node:internal/errors:371:5) at ServerResponse.setHeader (node:_h ...

javascriptnode.jsexpressmongoose

Incorporate the block-input feature from sanity.io into your next.js blog for enhanced functionality

Currently, I'm in the process of creating a blog using next.js with sanity.io platform. However, I am facing some difficulties when it comes to utilizing the code-input plugin. What's working: I have successfully implemented the code component b ...

javascriptreactjsgraphqlnext.jssanity

Incorporate React JS seamlessly into your current webpage

As I delve into learning React and considering migrating existing applications to React, my goal is to incorporate a React component within an established page that already contains its own HTML and JavaScript - similar to how KnockoutJS's `applyBindi ...

javascriptreactjs

How to effectively compare time duration with a timer in the Laravel framework

I am managing a table that stores various job entries for employees. Each job entry includes a column for duration. I would like to trigger an alert or other event when the duration of a job has ended. My project is built using Laravel and VueJS. Below i ...

javascriptlaravelvue.js

Guide to showcasing a component in reactjs based on a conditional statement?

Here is an example of code snippet. import React, { Component } from "react"; import Navpills from "./Navpills"; import Home from "./pages/Home"; import About from "./pages/About"; import Blog from "./pages/Blog"; import Contact from ". /pages/Contact"; ...

javascriptnode.jsreactjsif-statementjsx

By combining TCPDF with basic HTML, you can easily generate a detailed table of contents

Is there a way to generate a table of contents when printing HTML to PDF using TCPDF? Here is an example code snippet: $html = '<h1>Hello</h1> How are you? <h2>Answer</h2> I am well, thanks'; // ... etc. Long HTML documen ...

phphtmltcpdf

The appearance of a list item (<li>) changes when navigating to a different page within a master page

I encountered an issue where after logging in with a username and password, upon being redirected to the homepage, the login button reappears on all pages instead of remaining hidden until I logout. My goal is for the login button within the <ul> ele ...

c#htmlasp.netwebformsmaster-pages

The lightSlider is only destroyed and rebuilt once during its operation

I am facing a challenge with multiple buttons having the same class while trying to destroy and rebuild the lightSlider script. In the CMS where I have implemented this, images and ajax are being loaded. However, as the JavaScript is triggered by the read ...

javascriptjqueryajax

The functionality of Jquery datatables seems to be faulty when navigating to the second page

While utilizing the jQuery datatables plugin, I encountered an issue where the event click function only worked on the first page and not on subsequent pages. To address this problem, I discovered a helpful resource at https://datatables.net/faqs/ Q. My ...

javascriptjqueryhtmlcssdatatable

An AJAX function nested within another AJAX function

Is there a way for me to return the second ajax call as the result of the ajax function? I could use some assistance with this. function ajax(url: string, method:string, data:any = null) { var _this = this; return this.csrfWithoutDone().done(funct ...

javascriptjqueryajax

The HTML password input continues to respond to key bindings, even when other inputs are not affected by the bindings

In the ongoing development of a legacy react application, I encountered keybindings that are causing unexpected behavior. For instance, pressing the "F" key triggers the full screen mode within the app. However, this keybinding is inadvertently active for ...

htmlreactjsinputkey-bindings