Animation BodyMovin starts before rendering images - javascript

Animation BodyMovin svg starts before rendering images, so after rendering animation go to end. How do delay before start animation or true start animation only after rendering all images in animation?
Run animation with ScrollTrigger, because that i think images not download before start animation.
Site: http://test.eniso.ru
var ledData = {
container: document.getElementById('led-container'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/window.json'
};
var ledAnim = bodymovin.loadAnimation(ledData);
function playLED (animData) {
ledAnim.play();
ledAnim.setDirection(1);
ledAnim.setSpeed(20);
}
ScrollTrigger.create({
trigger: ".container",
markers: true,
start: "top",
scrub: true,
pin: true,
onEnter: playLED,
})

Related

How to make a slider with infinite and smooth scrolling without delay?

I have a logo slider where I need to implement infinite smooth scrolling without delay. Now there is a smooth scrolling, but there is still a delay and the slider stops. How can this be resolved?
An example of how it should be (slider with logos): https://www.seven-formation.com/
const logosSlider = new Swiper(".testimonials__logos", {
loop: true,
freeMode: true,
freeModeMomentum: false,
speed: 3000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});

Delay initial running/starting of Swiper.js autoplay

I have a Swiper.js carousel that autoplays. I also fade in my page using DOMContentLoaded. This means that the first slide has changed or is in the middle of changing when the page comes into view. So it's in view a much shorter amount of time compared to the others.
Is it possible to delay the initial running of the autoplay carousel? I know you can add a delay to individual slides - but if I do that to counter it, it means 2nd time around the first slide lags/is in view longer than the rest.
JavaScript code:
window.addEventListener('DOMContentLoaded', function() {
document.body.className = 'visible';
});
var caption = document.querySelector('.swiper-caption span');
new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: 'fade',
fadeEffect: {
crossFade: true
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
CSS code:
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity .48s .24s ease-out;
}
Call swiper.autoplay.stop() just after setting it up, and call swiper.autoplay.start() inside DOMContentLoaded event handler. Like so:
const swiper = new Swiper(".swiper", {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: "fade",
fadeEffect: {
crossFade: true,
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
on: {
init: function () {
updateCaptionText(this);
},
activeIndexChange: function () {
updateCaptionText(this);
},
},
});
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
swiper.autoplay.start();
});
If you wanna delay the inital start even further, to match it with your CSS animation duration, you can use a setTimout, like this:
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 1000); // 1000 means 1s, it's in ms here.
});
Live example here at this CodePen I forked. References of used methods are here on Swiper.js's official doc.

My Swiper.js doesn't stop on hover (only after adding speed parameter)

So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).

Release on Edges Scroll is not smooth

Hey I'm using swipper js to build a vertical slider!
The Intended Solution:
-> When building the slider , i want to release the mouse scroll as soon it reaches the first or last slide.
The Problems:
-> Sometimes it makes the page scroll and the slider at the same time (happened only a few times) when i lowered the swiper version to 4.5.1
-> Main problem happened when i was working with version 5.3.1, when reaching the first or last slide, it scrolled too suddently, and the transition wasn't smooth which caused some usability problems...
<script src="https://unpkg.com/swiper#5.3.1/js/swiper.min.js"></script>
Code:
Version 4.5.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheel: true,
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
touchReleaseOnEdges:true
});
productSwiper.swiper;
Version 5.3.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheelSensitivity: 1,
mousewheel: {
releaseOnEdges: true,
},
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
Note: I removed the release on edges atribute on the 4.5.1 version, because currently it was causing that bug.
Sorry for the long post , thanks in advance!

jQuery CarouFredSel plugin triggering a configuration

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).
And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.
My code:
$(".sponsors-slider-slide").carouFredSel({
scroll: {
items: 1,
duration: 2000,
queue: true,
timeoutDuration: 0,
easing: "linear",
pauseOnHover: "immediate-resume",
fx: "scroll"
},
responsive: false,
circular: true,
infinite: false,
swipe: {
onTouch: true,
onMouse: true
},
width: "variable",
height: "variable",
items: {
visible: 4,
minimum: 0,
width: "variable",
height: "variable"
},
align: false,
debug: false
});
and example of next button:
$("#sponsors-slider-next").on("mouseover mouseout", function(e){
if(e.type == "mouseover")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);
}
if(e.type == "mouseout")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
}
return false;
});
The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?
Thanks in advice.
It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.
$(".sponsors-slider-slide").trigger('finish');
Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.
BTW, it would be more efficient to chain multiple methods rather than repeat selectors:
$(".sponsors-slider-slide")
.trigger("finish")
.trigger("configuration", {
direction: "left",
scroll: {
duration: 1000
},
reInit: true //not sure that you need this
});

Categories