jQuery: anime.js to multiple same targets The Next CEO of Stack OverflowIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
Oldie but Goldie
Mathematica command that allows it to read my intentions
Arrows in tikz Markov chain diagram overlap
Is there a rule of thumb for determining the amount one should accept for a settlement offer?
Avoiding the "not like other girls" trope?
Why was Sir Cadogan fired?
What does this strange code stamp on my passport mean?
How exploitable/balanced is this homebrew spell: Spell Permanency?
How did scripture get the name bible?
Is it possible to make a 9x9 table fit within the default margins?
Is it possible to create a QR code using text?
Find the majority element, which appears more than half the time
Can a PhD from a non-TU9 German university become a professor in a TU9 university?
"Eavesdropping" vs "Listen in on"
How dangerous is XSS
Upgrading From a 9 Speed Sora Derailleur?
Identify and count spells (Distinctive events within each group)
Do I need to write [sic] when including a quotation with a number less than 10 that isn't written out?
Is it OK to decorate a log book cover?
Can you teleport closer to a creature you are Frightened of?
How can I prove that a state of equilibrium is unstable?
How should I connect my cat5 cable to connectors having an orange-green line?
Another proof that dividing by 0 does not exist -- is it right?
Is it reasonable to ask other researchers to send me their previous grant applications?
jQuery: anime.js to multiple same targets
The Next CEO of Stack OverflowIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?How can I select an element with multiple classes in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
$(".ml3").spanLetters();
$('.ml3').on('inview', function(event, isInView) if (isInView)
var $this = $(this);
anime.timeline(loop: false).add(
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i+1)
);
);
How can I change this so that the animation only fires for the current element in view, not all .ml3 classes on the page? So it uses only 'this' element in view?
jquery
asked Mar 7 at 19:34
niksosniksos
1391215
add a comment |
$(".ml3").spanLetters();
$('.ml3').on('inview', function(event, isInView) if (isInView)
var $this = $(this);
anime.timeline(loop: false).add(
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i+1)
);
);
How can I change this so that the animation only fires for the current element in view, not all .ml3 classes on the page? So it uses only 'this' element in view?
jquery
asked Mar 7 at 19:34
niksosniksos
1391215
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of thethisin the$('.ml3')and then construct a selector using:nth-child(#)developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
– Taplar
Mar 7 at 19:43
add a comment |
$(".ml3").spanLetters();
$('.ml3').on('inview', function(event, isInView) if (isInView)
var $this = $(this);
anime.timeline(loop: false).add(
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i+1)
);
);
How can I change this so that the animation only fires for the current element in view, not all .ml3 classes on the page? So it uses only 'this' element in view?
jquery
asked Mar 7 at 19:34
niksosniksos
1391215
$(".ml3").spanLetters();
$('.ml3').on('inview', function(event, isInView) if (isInView)
var $this = $(this);
anime.timeline(loop: false).add(
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i+1)
);
);
How can I change this so that the animation only fires for the current element in view, not all .ml3 classes on the page? So it uses only 'this' element in view?
jquery
jquery
asked Mar 7 at 19:34
niksosniksos
1391215
asked Mar 7 at 19:34
niksosniksos
1391215
asked Mar 7 at 19:34
niksosniksos
1391215
asked Mar 7 at 19:34
niksosniksos
1391215
asked Mar 7 at 19:34
niksosniksos
1391215
1391215
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of thethisin the$('.ml3')and then construct a selector using:nth-child(#)developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
– Taplar
Mar 7 at 19:43
add a comment |
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of thethisin the$('.ml3')and then construct a selector using:nth-child(#)developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
– Taplar
Mar 7 at 19:43
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of the
this in the $('.ml3') and then construct a selector using :nth-child(#) developer.mozilla.org/en-US/docs/Web/CSS/:nth-child– Taplar
Mar 7 at 19:43
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of the
this in the $('.ml3') and then construct a selector using :nth-child(#) developer.mozilla.org/en-US/docs/Web/CSS/:nth-child– Taplar
Mar 7 at 19:43
add a comment |
1 Answer
1
active
oldest
votes
Try the following. The goal being to try to construct the selector that would target the specific element that the view happened upon.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);The index + 1 is due to :nth-child() starting at 1 rather than 0.
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector ish1 span, but there are no span elements in your h1s
– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
add a comment |
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%2f55051524%2fjquery-anime-js-to-multiple-same-targets%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
Try the following. The goal being to try to construct the selector that would target the specific element that the view happened upon.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);The index + 1 is due to :nth-child() starting at 1 rather than 0.
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector ish1 span, but there are no span elements in your h1s
– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
add a comment |
Try the following. The goal being to try to construct the selector that would target the specific element that the view happened upon.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);The index + 1 is due to :nth-child() starting at 1 rather than 0.
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector ish1 span, but there are no span elements in your h1s
– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
add a comment |
Try the following. The goal being to try to construct the selector that would target the specific element that the view happened upon.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);The index + 1 is due to :nth-child() starting at 1 rather than 0.
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
Try the following. The goal being to try to construct the selector that would target the specific element that the view happened upon.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);The index + 1 is due to :nth-child() starting at 1 rather than 0.
var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);var $allML3 = $('.ml3').on('inview', function(event, isInView)
if (isInView)
var index = $allML3.index(event.target);
var specificTargetSelector = `.ml3:nth-child($index + 1) .letter`
anime.timeline(
loop: false
).add(
targets: specificTargetSelector,
opacity: [0, 1],
easing: "easeInOutQuad",
duration: 550,
delay: function(el, i)
return 80 * (i + 1)
);
);answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
answered Mar 7 at 19:46
TaplarTaplar
17.9k21529
17.9k21529
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector ish1 span, but there are no span elements in your h1s
– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
add a comment |
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector ish1 span, but there are no span elements in your h1s
– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
Can't get this to work. Im trying to target parent elements but without any luck either here
– niksos
Mar 8 at 15:39
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
codepen.io/clientagency/pen/gEWQjp here's a pen
– niksos
Mar 8 at 15:48
@niksos your selector is
h1 span, but there are no span elements in your h1s– Taplar
Mar 8 at 17:26
@niksos your selector is
h1 span, but there are no span elements in your h1s– Taplar
Mar 8 at 17:26
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
spans come automatically from lettering js...
– niksos
Mar 11 at 21:00
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%2f55051524%2fjquery-anime-js-to-multiple-same-targets%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
animejs.com/documentation looks like the targets needs to be a selector, and can't be the element itself. So if that's true, you could potentially find the index of the
thisin the$('.ml3')and then construct a selector using:nth-child(#)developer.mozilla.org/en-US/docs/Web/CSS/:nth-child– Taplar
Mar 7 at 19:43