Aframe (how to?) Animate entity or entities with both simultaneous and sequential scaling/rotations/positions
0
This is the menu:
How do I animate an entity, so that upon an event like a click, it does simultaneous scaling, rotation, positioning, and sequential scaling, rotation, positioning.
<a-curve id="track1">
<a-curve-point position="4 2 -3"></a-curve-point>
<a-curve-point position="6 5 -2"></a-curve-point>
<a-curve-point scale="10 -3 -1"></a-curve-point>
</a-curve>
<a-cylinder position="5 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow>
<a-animation alongpath="curve: #track1" begin="click"></a-animation>
</a-cylinder>
attributes jquery-animate aframe sequential simultaneous
edited Nov 21 at 16:50
kit
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
add a comment |
0
This is the menu:
How do I animate an entity, so that upon an event like a click, it does simultaneous scaling, rotation, positioning, and sequential scaling, rotation, positioning.
<a-curve id="track1">
<a-curve-point position="4 2 -3"></a-curve-point>
<a-curve-point position="6 5 -2"></a-curve-point>
<a-curve-point scale="10 -3 -1"></a-curve-point>
</a-curve>
<a-cylinder position="5 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow>
<a-animation alongpath="curve: #track1" begin="click"></a-animation>
</a-cylinder>
attributes jquery-animate aframe sequential simultaneous
edited Nov 21 at 16:50
kit
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53
add a comment |
0
0
0
This is the menu:
How do I animate an entity, so that upon an event like a click, it does simultaneous scaling, rotation, positioning, and sequential scaling, rotation, positioning.
<a-curve id="track1">
<a-curve-point position="4 2 -3"></a-curve-point>
<a-curve-point position="6 5 -2"></a-curve-point>
<a-curve-point scale="10 -3 -1"></a-curve-point>
</a-curve>
<a-cylinder position="5 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow>
<a-animation alongpath="curve: #track1" begin="click"></a-animation>
</a-cylinder>
attributes jquery-animate aframe sequential simultaneous
edited Nov 21 at 16:50
kit
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
This is the menu:
How do I animate an entity, so that upon an event like a click, it does simultaneous scaling, rotation, positioning, and sequential scaling, rotation, positioning.
<a-curve id="track1">
<a-curve-point position="4 2 -3"></a-curve-point>
<a-curve-point position="6 5 -2"></a-curve-point>
<a-curve-point scale="10 -3 -1"></a-curve-point>
</a-curve>
<a-cylinder position="5 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow>
<a-animation alongpath="curve: #track1" begin="click"></a-animation>
</a-cylinder>
attributes jquery-animate aframe sequential simultaneous
attributes jquery-animate aframe sequential simultaneous
edited Nov 21 at 16:50
kit
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
edited Nov 21 at 16:50
kit
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
edited Nov 21 at 16:50
kit
1,1083616
edited Nov 21 at 16:50
kit
1,1083616
edited Nov 21 at 16:50
kit
1,1083616
1,1083616
asked Nov 20 at 7:21
Micah Blumberg
12
asked Nov 20 at 7:21
Micah Blumberg
12
asked Nov 20 at 7:21
Micah Blumberg
12
12
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53
add a comment |
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53
add a comment |
1 Answer
1
active
oldest
votes
0
Event-triggered animations:
<a-entity animation__1="startEvents: someevent" animation__2="startEvents: someevent">
Then emit:
el.emit('someevent');
For sequential, see https://www.npmjs.com/package/aframe-animation-timeline-component
answered Nov 21 at 12:36
ngokevin
8,89111457
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388074%2faframe-how-to-animate-entity-or-entities-with-both-simultaneous-and-sequentia%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Event-triggered animations:
<a-entity animation__1="startEvents: someevent" animation__2="startEvents: someevent">
Then emit:
el.emit('someevent');
For sequential, see https://www.npmjs.com/package/aframe-animation-timeline-component
answered Nov 21 at 12:36
ngokevin
8,89111457
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
add a comment |
0
Event-triggered animations:
<a-entity animation__1="startEvents: someevent" animation__2="startEvents: someevent">
Then emit:
el.emit('someevent');
For sequential, see https://www.npmjs.com/package/aframe-animation-timeline-component
answered Nov 21 at 12:36
ngokevin
8,89111457
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
add a comment |
0
0
0
Event-triggered animations:
<a-entity animation__1="startEvents: someevent" animation__2="startEvents: someevent">
Then emit:
el.emit('someevent');
For sequential, see https://www.npmjs.com/package/aframe-animation-timeline-component
answered Nov 21 at 12:36
ngokevin
8,89111457
Event-triggered animations:
<a-entity animation__1="startEvents: someevent" animation__2="startEvents: someevent">
Then emit:
el.emit('someevent');
For sequential, see https://www.npmjs.com/package/aframe-animation-timeline-component
answered Nov 21 at 12:36
ngokevin
8,89111457
answered Nov 21 at 12:36
ngokevin
8,89111457
answered Nov 21 at 12:36
ngokevin
8,89111457
answered Nov 21 at 12:36
ngokevin
8,89111457
8,89111457
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
add a comment |
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I tried to get this working several times, but I guess I just don’t understand what I’m doing wrong. Can you post an example of it working?
– Micah Blumberg
Dec 5 at 1:28
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
I also tried to paste the entire example of the animation timeline component into glitch and it’s not working the way its written. Can you link to examples that are actual working pages?
– Micah Blumberg
Dec 5 at 3:01
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
Also this code shows multiple animations for one entity, something I can already do easily. It does not show how to trigger a group of entities with one event (click) to trigger each of their independent animations.
– Micah Blumberg
Dec 5 at 23:07
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
We got this working by beginning an animation in each entity with a custom-named event that we emitted in three js. Its basically similar in concept to your answer but our code looks a lot different and is probably less efficient than what you wrote.
– Micah Blumberg
Dec 15 at 2:02
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388074%2faframe-how-to-animate-entity-or-entities-with-both-simultaneous-and-sequentia%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi, can you separate and clarify your multiple questions? There's two questions, and the second one is quite a run-on sentence haha.
– ngokevin
Nov 20 at 13:47
Okay here is the separated and rewritten question stackoverflow.com/questions/53404248/…
– Micah Blumberg
Nov 21 at 1:53