Develop Reference

Issue using carouFredSel with plain HTML code

I am trying the following javascript with jquery in my html for scrolling purpose. It doesn't work. So converted the code into plain JS, still it fails. How do I correctly use the carouFredSel with plain HTML code within script tag?
With jquery
$(function() {
var _scroll = {
delay: 500,
easing: 'linear',
items: 1,
duration: 0.05,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
$('#ticker').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
height: 35,
visible: 1
},
scroll: _scroll
});
// set carousels to be 100% wide
$('.caroufredsel_wrapper').css('width', '100%');
Without jquery
document.querySelector(function() {
var _scroll = {
delay: 500,
easing: 'linear',
items: 1,
duration: 0.05,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
document.querySelector('#ticker').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
height: 35,
visible: 1
},
scroll: _scroll
});
// set carousels to be 100% wide
document.querySelector('.caroufredsel_wrapper').css('width', '100%');

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});

How do I delay the start of a JS animation?

I was wondering if there is an easy way to delay the start of this anime.timeline animation? I have a pre-loader on my site, so I don't want this animation to trigger until the pre-loader disappears, which is after 2000 ms.
<script>
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 10000
});
</script>
I think this is an easy fix, but I'm still new to JS. Thank you!

You can use setTimeout() Method
<script>
setTimeout(function(){
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 10000
});
}, 3000);
</script>
This will run your function with a 3 seconds delay.

Have you try to set timeout before animation start?
var animation = function(){
setTimeout(check, 1000);
}
animation();

How to increase spin speed in velocity.js?

I am using velocity.js for spinner and let user spin multiple times.
Currently my code spins the wheel for only few seconds but i want it to spin about more than a minute.
I couldn't find any solution for this so is there any solution?
$(".fancybox").parent("li").velocity({
opacity: 1
}, {
duration: 100,
complete: function () {
$(".wheel").velocity({
rotateZ: "-" + _deg + "deg",
},
{
duration: 1500,
direction: 'clockwise',
speed: 9000,
easing: "swing",
tween: [0, 100],
complete: function (elements)
{}
});
}
});
This is working jsfiddle demo i am attaching.

Jquery animation not working in IE7

I'm in the process of finishing up a site and just working on making it ie7 compat, however theres one basic script that moves 3 tabs up/down and it's failing to work what so ever. the code is below.
$(document).ready(function() {
$('.lower').click(function() {
$('#range-dropdown').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower1').click(function() {
$('#range-dropdown2').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower2').click(function() {
$('#range-dropdown3').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
});
any help would be greatly appreciated
*all css values are declared in the stylesheet.

You have stray trailing commas all over the place, for example:
$('#range-dropdown').animate({
top: '315', // <----------------- Right here
}, 2000, function() {});
Remove those so that it looks like this:
$('#range-dropdown').animate({
top: '315'
}, 2000, function() {});
IE7 gets upset by those trailing commas but most other browsers let it slide and DWIM (Do What I Mean) instead of complaining.

Try explicitly stating the units. You are saying '315', but what units is that in? Feet? Meters? Centimeters? Use '315px', as it explicitly states the units.
Also, you don't need to write function() {} over and over. Just omit it completely.