How to animate my element using Anime.JS?
I'm using Articulate Storyline to create some cool javascript animations...
First I need to find and select the element that I'm going to animate...
I'm using jQuery to select elements by finding their CSS class. I can find elements by pretty much any data attribute assigned to them, in this case, it's aria-label. So my selector will look something like this:
$('[aria-label="my_image"]')
I need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, I actually want to apply my effects on SVG within the DIV so I select it like so:
$('[aria-label="my_image"] svg')
Now I have my element I can use TweenLite from GreenSock or any JS animation engine to make some animations to it. For instance, the following code will find the "myElement" and pushes it to the right...
Note: "myElement" element is an image on my Storyline stage. and the code executes when a button is clicked.
var item = $('[aria-label="myElement"] svg')
go();
function go() {
TweenLite.to(item, 1, {left:"63px"});
}
Now I want to use Anime.JS Animation Engine instead of TweenLite and I'm confused why it doesn't work? and how to make it work?
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: '#item',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
I don't know how to reference my target? I've tried :
targets: '#item',
targets: '.item',
targets: 'item',
Any Idea is greatly appreciated...
javascript jquery animation anime.js
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
add a comment |
I'm using Articulate Storyline to create some cool javascript animations...
First I need to find and select the element that I'm going to animate...
I'm using jQuery to select elements by finding their CSS class. I can find elements by pretty much any data attribute assigned to them, in this case, it's aria-label. So my selector will look something like this:
$('[aria-label="my_image"]')
I need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, I actually want to apply my effects on SVG within the DIV so I select it like so:
$('[aria-label="my_image"] svg')
Now I have my element I can use TweenLite from GreenSock or any JS animation engine to make some animations to it. For instance, the following code will find the "myElement" and pushes it to the right...
Note: "myElement" element is an image on my Storyline stage. and the code executes when a button is clicked.
var item = $('[aria-label="myElement"] svg')
go();
function go() {
TweenLite.to(item, 1, {left:"63px"});
}
Now I want to use Anime.JS Animation Engine instead of TweenLite and I'm confused why it doesn't work? and how to make it work?
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: '#item',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
I don't know how to reference my target? I've tried :
targets: '#item',
targets: '.item',
targets: 'item',
Any Idea is greatly appreciated...
javascript jquery animation anime.js
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
Shouldn’t it just betargets : item? Sinceitemis a variable that you declared earlier
– Kokodoko
Nov 23 '18 at 9:10
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14
add a comment |
I'm using Articulate Storyline to create some cool javascript animations...
First I need to find and select the element that I'm going to animate...
I'm using jQuery to select elements by finding their CSS class. I can find elements by pretty much any data attribute assigned to them, in this case, it's aria-label. So my selector will look something like this:
$('[aria-label="my_image"]')
I need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, I actually want to apply my effects on SVG within the DIV so I select it like so:
$('[aria-label="my_image"] svg')
Now I have my element I can use TweenLite from GreenSock or any JS animation engine to make some animations to it. For instance, the following code will find the "myElement" and pushes it to the right...
Note: "myElement" element is an image on my Storyline stage. and the code executes when a button is clicked.
var item = $('[aria-label="myElement"] svg')
go();
function go() {
TweenLite.to(item, 1, {left:"63px"});
}
Now I want to use Anime.JS Animation Engine instead of TweenLite and I'm confused why it doesn't work? and how to make it work?
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: '#item',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
I don't know how to reference my target? I've tried :
targets: '#item',
targets: '.item',
targets: 'item',
Any Idea is greatly appreciated...
javascript jquery animation anime.js
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
I'm using Articulate Storyline to create some cool javascript animations...
First I need to find and select the element that I'm going to animate...
I'm using jQuery to select elements by finding their CSS class. I can find elements by pretty much any data attribute assigned to them, in this case, it's aria-label. So my selector will look something like this:
$('[aria-label="my_image"]')
I need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, I actually want to apply my effects on SVG within the DIV so I select it like so:
$('[aria-label="my_image"] svg')
Now I have my element I can use TweenLite from GreenSock or any JS animation engine to make some animations to it. For instance, the following code will find the "myElement" and pushes it to the right...
Note: "myElement" element is an image on my Storyline stage. and the code executes when a button is clicked.
var item = $('[aria-label="myElement"] svg')
go();
function go() {
TweenLite.to(item, 1, {left:"63px"});
}
Now I want to use Anime.JS Animation Engine instead of TweenLite and I'm confused why it doesn't work? and how to make it work?
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: '#item',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
I don't know how to reference my target? I've tried :
targets: '#item',
targets: '.item',
targets: 'item',
Any Idea is greatly appreciated...
javascript jquery animation anime.js
javascript jquery animation anime.js
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
edited Nov 23 '18 at 9:04
DestinatioN
1,2681326
1,2681326
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
asked Nov 23 '18 at 9:02
Sara ReeSara Ree
86
86
Shouldn’t it just betargets : item? Sinceitemis a variable that you declared earlier
– Kokodoko
Nov 23 '18 at 9:10
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14
add a comment |
Shouldn’t it just betargets : item? Sinceitemis a variable that you declared earlier
– Kokodoko
Nov 23 '18 at 9:10
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14
Shouldn’t it just be
targets : item? Since item is a variable that you declared earlier– Kokodoko
Nov 23 '18 at 9:10
Shouldn’t it just be
targets : item? Since item is a variable that you declared earlier– Kokodoko
Nov 23 '18 at 9:10
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14
add a comment |
2 Answers
2
active
oldest
votes
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
answered Nov 23 '18 at 9:09
DavidDavid
46515
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
add a comment |
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/
answered Nov 23 '18 at 9:13
RafałRafał
268
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%2f53443477%2fhow-to-animate-my-element-using-anime-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
answered Nov 23 '18 at 9:09
DavidDavid
46515
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
add a comment |
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
answered Nov 23 '18 at 9:09
DavidDavid
46515
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
add a comment |
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
answered Nov 23 '18 at 9:09
DavidDavid
46515
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
answered Nov 23 '18 at 9:09
DavidDavid
46515
answered Nov 23 '18 at 9:09
DavidDavid
46515
answered Nov 23 '18 at 9:09
DavidDavid
46515
answered Nov 23 '18 at 9:09
DavidDavid
46515
46515
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
add a comment |
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
That's working David, Thank you for your quick and working answer
– Sara Ree
Nov 23 '18 at 9:16
add a comment |
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/
answered Nov 23 '18 at 9:13
RafałRafał
268
add a comment |
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/
answered Nov 23 '18 at 9:13
RafałRafał
268
add a comment |
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/
answered Nov 23 '18 at 9:13
RafałRafał
268
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/
answered Nov 23 '18 at 9:13
RafałRafał
268
edited Nov 23 '18 at 9:46
answered Nov 23 '18 at 9:13
RafałRafał
268
answered Nov 23 '18 at 9:13
RafałRafał
268
answered Nov 23 '18 at 9:13
RafałRafał
268
268
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.
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.
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%2f53443477%2fhow-to-animate-my-element-using-anime-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
Shouldn’t it just be
targets : item? Sinceitemis a variable that you declared earlier– Kokodoko
Nov 23 '18 at 9:10
Thank you very much
– Sara Ree
Nov 23 '18 at 9:14