We Keep Coding

Need slick slider to pause at video start, and play at end of video end, but currently infinitely loops video once it reachs video slide

Let me preface by saying I am no code expert and am novice at best, but have been tasked with trying to fix the JS that is controlling this Slick Slider. Currently the slider will start and play through image slides, but as soon as a video slide comes up, it will infinitely play the video. The goal is to have the slider play infinitely through the entire slideshow, with images and videos, but I want the slider to pause when a video slide is up, have the video play through its entirety, and have the slider continue to the next slide when the video ends. It is also important that when that same video comes up again, it plays from the beginning.
My coworker is also working on this with me and told me to attach this email: We have been working Code in question to make the videos play all the way through and I have found a way to make the autoplay pause when there is a slide containing a video (marked in red). I am struggling to find a way to make the autoplay resume when the video is over. At the moment the video just replays endlessly and the slide never changes. I feel like I’m on the right track (marked in green) but I’m struggling to make it work. I am trying to create an event handler that detects when the current video has ended.
Have tried looking through multiple stack overflows and adding different .js scripts I have found to see if that will fix the problem. The code may be extremely hard for some to look at and I apologize in advance, currently the .JS I have is:
$(document).ready(function() {
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function (childA, childB) {
// * Prevent last slide from being reordered
if($(childB).index() !== $(this).children(selector).length - 1) {
return Math.round(Math.random()) - 0.5;
}
}.bind(this)).detach().appendTo(this);
});
return this;
};
var autoplaytime = 3000;
$(".slider-scroll").randomize().slick({
slidesToScroll: 1,
initialSlide: 0,
pauseOnFocus: false,
pauseOnHover: false,
dots:false,
arrows:false,
autoplay:true,
autoplaySpeed:autoplaytime,
});
const slider = $(".slider-scroll");
var scrollCount = null;
var scroll= null;
slider.on('wheel', (function(e) {
e.preventDefault();
clearTimeout(scroll);
scroll = setTimeout(function(){scrollCount=0;}, 200);
if(scrollCount) return 0;
scrollCount=1;
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickNext');
} else {
$(this).slick('slickPrev');
}
}));
});
$(window).on("load",function() {
if( $('.slick-track').is(':empty') ) {
$('.notEvent').addClass('show');
}
});
$(".slider-scroll .slick-current video").on('ended',function(){
$('.slider-scroll').slick('slickPlay');
});
// On slide change, pause all videos
$('.slider-scroll').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('video').each(function() {
$(this).get(0).pause();
});
});
// On slide chnage, play a video inside the current slide
$('.slider-scroll').on('afterChange', function(event, slick, currentSlide, nextSlide){
if( $('.slick-slide.slick-current').find('video').length !== 0)
{
$(".slider-scroll .slick-current video")[0].play();
$('.slider-scroll').slick('slickPause');
}
});
Any help or pointers would be much appreciated! Thanks.

Animation disappears on end LottieJS

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.

Mouseover event with Bodymovin JS

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();
}

How to stop velocity.js animation after the animation is finished?

I am creating a pulsating effect with velocity.js as fallback for IE9, (see box2 for CSS animation )
When mouse leaves the box before the animation has finished ( stay until pulse grows than move out ) the pulsating element stays visible. https://jsfiddle.net/02vu80kc/1/
$(".box").hover(function () {
$(this).find('.effect-holder').velocity({
scale: [1.2, 0.9],
opacity: [1, 0]
}, {
easing: 'ease-out',
duration: 800,
loop: true
}, {
queue: false
}).velocity("reverse");
}, function () {
$(this).find('.effect-holder').velocity("stop");
});
How do I stop the animation on mouseout after the effect has finished ?
I am trying to stay away from .removeAttr('style') and would like the animation to finish and than stop. Any help is appreciated.
If I use this
$(this).find('.effect-holder').velocity('reverse').velocity("stop");
and you move the mouse fast the animation begins again and sometimes pauses in between.

Either use .velocity("finish") instead of .velocity("stop"), or have a different on and off animation, with both animations calling "stop" (ie, catch when the mouse moves properly).
Also note that the {... loop:true ...} means that the first animation never ends, and hence the "stop" will have the "reverse" happen immediately after stopping (call .velocity("stop", true) to prevent that)
edit: Open issue on the "finish" bug - https://github.com/julianshapiro/velocity/issues/495
edit2: Add simple example:
$("box").hover(function() {
// over
this.velocity("stop", true).velocity({
scale: [1.2, 0.9]
}, {
duration: 800,
loop: true
})
}, function() {
// out
this.velocity("stop", true).velocity({
scale: 0.9
}, {
easing: "ease-out",
duration: 800
})
});

Ken Burns effect using Joelambert's Flux Slider? Is it possible?

I am currently using Joelambert's Flux Slider.
GitHub: https://github.com/joelambert/Flux-Slider
Demo: http://www.joelambert.co.uk/flux/
Basically there are many effects such as Bar, Slide, Swipe. Each of these effects is implemented in its respective function. For instance, the codes for the effect for dissolve (fading) is shown below.
I wish to create the Ken Burns effect using this API, is it possible?
An example of the Ken Burns effect is seen in the link provided (wowslider.com/jquery-slider-bar-kenburns-demo.html). It is a type of zooming and panning effect of an image in a frame.
What I have tried: adding in '-webkit-transform':'rotate(7deg)' under the setup() or execute() function, but the rotation only appears when it transits into the next image.
Would like the images displayed to animate, basically having zooming, rotation and panning. Any guidance is deeply appreciated.
Thank you, Radiance.
(function($) {
flux.transitions.dissolve = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
setup: function() {
var img = $('<div class="image"></div>').css({
width: '100%',
height: '100%',
'opacity':'1',
'filter':'alpha(opacity=100)',
'zoom':'1',
'-webkit-backface-visibility': 'hidden',
'background-image': this.slider.image1.css('background-image')
}).css3({
'transition-duration': '600ms',
'transition-timing-function': 'ease-in',
'transition-property': 'opacity'
});
this.slider.image1.append(img);
},
execute: function() {
var _this = this,
img = this.slider.image1.find('div.image');
// Get notified when the last transition has completed
$(img).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
$(img).css({
'opacity': '0.0'
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);