How to animate my element using Anime.JS? - javascript

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...

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.

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/

Related

Fading in a Javascript Object after a certain Time

So I have particle object in JavaScript which is called after a certain Time simply like this:
setTimeout(function() {
particle();
}, 3000);
Now I want this object to be faded in slowly to the canvas after the 3 seconds but I don't know how. I have tried using the jQuery fadeIn() function but it did nothing to the object.
EDIT: I am using the library particles.js from https://vincentgarreau.com/particles.js/ if you want to see the whole logic behind particle();. You can find a working code snippet there. I have not changed the code by a lot except for the styling of the particles.
Thanks a lot
i would do it with jquery the following way. my way of doing it requires jquery easing plugin. you hve to grap the corresponding DOM-element and do some animation on it.
$(document).ready(function () {
var headline = $("#app-title");
// Do time out here
headline.css({'opacity': 0});
headline.show();
headline.animate({opacity: 1}, {
step: function (now, mx) {
headline.css({'opacity': opacity});
},
duration: 800,
complete: function () {
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});

Sliding menu div - click function not working

I wanted to create side tab slide outs for two subdivisions of our company on the new version of the website I'm working on. After a lot of research, I decided to make it relatively simple (or so I thought).
I created a div (#CMTabWrap, 245px) that wrapped around two other divs: #CMContent (200px) and #BNOCM_tab (45px). I set the margin for #CMTabWrap to -200px (the width of #CMContent), leaving only the tab showing. The HTML and CSS are working fine.
Beneath the divs in my HTML, I put the code below. On click, it should test the class of the object and move it in or out (as appropriate) by the width of the content, either making the whole kit and kaboodle visible or reducing it to just the tab.
I want to say that I ran the code through JSLint, and read several questions here along the same lines. I applied some of the fixes, but still nothing is happening. I have a feeling it's something obvious -- I'm not quite intermediate with JS and slightly more than a noob. Any help appreciated.
<script type="text/javascript">
/*global $, jQuery, alert*/
$(function(){
$("#BNOCM_tab").click(function () {
$('#BNOCM_tab').addClass('in');
var contentWidth = $('#CMContent').width();
if ($(this).is('.out')) {
$(this).removeClass('out').addClass('in');
$("#CMTabWrap").animate(
{"left": '+=' + contentWidth},
"slow"
);
}
if ($(this).is('.in')) {
$(this).removeClass('in').addClass('out');
$("#CMTabWrap").animate(
{"right": '-=' + contentWidth},
"slow"
);
});
});
</script>
Inside your click-function this refers to the clicked element, so $(this) and $("#BNOCM_tab") is always the same. Also your second if should be an else, because now you just swap the classes from "in" to out as #wwwmarty pointed to. So yours (inside $(document).ready) could look like this:
<div id="BNOCM_tab" class="out"></div> // add class 'out to the tab
var $Wrap = $("#CMTabWrap"), // create a jQuery object only once, store it
$Tab = $("#BNOCM_tab");
$Tab.click(function () {
var contentWidth = $('#CMContent').width();
// use .hasClass() for class check, note there's no dot in the name
if ($Tab.hasClass('out')) {
$Tab.removeClass('out').addClass('in');
$Wrap.animate({left: '+=' + contentWidth}, "slow");
} else {
$Tab.removeClass('in').addClass('out');
$Wrap.animate({left: '-=' + contentWidth}, "slow");
};
});
If that won't work, add the relevant part of your html to your question or/and make a fiddle and post what exactly went wrong.

Menu items - onclick FadeInDown and FadeOutUp

I have a menu composed of three options.
Clicking on one causes a container div to "FadeInDown".
Then, its contents "FadeIn".
Clicking on another menu item or anywhere else on the page causes the
contents to "FadeOut" then container div to "FadeOutUp".
Here is the fiddle that I have been testing jsfiddle
$(document).ready(function() {
$('.container').each(function() {
animationHover(this,'.fadeInDown');
});
});
I'm not very familiar with jQuery and have been trying to use animate-css to get me along. Thanks for any help and tips in advance and welcome coding criticism :)
My answer is mainly based on JQuery and its animate function (http://api.jquery.com/animate/) . Here is the fiddle :
http://jsfiddle.net/awmat/7/
I use JavaScript objects like fadeInDown to animate the container.
var fadeInDown = {
opacity:1,
top: "50px"
};
And i use the complete callback function of animate to make the content appear after the container.
To manage several div (one for each menu item), I use id as selectors, but since the "click and display" function remains the same, I used a "builder" : (this uses a closure, so if you're not familiar with JavaScript, you may have to read several times to understand what is going on)
var menuClickCallbackBuilder = function(menuItem){
var container = $('#container' + menuItem);
var content = container.find('.content');
var showContent = function(){
content.animate({opacity:1},{duration:1000});
};
return function() {
var activeContainer = $('.active');
var hideContainer = function(){
activeContainer.animate(fadeOutUp,1000);
};
activeContainer.find('.content').animate({opacity:0},{duration: 1000, complete : hideContainer});
activeContainer.removeClass("active");
if(activeContainer[0] != container[0])
{
var timeout = activeContainer[0] ? 2000 : 0 ;
setTimeout(function(){
container.animate(fadeInDown,{duration : 1000, complete :showContent});
},timeout);
container.addClass("active");
}
}
};
This way, when you add the add the click callbacks, you can just do :
$(document).ready(function(){
// note that menuClickCallbackBuilder(1) returns a function
// again if you're not familiar with JS, you may have to re-read menuClickCallbackBuilder
$('#menuLink1').on('click', menuClickCallbackBuilder(1));
$('#menuLink2').on('click', menuClickCallbackBuilder(2));
$('#menuLink3').on('click', menuClickCallbackBuilder(3));
});
Some improvements you can bring to this :
Factor the durations into a variable (e.g animationDurationInSeconds) so that if you want to change the speed of the animation, you only have 1 thing to change. (#Huangism: and right after you did that, make animation faster so that it gets more dynamic)
(From #Huangism) : stop it from going crazy when people cicks on the menu 10 times really fast
Actually, I think you don't need 3 different containers, you could do it with just one container (though I don't know if it would be considered an improvement)
There is probably a way to use CSS classes instead of fadeInDown and fadeOutUp JS objects. That would be cleaner, I think you should keep styles in CSS as much as you can.
There is no need for different IDs for menu items, you could do the exact same thing with a loop.
Whatever your imagination wants to add

scriptaculous blindUp/blindDown issue

I wrote a little script that observes clicks and blinds up/down according to the 'display' property, and also added a queue-to-end parameter to the blindUp in order to avoid even more serious display issues. This is obviously not the way to implement this, as display bugs appear if click events are invoked in the middle of the effect.. This is the code:
<script type="text/javascript">
$$('#leftnav_container #modules h2').each(function(El){
El.observe('click',function(){
container = this.next('div');
display = container.getStyle('display');
if(display == 'none'){
container.blindDown({duration: 0.3});
}else{
container.blindUp({duration: 0.3, queue: 'end'});
}
})
});
</script>
Again, the problem is that I rely on 'display'. What is the proper way to this?
This should simplify it
$$('#leftnav_container #modules h2').invoke('observe','click',function(){
container = this.next('div');
Effect.toggle(container , 'blind', { duration: 0.3 });
});
Firstly if you are only running one method on all elements in the array returned from $$() then you can use the PrototypeJS method invoke().
http://api.prototypejs.org/language/Enumerable/prototype/invoke/
Then Effect.toggle() will check if the element is visible and do the appropriate up/down effect.
Try this out and let me know if it works for you.

Mootools - FX.Scroll won't stop when another event is fired

I don't have a very good understanding of Javascript so appologies before we start.
I have successfully used Mootools 1.1 to scroll to elements onclick events. I used FX.Scroll as the example here http://demos111.mootools.net/Fx.Scroll and basicly ripped off the demo code.
Note: If you click on one link and then another quickly it immediately stops moving to the first element and scrolls to the second.
I am now trying to use Mootools 1.3 to use the fade efects for a gallery and have used More Builder to get FX.Scroll. It is working BUT when I click on one link and then another straight away, it just continues with the first scroll.
It appears that event.stop is not working.
See example http://www.mytimephotography.co.uk < works
http://www.mytimephotography.co.uk/test < broken
I am using code:
window.addEvent('domready', function () {
var scroll = new Fx.Scroll('scrollcontainer', {
wait: false,
duration: 2000,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut
})
$('link1').addEvent ('click', function(event){
event = new Event(event).stop();
scroll.toElement('c1');
})
//etc
})
Please view any other source code on the site.
Use the "link" property of the Fx options object. The default is set to "ignore", which is why the original animation keeps running. Instead, use "chain" if you want it to run after the current animation, or "cancel" if you want it to interrupt the currently running animation.
Alternately, use a faster animation—two seconds is really long! :)
var scroll = new Fx.Scroll('scrollcontainer', {
wait: false,
duration: 2000,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut,
link: 'cancel'
});

Categories