I have a simple code that is using the library Lottie for SVG animations.
There are 2 animations. I need to make one first on load and the second start when user click on the button. At the same time when the second animation starts second animation replace the first.
So in my expectations I will need to change the parameter of JS function.
Is there any option how can I change path parameter in lottie function and start the second animation than replace the first animation with the second?
HTML:
<div id="element">
<button onclick="myFunction()">Click me</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js" integrity="sha512-35O/v2b9y+gtxy3HK+G3Ah60g1hGfrxv67nL6CJ/T56easDKE2TAukzxW+/WOLqyGE7cBg0FR2KhiTJYs+FKrw==" crossorigin="anonymous"></script>
JS:
var element = document.getElementById("element");
var animPath = 'anim/data-1.json'
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
path: animPath // the path to the animation json
});
function myFunction() {
var animPath = 'anim/data-2.json'
}
Put your animation code in a function and call it with a default path when the page load. Create a click event and call it with a different path.
function runAnimation(animPath) {
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
path: animPath // the path to the animation json
});
}
runAnimation("anim/data-1.json");
let element = documment.querySelector("clicked element selector");
element.addEventListener("click", () => {
runAnimation("anim/data-2.json");
})
Related
I am having difficulty to figure out how to wait or delay slider about 1 second before move to another slider. The below is JavaScript. I am not sharing the html code because its too lengthy and my question will look messy. I hope some of you have idea. I really appreciate your help.
Js code
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //enable auto height
mousewheelControl: false,
touchRatio: 0,
allowTouchMove: false,
shortSwipes: false,
speed:2000,
navigation: {
nextEl: '.swiper-button-next',
},
});
I am having difficulty to figure out how to wait or delay [...] about 1 second
If you wish to delay script execution, you need setTimeout.
Anatomy of setTimeout:
setTimeout( [CALLBACK FUNCTION], [TIME DELAY] );
Working Example:
const myButton = document.getElementsByTagName('button')[0];
const clickButton = () => {
setTimeout(() => {
let myParagraph = document.createElement('p');
myParagraph.textContent = 'You clicked the button.';
document.body.appendChild(myParagraph);
}, 1000);
}
myButton.addEventListener('click', clickButton, false);
<button type="button">Click Me</button>
<p>A second after you click the button above, more text will appear...</p>
I call my animated element as follows:
emdrSpawnElement = anime({
targets: '#alternate-main .el',
translateX: destination,
direction: 'alternate',
loop: true,
easing: selectedEasing,
duration: emdrSpawnElementSpeed,
autoPlay:false,
loopBegin: function (anim) { },
loopComplete: function (anim) {
if(trackingPassesActive == true)
{
totalPasses++;
if((totalPasses % 2) == 0)
{
passesDisplayed++;
document.getElementById("passes-count-2").innerText = passesDisplayed.toString();
console.log(passesDisplayed);
}
}
clearInterval(switchDirectionSoundPlayer);
switchDirectionSoundPlay();
}
});
My interface contains a slider to change the speed of the element. Every time the slider is moved, the code listed above calls again.
My problem: the loopComplete function is running as if every time I change the slider, a new anime element is created without deleting the old one. The result is the loopComplete function being called many times, increasing every time I change the slider.
My goal is to stop repeat calls to the loopComplete function. How can I remove the anime element every time I want to change its speed? I only want the loopComplete function to be calling for one anime element at a time. Much love to anyone who can share some wisdom on this subject.
https://jsfiddle.net/joel081112/fctL5z2u/15/
I'm not sure how to fix it since I'm new to JavaScript but I've tried some for-each statements and got nowhere. Here is a fiddle with 3 elements with the class-name bodymovianim but only the first element is appearing. How can I alter this js to show it in each div?
let iconMenu = document.querySelector('.bodymovinanim');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/menu.json"
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
I have a bootstrap site which has 3 photos in a slideshow. The function which does that is:
$(function () {
$.vegas('slideshow', {
backgrounds: [{
src: 'img/ph1.jpg', fade: 0, delay: 5000, //fade: 1000, delay: 9000,
}, {
src: 'img/ph2.jpg', fade: 0, delay: 5000,
}, {
src: 'img/ph3.jpg', fade: 0, delay: 5000,
},]
})('overlay', {});
});
What I want to do is to associate text for each photo. For example: for ph1.jpg to have "text1", for ph2.jpg to have "text2", and so on.
I tried to add a carousel in my HTML but the text and the photo are not synchronized (even if they have the same delay). I also tried to modify this JS so to be able to add some text in the above function.
What can I do to get them sync the photos and the text?
Try better to put your images in a css file and from there to put the text for each other.
You may try below code which rely on vegaswalk event callback.
vegaswalk event gets triggered whenever Vegas changes the slide. It can be utilized as follows:
var textArray = [
"text1 for ph1.jpg",
"text2 for ph2.jpg",
"text3 for ph3.jpg"
];
$("body").on('vegaswalk', function (e, index, slideSettings) {
var currentText = textArray[index];
alert(currentText);
//write here code to set this text in some div present on Page
//OR
//write code to move the slide of text carousel as per current index of slideshow
});
I have a web page that is loading images and scans across about 600+ images as the user presses next or previous. This is working fine. However, the image load time is slow so the idea is to put a processing while in place of the images until they are fully loaded. I can get the processing wheel to load perfectly fine but I cannot get it to hide once the image or document is loaded. I have tried doing this two different ways:
Attempt 1:
$('#centerImage').ready(function () {
$('.spinner').css('display', 'none');
});
Attempt 2:
$('#centerImage').ready(function () {
$('.spinner').hide();
});
I have also tried replacing the selector #centerImage on the .ready() function with document but still don't see the Processing Wheel get hidden.
What I find strange is that when I try and hide an ID instead of a Class, it works perfectly fine. I tried a 'Try Me' on W3 Schools with a simple example and hiding a class with the .hide() doesn't work there either.
Google isn't returning anything specific to any limitations with jQuery hiding classes. Is this possible or am I approaching this the wrong way?
NOTE: I'm using spin.js for the processing wheel.
All Code:
JavaScript:
EDIT: Added .load instead of .ready
var previousImage = document.getElementById("previousImage");
var centerImage = document.getElementById("centerImage");
var nextImage = document.getElementById("nextImage");
previousImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblPreviousImage").innerHTML);
centerImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblCenterImage").innerHTML);
nextImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblNextImage").innerHTML);
$('#centerImage').load(function () {
$('.spinner').hide();
});
HTML/ASP.NET:
<div id="images">
<img id="previousImage" onload="showProgress()" alt="" src=""/>
<img id="centerImage" onload="showProgress()" alt="" src=""/>
<img id="nextImage" onload="showProgress()" alt="" src=""/>
</div>
Show Progress JavaScript File:
function showProgress () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('images');
var spinner = new Spinner(opts).spin(target);
}
Thanks in advance for any helpful input.
As #Barmar $("#centerimage").ready() is the same as $(document).ready(). There's no separate ready event for each element, it just applies to the whole DOM.
Ready is used to check if the DOM is ready and the load is used to check if the Content is loaded.
Use load instead of ready:
$('#centerImage').load(function () {