I'm looking to add a mouseover event to an SVG that was exported from After Effects. I'd like the SVG to play on mouseover. So far, I've played around with the animation-play-state attribute but it hasn't worked. I've also tried using onmouseover in the script and tried adding an event listener for the mouseover, but still nothing. What am I doing wrong?
var params = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = bodymovin.loadAnimation(params);
I do it like this and it works for me:
animContainer = document.getElementById('bodymovin');
var params = {
container: animContainer,
renderer: 'svg',
loop: true,
autoplay: true,
autoplay:false,
autoloadSegments: false,
path: 'data.json'// path to your data.json file you rendered from AE
};
var anim;
anim = bodymovin.loadAnimation(params);
animContainer.addEventListener("mouseover", myScript);
function myScript(){
anim.play();
}
Related
I have an animation build with LottieJS which loops like:
var lottieLogo = lottie.loadAnimation({
container: document.getElementById('icon_logo'), // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: false,
path: 'path-to-json'
});
lottieLogo.play();
Then after animation is done I want to pause for 10 seconds like:
function logoAnimation() {
lottieLogo.pause();
setTimeout(
function()
{
lottieLogo.play();
}, 10000);
}
lottieLogo.addEventListener('loopComplete', logoAnimation);
It works fine but the only problem is that the animation disappears for about 0.2 seconds every time it loads again. Anyone familiar with this problem?
If you set loop to false it should give you the desired effect.
I'm newbie. I got a code which is working well, but how can I make it playable while mouseover and stopable when mouseout in JavaScript(jQuery). Also I want that when we'll mouseover again an animation start from start. I added a couple lines such as:
$('document').ready(function()
$('#bodymovin').hover(function()
to make hover effect, but animation is still playing when mouseover and also isn't showing my <div> until I mouseover at the start (that's not good :( ).
It would be great if you'll write comments near a lines of code. Thank you.
<script>
$('document').ready(function() {
$('#bodymovin').hover(function() {
var anim;
var animData = {
container: document.getElementById('bodymovin'),
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data.json'
};
anim = bodymovin.loadAnimation(animData);
});
});
</script>
I've disabled the autoplay-option in the Edge Animate Composition.
Now I would like to bind these animation with the waypoints.js so i need to call the animation by javascript.
This is my HTML
<div id="StageTwo" class="EDGE-4436041"></div>
This is the Javascript
<script>
AdobeEdge.loadComposition('animation_bereitstellung', 'EDGE-4436041', {
scaleToFit: "both",
bScaleToParent: "true",
centerStage: "horizontal",
minW: "0px",
maxW: "undefined",
width: "650px",
height: "463px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","500px","356px"],"fill":["rgba(255,255,255,1)"]}},"dom":{}});
</script>
The problem: I've multiple animations on a single site.
I think the easiest way to do this is to call the Adobe Edge API with a bootstrapCallback in a manner similar to the following:
var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
window.AdobeEdge.bootstrapCallback(function(compId) {
var comp = AdobeEdge.getComposition("EDGE-4436041");
//either to play the stage
var stage = comp.getStage().play();
//or to play a symbol inside the stage
var mySymbol = comp.getStage().getSymbol("symbol");
mySymbol.play();
});
}
});
Hope that helps!
I'm using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1
My current code is;
<script>
$(function(){
$('#feature-slideshow').slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
animationStart: function() {
$("body").addClass("slide");
}
});
});
</script>
I have two problems;
1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow
2) How to increment the slide-x class when the slideshow is transitioned/changed.
Any help would be greatly appreciated
Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.
To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
currentClass: "current"
animationStart: function() {
var idx = slideshow.children(".current").index();
document.body.className = "slide-"+(idx+1);
}
});
});
Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list 'pagination' which had the current class applied;
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: false,
currentClass: "current",
animationStart: function() {
var idx = $('ul.pagination').children(".current").index();
document.body.className = "slidebg-"+(idx+1);
}
});
});
I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list
Works great though apart from removing all other body classes, I suppose I could add it as an ID as I'm not using one of those
Anyway hope this helps someone else!
I would like a series of three images to automatically fade in and out over and over looping on the web page without any user input. Upon suggestion in the comments, I have decided to use the Slick library and have generated the following code:
$('.fade').slick({
accessibility: false,
arrows: false,
draggable: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
speed: 1000,
swipe: false,
touchMove: false,
});
It works great for one cycle, and then it completely breaks with images flickering and turning black. Does anyone know how to remedy this?
I was able to use code from this Fiddle to accomplish my goals. All I had to do was slightly rework some of the methods, but this is perfectly what I needed.
http://jsfiddle.net/pdb4kb1a/2/
The JavaScript boils down to:
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout(slideShow, imgDuration);
}
slideShow();