Mixing
How to reset SVG animation in owl-carousel
up vote
0
down vote
favorite
I have svg animation, made like this
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
JS for animating
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
setTimeout(draw, t); // Redraw
}());
and css
svg {
position: absolute;
top: 0;
border: 3px solid pink;
border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}
css is mainly for display swg when class active is setted. It is in carousel, so i need to display just one animation for each slide. But the problem is, that all svg are animating at the same time. I need to reset these animations everytime, when carousel change slide. For carousel is used Owl-Carousel with simple code :
$("#our-work-carousel2").owlCarousel({
loop: true,
lazyLoad: true,
autoplay: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
slideSpeed: 300,
paginationSpeed: 400,
dotData: true,
dotsData: true,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: true,
itemsMobile: false,
onChange:callback,
});
function callback(event){
}
I would probably need some code in callback for reset svg animation, but i can´t figure out this solution. Thanks to all for every advice.
javascript html svg owl-carousel owl-carousel-2
asked 2 days ago
kores59
566
add a comment |
up vote
0
down vote
favorite
I have svg animation, made like this
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
JS for animating
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
setTimeout(draw, t); // Redraw
}());
and css
svg {
position: absolute;
top: 0;
border: 3px solid pink;
border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}
css is mainly for display swg when class active is setted. It is in carousel, so i need to display just one animation for each slide. But the problem is, that all svg are animating at the same time. I need to reset these animations everytime, when carousel change slide. For carousel is used Owl-Carousel with simple code :
$("#our-work-carousel2").owlCarousel({
loop: true,
lazyLoad: true,
autoplay: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
slideSpeed: 300,
paginationSpeed: 400,
dotData: true,
dotsData: true,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: true,
itemsMobile: false,
onChange:callback,
});
function callback(event){
}
I would probably need some code in callback for reset svg animation, but i can´t figure out this solution. Thanks to all for every advice.
javascript html svg owl-carousel owl-carousel-2
asked 2 days ago
kores59
566
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have svg animation, made like this
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
JS for animating
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
setTimeout(draw, t); // Redraw
}());
and css
svg {
position: absolute;
top: 0;
border: 3px solid pink;
border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}
css is mainly for display swg when class active is setted. It is in carousel, so i need to display just one animation for each slide. But the problem is, that all svg are animating at the same time. I need to reset these animations everytime, when carousel change slide. For carousel is used Owl-Carousel with simple code :
$("#our-work-carousel2").owlCarousel({
loop: true,
lazyLoad: true,
autoplay: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
slideSpeed: 300,
paginationSpeed: 400,
dotData: true,
dotsData: true,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: true,
itemsMobile: false,
onChange:callback,
});
function callback(event){
}
I would probably need some code in callback for reset svg animation, but i can´t figure out this solution. Thanks to all for every advice.
javascript html svg owl-carousel owl-carousel-2
asked 2 days ago
kores59
566
I have svg animation, made like this
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
JS for animating
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
setTimeout(draw, t); // Redraw
}());
and css
svg {
position: absolute;
top: 0;
border: 3px solid pink;
border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}
css is mainly for display swg when class active is setted. It is in carousel, so i need to display just one animation for each slide. But the problem is, that all svg are animating at the same time. I need to reset these animations everytime, when carousel change slide. For carousel is used Owl-Carousel with simple code :
$("#our-work-carousel2").owlCarousel({
loop: true,
lazyLoad: true,
autoplay: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
slideSpeed: 300,
paginationSpeed: 400,
dotData: true,
dotsData: true,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: true,
itemsMobile: false,
onChange:callback,
});
function callback(event){
}
I would probably need some code in callback for reset svg animation, but i can´t figure out this solution. Thanks to all for every advice.
javascript html svg owl-carousel owl-carousel-2
javascript html svg owl-carousel owl-carousel-2
asked 2 days ago
kores59
566
asked 2 days ago
kores59
566
asked 2 days ago
kores59
566
asked 2 days ago
kores59
566
asked 2 days ago
kores59
566
566
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.
To reset the animation you need to reset the variable a setting the value 0.
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You are awesome. Thank you so much!
– kores59
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.
To reset the animation you need to reset the variable a setting the value 0.
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You are awesome. Thank you so much!
– kores59
2 days ago
add a comment |
up vote
1
down vote
accepted
The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.
To reset the animation you need to reset the variable a setting the value 0.
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You are awesome. Thank you so much!
– kores59
2 days ago
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.
To reset the animation you need to reset the variable a setting the value 0.
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.
To reset the animation you need to reset the variable a setting the value 0.
var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>var loader = document.getElementsByClassName("loader")
, a = 0
, p = Math.PI
, t = 9;
(function draw() {
a++;
a %= 360;
var r = ( a * p / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( a > 180 ) ? 1 : 0
, anim = "M 0 0 v -125 A 125 125 1 "
+ mid + " 1 "
+ x + " "
+ y + " z";
Object.values(loader).forEach(item=>item.setAttribute("d",anim));
console.log('a:', a);
setTimeout(draw, t); // Redraw
}());
document.getElementById('reset-loader').addEventListener('click', () => a = 0);svg {
border: 3px solid pink;
border-radius: 50px;
}<svg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16'
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410'
xml:space='preserve'><path class='loader' transform='translate(125, 125)
scale(.84)'/>
</svg>
<button id="reset-loader">reset</button>answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
Santiago Pernigotti
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
Santiago Pernigotti
1015
answered 2 days ago
Santiago Pernigotti
1015
1015
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Santiago Pernigotti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You are awesome. Thank you so much!
– kores59
2 days ago
add a comment |
You are awesome. Thank you so much!
– kores59
2 days ago
You are awesome. Thank you so much!
– kores59
2 days ago
You are awesome. Thank you so much!
– kores59
2 days ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373518%2fhow-to-reset-svg-animation-in-owl-carousel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
