Mixing
How to add an event for shapes in Two.js?
I have a group of two.js shapes. When a user hovers over a shape, I want that one shape to spin.
http://merhoo.github.io/secrets.html
Issue with css animations: if I apply a :hover animation to the svg shapes, it affects the position of the shape somehow, moving it to the top left corner.
So I'm trying to bind a mouseover event to each child for them to spin.
var shapes = makeFlowers();
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
...
var shape = pickFlower();
shape.translation.set(hi * two.width, vi * two.height);
two.add(shape);
}
}
two.update();
for (var f in flowers) {
var flower = flowers[f];
$(flower._renderer.elem)
.click(function(e) {
flower.fill = "blue";
})
}
So how do you apply hover/mouseover animations to shapes in two.js?
javascript animation onclicklistener two.js
asked Jan 2 at 18:28
merhoomerhoo
7211
add a comment |
I have a group of two.js shapes. When a user hovers over a shape, I want that one shape to spin.
http://merhoo.github.io/secrets.html
Issue with css animations: if I apply a :hover animation to the svg shapes, it affects the position of the shape somehow, moving it to the top left corner.
So I'm trying to bind a mouseover event to each child for them to spin.
var shapes = makeFlowers();
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
...
var shape = pickFlower();
shape.translation.set(hi * two.width, vi * two.height);
two.add(shape);
}
}
two.update();
for (var f in flowers) {
var flower = flowers[f];
$(flower._renderer.elem)
.click(function(e) {
flower.fill = "blue";
})
}
So how do you apply hover/mouseover animations to shapes in two.js?
javascript animation onclicklistener two.js
asked Jan 2 at 18:28
merhoomerhoo
7211
add a comment |
I have a group of two.js shapes. When a user hovers over a shape, I want that one shape to spin.
http://merhoo.github.io/secrets.html
Issue with css animations: if I apply a :hover animation to the svg shapes, it affects the position of the shape somehow, moving it to the top left corner.
So I'm trying to bind a mouseover event to each child for them to spin.
var shapes = makeFlowers();
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
...
var shape = pickFlower();
shape.translation.set(hi * two.width, vi * two.height);
two.add(shape);
}
}
two.update();
for (var f in flowers) {
var flower = flowers[f];
$(flower._renderer.elem)
.click(function(e) {
flower.fill = "blue";
})
}
So how do you apply hover/mouseover animations to shapes in two.js?
javascript animation onclicklistener two.js
asked Jan 2 at 18:28
merhoomerhoo
7211
I have a group of two.js shapes. When a user hovers over a shape, I want that one shape to spin.
http://merhoo.github.io/secrets.html
Issue with css animations: if I apply a :hover animation to the svg shapes, it affects the position of the shape somehow, moving it to the top left corner.
So I'm trying to bind a mouseover event to each child for them to spin.
var shapes = makeFlowers();
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
...
var shape = pickFlower();
shape.translation.set(hi * two.width, vi * two.height);
two.add(shape);
}
}
two.update();
for (var f in flowers) {
var flower = flowers[f];
$(flower._renderer.elem)
.click(function(e) {
flower.fill = "blue";
})
}
So how do you apply hover/mouseover animations to shapes in two.js?
javascript animation onclicklistener two.js
javascript animation onclicklistener two.js
asked Jan 2 at 18:28
merhoomerhoo
7211
asked Jan 2 at 18:28
merhoomerhoo
7211
edited Jan 4 at 4:28
merhoo
asked Jan 2 at 18:28
merhoomerhoo
7211
asked Jan 2 at 18:28
merhoomerhoo
7211
asked Jan 2 at 18:28
merhoomerhoo
7211
7211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Two issues (haha) with adding individual event handlers/animations to two.js objects.
- The first I don't understand still: it will only add the event handler to the last shape in the loop. Maybe because it is rendered in the html as one svg, the onclick is applied to either one or all the paths. Seems like a bug on Two.js' part.
- As mentioned in this post, transforming the path of an SVG via an animation is very heavy for the browser. If you apply the animation to the container of the SVG, it won't be applying a transformation to each point in the path.
Solution:
Make a div for each row, and fill it with a div for each cell
for (var r = 0; r < rows; r++) {
var rowId = "row" + r;
var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
for (var c = 0; c < cols; c++) {
var cellId = "cell" + ((r * rows) + c);
$(row).append('<div class="cell" id="' + cellId + '"></div>');
}
}
For each cell, make an instance of Two, add the shape to that
$(".cell").each(function (index, object) {
var two = new Two({
width: size + padding,
height:size + padding
}).appendTo(object);
var shape = pickFlower(shapes);
shape.translation.set(two.width / 2, two.height / 2);
two.add(shape);
two.update();
});
Add the hover animation to the divs with CSS
.cell:hover {
animation: loaderAnim 5s ease-in-out infinite normal forwards;
padding: 0;
margin: 0;
}
@keyframes loaderAnim {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(0deg);
}
}
Notes:
- Don't try to combine making the
divand adding Two to thediv. Thedivmay not be added to the html, and it will then add multiple two instances to a div, and other funky things
answered Jan 12 at 20:54
merhoomerhoo
7211
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
});
}
});
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%2f54011369%2fhow-to-add-an-event-for-shapes-in-two-js%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
Two issues (haha) with adding individual event handlers/animations to two.js objects.
- The first I don't understand still: it will only add the event handler to the last shape in the loop. Maybe because it is rendered in the html as one svg, the onclick is applied to either one or all the paths. Seems like a bug on Two.js' part.
- As mentioned in this post, transforming the path of an SVG via an animation is very heavy for the browser. If you apply the animation to the container of the SVG, it won't be applying a transformation to each point in the path.
Solution:
Make a div for each row, and fill it with a div for each cell
for (var r = 0; r < rows; r++) {
var rowId = "row" + r;
var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
for (var c = 0; c < cols; c++) {
var cellId = "cell" + ((r * rows) + c);
$(row).append('<div class="cell" id="' + cellId + '"></div>');
}
}
For each cell, make an instance of Two, add the shape to that
$(".cell").each(function (index, object) {
var two = new Two({
width: size + padding,
height:size + padding
}).appendTo(object);
var shape = pickFlower(shapes);
shape.translation.set(two.width / 2, two.height / 2);
two.add(shape);
two.update();
});
Add the hover animation to the divs with CSS
.cell:hover {
animation: loaderAnim 5s ease-in-out infinite normal forwards;
padding: 0;
margin: 0;
}
@keyframes loaderAnim {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(0deg);
}
}
Notes:
- Don't try to combine making the
divand adding Two to thediv. Thedivmay not be added to the html, and it will then add multiple two instances to a div, and other funky things
answered Jan 12 at 20:54
merhoomerhoo
7211
add a comment |
Two issues (haha) with adding individual event handlers/animations to two.js objects.
- The first I don't understand still: it will only add the event handler to the last shape in the loop. Maybe because it is rendered in the html as one svg, the onclick is applied to either one or all the paths. Seems like a bug on Two.js' part.
- As mentioned in this post, transforming the path of an SVG via an animation is very heavy for the browser. If you apply the animation to the container of the SVG, it won't be applying a transformation to each point in the path.
Solution:
Make a div for each row, and fill it with a div for each cell
for (var r = 0; r < rows; r++) {
var rowId = "row" + r;
var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
for (var c = 0; c < cols; c++) {
var cellId = "cell" + ((r * rows) + c);
$(row).append('<div class="cell" id="' + cellId + '"></div>');
}
}
For each cell, make an instance of Two, add the shape to that
$(".cell").each(function (index, object) {
var two = new Two({
width: size + padding,
height:size + padding
}).appendTo(object);
var shape = pickFlower(shapes);
shape.translation.set(two.width / 2, two.height / 2);
two.add(shape);
two.update();
});
Add the hover animation to the divs with CSS
.cell:hover {
animation: loaderAnim 5s ease-in-out infinite normal forwards;
padding: 0;
margin: 0;
}
@keyframes loaderAnim {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(0deg);
}
}
Notes:
- Don't try to combine making the
divand adding Two to thediv. Thedivmay not be added to the html, and it will then add multiple two instances to a div, and other funky things
answered Jan 12 at 20:54
merhoomerhoo
7211
add a comment |
Two issues (haha) with adding individual event handlers/animations to two.js objects.
- The first I don't understand still: it will only add the event handler to the last shape in the loop. Maybe because it is rendered in the html as one svg, the onclick is applied to either one or all the paths. Seems like a bug on Two.js' part.
- As mentioned in this post, transforming the path of an SVG via an animation is very heavy for the browser. If you apply the animation to the container of the SVG, it won't be applying a transformation to each point in the path.
Solution:
Make a div for each row, and fill it with a div for each cell
for (var r = 0; r < rows; r++) {
var rowId = "row" + r;
var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
for (var c = 0; c < cols; c++) {
var cellId = "cell" + ((r * rows) + c);
$(row).append('<div class="cell" id="' + cellId + '"></div>');
}
}
For each cell, make an instance of Two, add the shape to that
$(".cell").each(function (index, object) {
var two = new Two({
width: size + padding,
height:size + padding
}).appendTo(object);
var shape = pickFlower(shapes);
shape.translation.set(two.width / 2, two.height / 2);
two.add(shape);
two.update();
});
Add the hover animation to the divs with CSS
.cell:hover {
animation: loaderAnim 5s ease-in-out infinite normal forwards;
padding: 0;
margin: 0;
}
@keyframes loaderAnim {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(0deg);
}
}
Notes:
- Don't try to combine making the
divand adding Two to thediv. Thedivmay not be added to the html, and it will then add multiple two instances to a div, and other funky things
answered Jan 12 at 20:54
merhoomerhoo
7211
Two issues (haha) with adding individual event handlers/animations to two.js objects.
- The first I don't understand still: it will only add the event handler to the last shape in the loop. Maybe because it is rendered in the html as one svg, the onclick is applied to either one or all the paths. Seems like a bug on Two.js' part.
- As mentioned in this post, transforming the path of an SVG via an animation is very heavy for the browser. If you apply the animation to the container of the SVG, it won't be applying a transformation to each point in the path.
Solution:
Make a div for each row, and fill it with a div for each cell
for (var r = 0; r < rows; r++) {
var rowId = "row" + r;
var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
for (var c = 0; c < cols; c++) {
var cellId = "cell" + ((r * rows) + c);
$(row).append('<div class="cell" id="' + cellId + '"></div>');
}
}
For each cell, make an instance of Two, add the shape to that
$(".cell").each(function (index, object) {
var two = new Two({
width: size + padding,
height:size + padding
}).appendTo(object);
var shape = pickFlower(shapes);
shape.translation.set(two.width / 2, two.height / 2);
two.add(shape);
two.update();
});
Add the hover animation to the divs with CSS
.cell:hover {
animation: loaderAnim 5s ease-in-out infinite normal forwards;
padding: 0;
margin: 0;
}
@keyframes loaderAnim {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(0deg);
}
}
Notes:
- Don't try to combine making the
divand adding Two to thediv. Thedivmay not be added to the html, and it will then add multiple two instances to a div, and other funky things
answered Jan 12 at 20:54
merhoomerhoo
7211
answered Jan 12 at 20:54
merhoomerhoo
7211
answered Jan 12 at 20:54
merhoomerhoo
7211
answered Jan 12 at 20:54
merhoomerhoo
7211
7211
add a comment |
add a comment |
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.
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%2f54011369%2fhow-to-add-an-event-for-shapes-in-two-js%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
