Protein Dynamics ease example

dyn-example.js

const goods = [
  { title: 'Мопед', color: '#05668D' },
  { title: 'Велик', color: '#028090' },
  { title: 'Тачила', color: '#00A896' },
  { title: 'Водокачка', color: '#02C39A' },
  { title: 'Платье', color: '#F0F3BD' },
  { title: 'Штора', color: '#AEF6C7' },
  { title: 'Люстра', color: '#5B8266' },
  { title: 'Пес', color: '#294936' }
];

const origin = Screen.layer('Group');
goods.forEach((good, i) => {
  Screen.layer('title').text(good.title);
  Screen.layer('image').style({ fill: good.color });
  
  let newGood = origin.clone();
  newGood.attr({
    transform: `translate(10 ${i * 120})`,
    filter: svg.filter(
      Snap.filter.shadow(2, 2, 4, 'rgba(0, 0, 0, 0.3)')
    )
  });

  newGood.click(() => { Screen.goTo('About'); });
  origin.after(newGood);
});

origin.remove();

origin.remove()