I made animation in After FX using bodymovin that works fine if I only use bodymovin library, but if I include Lottie player library (that I need for other animations) it stops working so I guess there is a conflict.
Did someone had any experience with this, how can I resolve this conflict?
Here is some example animation:
var someAnimation = lottie.loadAnimation({
container: document.getElementById("some-animation"),
renderer: "svg",
loop: true,
autoplay: false,
path: "https://assets6.lottiefiles.com/packages/lf20_3qA9nfDloy.json"
});
someAnimation.play();
.section {
height: 100vh;
width: 100%;
}
<!-- Lottie player library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.7.1/lottie-player.js"></script>
<!-- Bodymovin library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"></script>
<div id="some-wrap" class="section">
<lottie-player id="some-animation" src="https://assets6.lottiefiles.com/packages/lf20_3qA9nfDloy.json" background="transparent" speed="1" style="width: 300px; height: 300px;"></lottie-player>
</div>
So basically if I remove the Lottie player animation it will work, but I need this animation to work with both libraries present.
Related
I'm following this flickity slide fade docs
FlickityFade Installation
Here is the css cdn package
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity-fade#2/flickity-fade.css">
Here is the carousel html and the script set up
<div class="testimonial-carousel">
....carousels div....
</div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity-fade#2/flickity-fade.js"></script>
<script>
$('.testimonial-carousel').flickity({
// options
fade: true,
cellAlign: 'left',
contain: true,
prevNextButtons: false
});
</script>
i don't figure out why this slide fade not working, only run in the dom like i am using normal flickity package
but, it shown error like link below
Error screenshot from my console log
Found the solution here Flickity issues
I have installed the vegas jquery plugin to my project with npm. Now when I try to use it by following the documentation it does not seem to work. I have linked the vegas.min.js and vegas.min.css files in my html.
So, I have tried changing the path to the images, css, js files. Since I thought it had something to do with the path to the image.
HTML:
<div class="container" id="slide">
<p class="invisible"></p>
</div>
JS:
$(document).ready(function() {
let imagecollection = [
{src: './img/slide_0.jpg'},
{src: './img/slide_1.jpg'},
{src: './img/slide_2.jpg'},
];
$("#slide").vegas({
slides: imagecollection,
transition: 'fade',
preloadImage: true,
timer: true,
shuffle: true,
delay: 5000,
animation: 'kenburns',
cover: true
});
});
Now, I was hoping it would show the images every 5 seconds and go through the images, but this is not happening. I am not getting any errors in the console.
Found a solution
I made a rookie mistake by linking the JS files before calling the jQuery library.
Putting the js files after linking the jQuery fixed the issue!
I want to implement a 360 video with Clappr as starting element to my homepage on WordPress-Basis. I am no coding expert, but I try my best.
I used this to build my code: https://ourcodeworld.com/articles/read/518/how-to-create-a-360-video-player-with-javascript-using-clappr
Video and everything is working fine, but, unfortunately, Chrome changed it's autoplay policy and the video is not starting to play in Chrome. In Firefox autoplay works fine.
Then I've found this solution: https://github.com/clappr/clappr/issues/1639#issuecomment-395414240
But, my 360 video is still not autoplaying in Chrome! I really can't figure out what to do, since the codesnippets are close to identical.
I'd be glad for any help or hint! Thanks!
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr#latest/dist/clappr.min.js"></script>
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/can-autoplay#3.0.0/build/can-autoplay.min.js"></script>
</head>
<div id="player" class="video-background"></div>
<script>
// The URL to the 360 video player
var Video360Url = '360_VR.mp4';
// Configure your Clappr player.
var PlayerInstance;
canAutoplay.video().then(function(o) {
var cap = o.result === true;
PlayerInstance = new Clappr.Player({
source: Video360Url,
poster: 'city-view-edit.jpg',
loop: 'true',
autoPlay: cap,
height: '100%',
width: '100%',
hideMediaControl: 'true',
chromeless: 'true',
allowUserInteraction: 'false',
preload: 'auto',
plugins:
{
container: [Video360],
},
parentId: '#player',
});
PlayerInstance.getPlugin('click_to_pause').disable();
});
</script>
</html>
Just passing by.
Do you try to mute the video first? As chrome and other browsers have policy that not allow auto-playing video with sound.
Clapper mute demo with JS script
cheer
I am trying to build a single page site using the fullpage.js library which works great! I would also like to add the particle effect from particle.js library to the first section of my site.
No matter what I try, it seems the particles do not show up and I'm not to sure what the issue could be, any help is appreciated! My code is as follows:
HTML:
<div class="section" id="particles-js"></div>
JS:
particlesJS.load('particles-js', '/assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
CSS:
#particles-js {
background: cornflowerblue;
}
My particles.json file is the default one provided with the library as from here.
My JS code is in a file called init_libraries.js which is added to my HTML page like this:
<script src="/javascript/bootstrap.min.js"></script>
<script src="/javascript/jquery.fullPage.min.js"></script>
<script src="/javascript/particles.min.js"></script>
<script src="/javascript/init_libraries.js"></script>
When I start my site, I see "callback - particles.js config loaded" message so the library and the config file seem to be loaded fine but still I see no particle on my site. Any ideas?
EDIT:
Ended up figuring this one out after a while, I had to change my HTML like this:
<div id="particles-js">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
Also I had to add the following to CSS so that the particles were behind my text and button:
canvas {
position: absolute;
top: 0;
z-index: 1;
}
.container a {
position: relative;
z-index: 9999;
}
.container h1 {
position: relative;
z-index: 9999;
}
Works great now! All the library js files were in the correct location.
I guess your assets are not in your javascript folder.
Check if your relative path to your 'particles.json' is correct.
particlesJS.load('particles-js', '../assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
Sorry can not comment :/
the foundation tooltip is not working . I think the script placement is wrong but i could not figure out what the actual problem is. does the tooltip has to be initialized for javascript or is it based on CSS only?
this is the script i have placed just above the closing body tag
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script src="../js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
$(document).foundation('orbit', {
animation: 'fade'
timer_speed: 3000,
pause_on_hover: false,
resume_on_mouseout: false,
animation_speed: 300,
});
$(".orbit-timer").hide();
$(".orbit-slide-number").hide();
</script>
i have gone through other questions realated to this but could not find the right answers !
this is the html for tooltip
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
If you are using foundation 4 I see you have not included custom.modernizr.js and foundation.tooltips.js in you page.
Modernizr:
In the head section of your page add Modernizr. Modernizr acts as a
shim for HTML5 elements for older browsers as well as detection for
mobile devices.
See: http://foundation.zurb.com/docs/javascript.html and http://foundation.zurb.com/docs/components/tooltips.html
Demo: http://jsfiddle.net/IrvinDominin/4jaEa/
EDIT
Your orbit function not works because, there is a missing , after the animation option and the orbit setup must be done before the $(document).foundation() execution.
Code:
$(document).ready(function () {
$(document).foundation('orbit', {
animation: 'fade',
timer_speed: 3000,
pause_on_hover: false,
resume_on_mouseout: false,
animation_speed: 300
});
$(document).foundation();
$(".orbit-timer").hide();
$(".orbit-slide-number").hide();
});
Demo: http://jsfiddle.net/IrvinDominin/SdAkp/