<div id="timelineParameters">
<div class="line">
<div class="square el"></div>
</div>
<div class="line">
<div class="circle el"></div>
</div>
<div class="line">
<div class="triangle el"></div>
</div>
</div>.line {
position: relative;
}
.square {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #0f97ea;
}
.circle {
position: absolute;
top: 60px;
left: 0;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #0f97ea;
}
.triangle {
position: absolute;
top: 120px;
left: 0;
border-right: 25px solid transparent;
border-bottom: 43.3012px solid #0f97ea;
border-left: 25px solid transparent;
}var timelineParameters = anime.timeline({
direction: 'alternate',
loop: true
});
timelineParameters
.add({
targets: '#timelineParameters .square.el',
translateX: [ { value: 80 }, { value: 220 }, { value: 300 } ],
translateY: [ { value: 60 }, { value: 120 }, { value: 120 } ],
duration: 3000
})
.add({
targets: '#timelineParameters .circle.el',
translateX: [ { value: 80 }, { value: 220 }, { value: 300 } ],
translateY: [ { value: 60 }, { value: -60 }, { value: -60 } ],
duration: 3000,
offset: 200
})
.add({
targets: '#timelineParameters .triangle.el',
translateX: [ { value: 80 }, { value: 300 } ],
translateY: [ { value: -120 }, { value: -60 }, { value: -60 } ],
duration: 3000,
offset: 400
});
External CSS
This Pen doesn't use any external CSS resources.