salom

[Ismoil2022]

  {value: [150, -160], duration: 190, endDelay: 20, easing: 'cubicBezier(0.225, 1, 0.915, 0.980)'},
  {value: 4, duration: 120, easing: 'easeInQuad'},
  {value: 0, duration: 120, easing: 'easeOutQuad'}
],
scaleX: [
  {value: [.25, .85], duration: 190, easing: 'easeOutQuad'},
  {value: 1.08, duration: 120, delay: 85, easing: 'easeInOutSine'},
  {value: 1, duration: 260, delay: 25, easing: 'easeOutQuad'}
],
scaleY: [
  {value: [.3, .8], duration: 120, easing: 'easeOutSine'},
  {value: .35, duration: 120, delay: 180, easing: 'easeInOutSine'},
  {value: .57, duration: 180, delay: 25, easing: 'easeOutQuad'},
  {value: .5, duration: 190, delay: 15, easing: 'easeOutQuad'}
],
delay: anime.stagger(80)

}, 1000)
.add({
targets: '.dot',
opacity: { value: 1, duration: 100 },
translateY: 250,
scaleY: [4, .7],
scaleX: { value: 1.3, delay: 100, duration: 200},
duration: 280,
easing: 'cubicBezier(0.350, 0.560, 0.305, 1)'
}, '-=290')
.add({
targets: '.letter-m .line',
easing: 'easeOutElastic(1, .8)',
duration: 600,
d: function(el) { return el.dataset.d2 },
begin: function(a) { a.animatables[0].target.removeAttribute('stroke-dasharray'); }
}, '-=140')
.add({
targets: ['.letter-a', '.letter-n', '.letter-i', '.letter-e'],
translateX: 0,
easing: 'easeOutElastic(1, .6)',
duration: 800,
delay: anime.stagger(40, {from: 2.5}),
change: function(a) { a.animatables[2].target.removeAttribute('stroke-dasharray'); }
}, '-=600')
.add({
targets: '.letter-m .line',
d: function(el) { return el.dataset.d3 },