Hi there,
I was wondering if its possible to customise an animation effect that wix do not provide such as the wheel effect something like this, where the blue bar moves?
Hi David,
Thank you for that. Just wondering how to get it started. I saw this online but have no idea how to go about coding it.
@jermainelim if you want, you can also do some adjustments to my timer to get this effect:
https://jonatandor35.wixsite.com/test/timer-audio
Just adjust it to your design and change the trigger and the duration.
You put a circle shape and use the svg source to set the progress line.
(but maybe it’ll be easier to use the html option if you’re not familiar with svg).
@jermainelim Ah, well JSFiddles are super easy to implement, it’s just copy pasting with some minor tweaks.
See how here:
https://www.skeptischmedia.com/css-iframe-tutorial
@skmedia Apparently this particular code requires Babel+JSX. I might be out of my league trying to combine all three. lol
@David - SKmedia I don't think I did it right? The code uses babel + JSX. Any idea how I could adjust that?
Link is here:
https://jsfiddle.net/kimmobrunfeldt/72tkyn40/
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css"/>
<script src="progressbar.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width
);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
</script>
</html>
@jonatandor35 That is awesome! I’ve managed to modify it. Seems to have trouble trying to sync text and circle value at once. Can’t seem to get the formula right.
@jermainelim see an example here:
https://jonatandor35.wixsite.com/test/wheel