Web Animations Transitions: feature request

[Kurniawandering]

trafficstars

Hi guys,

Really appreciate the effort for creating this tutorial. I wish you could add more thorough explanations on the how-and-why some decisions are made.

I think that it would be very useful if you add some comments on every code snippet one has to add to follow the tutorial.

for example to explain this added styling:

  var bounds = link.getBoundingClientRect();
  effectNode.style.left = bounds.left + bounds.width / 2 + 'px';
  effectNode.style.top = bounds.top + bounds.height / 2 + 'px';

That would be great! Otherwise, I will also be happy to contribute...

Thanx!

[motss]

@Kurniawandering To center the ripple. This has to be achieved alongside the styling in site.css.

// site.js
  // PART 1 - To position the ripple.
  var bounds = link.getBoundingClientRect();
  effectNode.style.left = bounds.left + bounds.width / 2 + 'px';
  effectNode.style.top = bounds.top + bounds.height / 2 + 'px';

/* site.css */
/* PART 2 - Reposition the ripple so that the ripple appears from the center of the anchor tag. */
div.circleEffect: {
  ...
  margin-left: -120vw;
  margin-top: -120vw;
  ...
}