0

I am currently stuck at a point. i am using css animations to move p elements inside div from left to right at different speed. I want them to change their direction once they touch each other? How can I do this?

Sujay
  • 613
  • 1
  • 5
  • 16

1 Answers1

0

There was a new browser API introduced for this recently that might do what you want

Intersection Observer API

otherwise you might need to calculate that yourself using methods explained in How to check if an element is overlapping other elements? or https://gist.github.com/jtsternberg/c272d7de5b967cec2d3d by getting position and size of elements and compare them.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I can do that but I need some event to fire to get the position information of each element.? How to fire that event? How can I get continuous information about say left property of the element? – Sujay Mar 08 '18 at 09:36
  • Right. I don't know how that works with CSS animations. Using `window.requestAnimationFrame()` might do it. See also https://stackoverflow.com/questions/24555612/css3-js-get-position-of-element-during-animation. Perhaps it's easier with web animatons? https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API. – Günter Zöchbauer Mar 08 '18 at 09:38