I am creating a simple animation banner type thing that just displays a few strings and an image. I had it working then I changed some variable names around and can't seem to find why it is not working.
https://jsfiddle.net/06uto8av/3/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 200%;
}
#container {
width: 700px;
height: 400px;
background-color: black;
margin: 40px auto;
position: relative;
overflow: hidden;
opacity: 0;
}
.quote {
font-size: 3em;
font-weight: bold;
position: absolute;
width: 600px;
text-align: center;
top: 60px;
left: 0px;
color: crimson;
text-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}
#img {
top: 60px;
}
img {
position: relative;
width:620px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="quote" id="quote1">Thirsty?</div>
<div class="quote" id="quote2">Love beer?</div>
<div class="quote" id="quote3">Well look no further!</div>
<div class="quote" id="quote4">Come on down to...</div>
<div class="quote" id="quote5">Steve's Bar!</div>
<div class="quote" id="img"><img src="img/stevebar.jpg" alt="steve bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script>
var idContainer = document.getElementById("container");
var idQuote1 = document.getElementById("quote1");
var idQuote2 = document.getElementById("quote2");
var idQuote3 = document.getElementById("quote3");
var idQuote4 = document.getElementById("quote4");
var idQuote5 = document.getElementById("quote5");
var idImg = document.getElementById("img");
var tl1 = new TimelineLite();
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
</script>
</body>
</html>
You're missing a comma ;) see: https://jsfiddle.net/0Le94gsL/
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2, 1, {delay: 1, x: 1000, ease:Back.easeIn }) // You needed a comma here just after idQuote2
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
Related
Using this resource https://htmldom.dev/create-resizable-split-views/ and some tweaking I was able to mock up a quick prototype of a page I want to create. I'm 90% there however I've been stuck on two small problems for around 10 hours now and cant figure out a way to fix it.
The main issue is the plotly chart in the bottom left corner. I am able to resize the div and chart within the div horizontally just fine. I can also resize vertically when making the chart larger however when going back vertically (making it smaller) the div/chart does not appear to change.
Can anyone please point me in the right direction? Below is the code pen for what I've got so far. The coloured borders are irrelevant - they were just to help visualize.
https://codepen.io/kpj96/pen/QWmBZPP
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<meta charset="utf-8" />
<title>HTML DOM - Create resizable split views</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/demo.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"
/>
</head>
<body>
<div class="container">
<div class="container__main">
<div class="container__top">
<div class="firstchild">
<div class="toggles">
<span>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</span>
<span>
<input type="checkbox" > checkbox1 </input>
<input type="checkbox" > checkbox2 </input>
</span>
</div>
<div class="expiryGrid">Table</div>
</div>
</div>
<div class="resizer" data-direction="vertical"></div>
<div class="container__bottom">
<div class="container__left" id="myDiv"></div>
<div class="resizer" data-direction="horizontal"></div>
<div class="container__right">Table</div>
</div>
</div>
</div>
</body>
</html>
<style>
.container {
display: flex;
/* Misc */
border: 1px solid black;
height: 50rem;
width: 100%;
}
.resizer[data-direction='horizontal'] {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 5px;
}
.resizer[data-direction='vertical'] {
background-color: #cbd5e0;
cursor: ns-resize;
height: 5px;
width: 100%;
}
.container__main {
flex: 1;
/* Misc */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.firstchild {
align-items: center;
display: block;
justify-content: center;
width: 100%;
height: 100%;
}
.container__top {
height: 40%;
width: 100%;
/* Misc */
}
.toggles {
border: 1px solid red;
max-height: 10%;
width: 100%;
justify-self: stretch;
align-self: center;
}
.expiryGrid {
border: 1px solid blue;
height: 90%;
width: 100%;
}
.container__bottom {
flex: 1;
width: 100%;
/* Misc */
display: flex;
}
.container__left {
width: 38%;
/* Misc */
align-items: center;
display: flex;
justify-content: center;
}
.container__right {
flex: 1;
border: 1px solid green;
/* Misc */
align-items: center;
display: flex;
justify-content: center;
}
.toggles span {
justify-self: stretch;
align-self: center;
display: inline-block;
padding-right: 10px;
}
</style>
<script>
var xData = [
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013],
[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013]
];
var yData = [
[74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],
[45, 42, 50, 46, 36, 36, 34, 35, 32, 31, 31, 28],
[13, 14, 20, 24, 20, 24, 24, 40, 35, 41, 43, 50],
[18, 21, 18, 21, 16, 14, 13, 18, 17, 16, 19, 23]
];
var colors = ['rgba(67,67,67,1)', 'rgba(115,115,115,1)', 'rgba(49,130,189, 1)',
'rgba(189,189,189,1)'
];
var lineSize = [2, 2, 4, 2];
var labels = ['Television', 'Newspaper', 'Internet', 'Radio'];
var data = [];
for ( var i = 0 ; i < xData.length ; i++ ) {
var result = {
x: xData[i],
y: yData[i],
type: 'scatter',
mode: 'lines',
line: {
color: colors[i],
width: lineSize[i]
}
};
var result2 = {
x: [xData[i][0], xData[i][11]],
y: [yData[i][0], yData[i][11]],
type: 'scatter',
mode: 'markers',
marker: {
color: colors[i],
size: 12
}
};
data.push(result, result2);
}
var layout = {
showlegend: false,
xaxis: {
showline: true,
showgrid: false,
showticklabels: true,
linecolor: 'rgb(204,204,204)',
linewidth: 2,
autotick: false,
ticks: 'outside',
tickcolor: 'rgb(204,204,204)',
tickwidth: 2,
ticklen: 5,
tickfont: {
family: 'Arial',
size: 12,
color: 'rgb(82, 82, 82)'
}
},
yaxis: {
showgrid: false,
zeroline: false,
showline: false,
showticklabels: false
},
margin: {
autoexpand: false,
l: 100,
r: 20,
t: 100
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.0,
y: 1.05,
xanchor: 'left',
yanchor: 'bottom',
text: 'Main Source for News',
font:{
family: 'Arial',
size: 30,
color: 'rgb(37,37,37)'
},
showarrow: false
},
{
xref: 'paper',
yref: 'paper',
x: 0.5,
y: -0.1,
xanchor: 'center',
yanchor: 'top',
text: 'Source: Pew Research Center & Storytelling with data',
showarrow: false,
font: {
family: 'Arial',
size: 12,
color: 'rgb(150,150,150)'
}
}
]
};
for ( var i = 0 ; i < xData.length ; i ++ ) {
var result = {
xref: 'paper',
x: 0.05,
y: yData[i][0],
xanchor: 'right',
yanchor: 'middle',
text: labels[i] + ' ' + yData[i][0] +'%',
showarrow: false,
font: {
family: 'Arial',
size: 16,
color: 'black'
}
};
var result2 = {
xref: 'paper',
x: 0.95,
y: yData[i][11],
xanchor: 'left',
yanchor: 'middle',
text: yData[i][11] +'%',
font: {
family: 'Arial',
size: 16,
color: 'black'
},
showarrow: false
};
layout.annotations.push(result, result2);
}
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
document.addEventListener('DOMContentLoaded', function () {
const resizable = function (resizer) {
const direction = resizer.getAttribute('data-direction') || 'horizontal';
const prevSibling = resizer.previousElementSibling;
const nextSibling = resizer.nextElementSibling;
// The current position of mouse
let x = 0;
let y = 0;
let prevSiblingHeight = 0;
let prevSiblingWidth = 0;
// Handle the mousedown event
// that's triggered when user drags the resizer
const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;
const rect = prevSibling.getBoundingClientRect();
prevSiblingHeight = rect.height;
prevSiblingWidth = rect.width;
// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;
switch (direction) {
case 'vertical':
const h =
((prevSiblingHeight + dy) * 100) /
resizer.parentNode.getBoundingClientRect().height;
prevSibling.style.height = `${h}%`;
break;
case 'horizontal':
default:
const w =
((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
prevSibling.style.width = `${w}%`;
break;
}
const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
resizer.style.cursor = cursor;
document.body.style.cursor = cursor;
prevSibling.style.userSelect = 'none';
prevSibling.style.pointerEvents = 'none';
nextSibling.style.userSelect = 'none';
nextSibling.style.pointerEvents = 'none';
};
const mouseUpHandler = function () {
resizer.style.removeProperty('cursor');
document.body.style.removeProperty('cursor');
prevSibling.style.removeProperty('user-select');
prevSibling.style.removeProperty('pointer-events');
nextSibling.style.removeProperty('user-select');
nextSibling.style.removeProperty('pointer-events');
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
Plotly.Plots.resize('myDiv');
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
};
// Query all resizers
document.querySelectorAll('.resizer').forEach(function (ele) {
resizable(ele);
});
});
</script>
I am using ScrollMagic's section wipes to fade one panel into the next on scroll, this works perfect but I was wondering if it is possible to snap to the next panel while scrolling (now if you stop scrolling you are half faded between the two panels).
I know I could use fullpage.js since they offer exactly that effect but I rather don't add another library to my already heavy javascript loaded website and i'm wondering if I could not get that same effect with ScrollMagic.
var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".panel2", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel3", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel4", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone});
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "100%"
})
.setPin("#slider")
.setTween(wipeAnimation1)
.addTo(controller);
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
text-align:center;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
text-align:center;
}
.panel {
height: 100%;
width: 100%;
position: absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer">spacer</div>
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="spacer">spacer</div>
So Jan Paepke from ScrollMagic helped to come up with a solution. It basically comes down to unlinking the animation from the scroll and to initiate/animate each panel by itself working with triggers.
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "700%"
})
.setPin("#slider")
.addTo(controller);
var panels = [
{
trigger: '#trigger2',
name: '.panel2'
},
{
trigger: '#trigger3',
name: '.panel3'
},
{
trigger: '#trigger4',
name: '.panel4'
}
]
for (var i=0; i<panels.length; i++) {
var panel = panels[i];
new ScrollMagic.Scene({
triggerElement: panel.trigger,
triggerHook: 0
})
.setTween(new TimelineMax()
.fromTo(panel.name, 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone}))
.addTo(controller);
}
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
}
#trigger2 {
position: absolute;
top: 100vh;
}
#trigger3 {
position: absolute;
top: 300vh;
}
#trigger4 {
position: absolute;
top: 500vh;
}
#sliderwrapper {
position: relative;
height: auto;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
}
.panel {
height: 100vh;
width: 100%;
position:absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer"></div>
<div id="sliderwrapper">
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="trigger2"></div>
<div id="trigger3"></div>
<div id="trigger4"></div>
</div>
<div id="spacer"></div>
I have something like browser game.
On click user throw dices. Dices fall through shadow, but there are different block and dice has z-index : 3 and shadow z-index : 2;
This problem only on iOS.
For animation use library anime.js.
Maybe someone had the same problem.
Try to add screenshot for show the problem:
.dice {
width: 144px;
height: 144px;
left: -200px;
top: -450px;
z-index: 3;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translateZ(-72px) rotateX(313deg) rotateY(226deg) scale3d(0.35, 0.35, 0.35);
z-index: 3;
.cube_face {
width: 144px;
height: 143px;
border: 1px solid #f5f3e6;
border-radius: 15px;
}
}
<div class="diceShadow"></div>
<div class="dice">
<div class="cube_face cube_face_front"></div>
<div class="cube_face cube_face_back big-shadow"></div>
<div class="cube_face cube_face_right"></div>
<div class="cube_face cube_face_left shadow"></div>
<div class="cube_face cube_face_top"></div>
<div class="cube_face cube_face_bottom"></div>
</div>
anime({
targets: dices[count],
left: [{
value: '-200px',
duration: 0
},
{
value: dicePositions[count].x - 56,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].x + 15,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].x + 30,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].x + 84,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
top: [{
value: '-850px',
duration: 0
},
{
value: dicePositions[count].y - 30,
duration: duration / 2,
easing: 'easeInCubic'
},
{
value: dicePositions[count].y - 95,
duration: duration / 10,
easing: 'easeOutQuad'
},
{
value: dicePositions[count].y + 10,
duration: duration / 10,
easing: 'easeInQuad'
},
{
value: dicePositions[count].y + 50,
duration: duration / 5,
easing: 'easeOutQuad'
},
],
translateZ: [{
value: '-72px',
duration: 0
}, ],
rotateX: [{
value: dicePositions[count].rotateX + 132,
duration: 0
},
{
value: dicePositions[count].rotateX + 32,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateX,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutCubic',
},
],
rotateY: [{
value: dicePositions[count].rotateY - 100,
duration: 0
},
{
value: dicePositions[count].rotateY - 39,
duration: duration / 2,
easing: 'easeInOutQuad'
},
{
value: dicePositions[count].rotateY,
duration: duration / 4,
delay: duration / 10,
easing: 'easeOutQuad',
},
],
rotateZ: [{
value: dicePositions[count].rotateZ,
duration: 0
}, ],
scaleX: [{
value: 0.35,
duration: 0
}, ],
scaleY: [{
value: 0.35,
duration: 0
}, ],
scaleZ: [{
value: 0.35,
duration: 0
}, ],
});
Problem solved! I had DOM elements that were outside parent`s block. When I positioned them to parent block area and add opacity, to hide them - my dices fell into place.
Example:
were :
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: -100%;
top: -100%;
}
&[data-show='true'] {
left: 9%;
top: 14%;
}
}
now:
#train {
width: 158px;
height: 146px;
transition: all 0.4s ease-in;
background: url('../img/train.png') no-repeat center;
background-size: cover;
&[data-show='false'] {
left: 0%;
top: 17px;
opacity: 0;
}
&[data-show='true'] {
left: 9%;
top: 14%;
opacity: 1;
}
}
I am using the jquery circle progress library. I need to have the full progress represent as 100%, however the actual value placed on is 150%.
I need to change the colour of that extra 50%.
Here is the HTML:
<div id="circle"></div>
Here is the JS:
$('#circle').circleProgress({
value: 1.50,
size: 100,
fill: { color: "#ff1e41" }
});
The following is a fiddle: https://jsfiddle.net/2pekq9zw/
How can I change the colour of that extra 50% ?
This is not exactly what you want (because you can't use number > 1 in the value), but the final view is what you are looking for:
https://jsfiddle.net/vz9dr78a/2/
I created two circles that overlap each other, the first is 100% and the second is 50%.
Once the animation of the first circle is done - the animation of the second circle will start:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).on('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
here is a snippet:
$('#circle1').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
}).one('circle-animation-end', function() {
$('#circle2').circleProgress({
value: 0.5,
size: 100,
fill: { color: "#00ff00" },
emptyFill: 'rgba(0, 0, 0, 0)'
})
});
.circle-container {
position: relative;
}
.circle-container .circle {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div class="circle-container">
<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
</div>
Basically the same as the other attempts, though I tried to eliminate the lagging feel of the second circle starting so it feels more natural.
// js
$('#circle1').circleProgress({
value: 1,
size: 100,
animation: { duration: 1200, easing: "linear" },
fill: { color: "#ff1e41" }
});
$('#circle1').on('circle-animation-end', () => {
$('#circle2').circleProgress({
value: .50,
animation: { duration: 1200, easing: "linear"},
size: 100,
fill: { color: "#00FF00" },
emptyFill: 'rgba(0, 0, 0, 0)'
});
})
// css
#circle1 {
position: absolute;
}
#circle2 {
position: absolute;
}
// html
<div id="circle1"></div>
<div id="circle2"></div>
https://jsfiddle.net/2pekq9zw/10/
If you notice, my circles blend together a bit nicer than the other answers
By creating a second, smaller circle overlayed on the first you could show the extra, for example:
$('#circle').circleProgress({
value: 1,
size: 100,
fill: { color: "#ff1e41" }
});
$('#circle2').circleProgress({
value: 0.50,
size: 94,
fill: { color: "darkred" }
});
#circle { position:absolute; top:0;left:0}
#circle2 { position:absolute;top: 3px; left: 3px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.js"></script>
<div id="circle"></div>
<div id="circle2"></div>
I am having difficulty converting this working greensock animation into an angular animation. Can anyone suggest how I can do this? This was going to be tied to an angular modal wizard so this does need to be an angular animation.
I was hoping to add an animation class to the html that could be used by the javascript. I don't care if it is addClass/removeClass, enter/leave, etc. I have tried a few times and I am having difficulty coming up with a fairly simple solution.
function percentToPixel(perc) {
return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}
var cursor = document.getElementById('cursor'),
step1 = document.getElementById('joinModalNavStep1'),
step2 = document.getElementById('joinModalNavStep2'),
step3 = document.getElementById('joinModalNavStep3'),
step4 = document.getElementById('joinModalNavStep4'),
step5 = document.getElementById('joinModalNavStep5');
TweenMax.set(cursor, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step2, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step3, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step4, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step5, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50
});
var tlStepNavAnimation = new TimelineMax({
paused: true
});
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
$("#nextBtn").on("click", navigateToNextStep);
$("#previousBtn").on("click", navigateToPreviousStep);
function navigateToNextStep() {
tlStepNavAnimation.play();
}
function navigateToPreviousStep() {
tlStepNavAnimation.reverse();
}
html,
body {
overflow: hidden;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.stepNavContainer {
position: relative;
height: 50px;
width: 50%;
left: 25%;
border: 1px solid red;
}
.circle {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
#cursor {
display: block;
position: absolute;
width: 50px;
height: 50px;
background: #c32026;
border-radius: 50%;
}
.step {
background: #999999;
}
.btn {
width: 100px;
height: 50px;
border: 1px solid black;
}
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="previousBtn" class="btn">
<span>Previous</span>
</div>
<div id="nextBtn" class="btn">
<span>Next</span>
</div>
<div class="stepNavContainer">
<span id="joinModalNavStep1" class="circle step"></span>
<span id="joinModalNavStep2" class="circle step"></span>
<span id="joinModalNavStep3" class="circle step"></span>
<span id="joinModalNavStep4" class="circle step"></span>
<span id="joinModalNavStep5" class="circle step"></span>
<span id="cursor" class="circle"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="script.js"></script>
</body>
</html>