CODEWITHSUNDEEP
cssanimationreactjsmaterial-design
tehfailsafe
tehfailsafe

Reputation: 3451

Full screen transition animation in react

Looking for some help on how to approach this animation: https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm

Initial attempts with react router didn't go well, eventually decided I don't need dedicated routes for each open component. Now I am running into positioning issues...

The circle fills up the whole screen, so it needs to be in a div that is 100% x 100% and at 0, 0, but the items in the grid need their own correct positions. Currently I'm using isotope within a react component to layout the grid.

If I change the container div to 0,0 so the circle can scale up, the child divs also move from their original position. The circle needs to take over full screen but the thumbnail image to stay in place (until I tell it to move).

I'm not asking anyone to provide literal code examples, however just asking for a discussion on conceptually how to approach the problem.

Upvotes: 4

Views: 3204

Answers (1)

Persijn
Persijn

Reputation: 14990

Circle animation

Here is my attempt to create the circle growing animation.
Short explination of what happends:

  1. Needs a container element (relative positioned).
  2. click element (position absolute).
  3. add click event listener on the element.
  4. click event creates a sibling element (absolute positioned).
  5. position this element to be in the center of the clicked element.
  6. Increase the size of the circle.

/*document.addEventListener('"DOMContentLoaded', function() {*/
var spesial = document.getElementsByClassName("spesial");
var container = document.getElementsByClassName("container");
var togglecircle = false;

spesial[0].addEventListener('click', function() {
  var circle = document.createElement('div');
  circle.className = "circle"
  container[0].appendChild(circle);
  var size = 0;
  if (this.offsetWidth > this.offsetHeight) {
    size = container[0].offsetWidth;
  } else {
    size = container[0].offsetHeight;
  }
  console.log(this.offsetTop);

  circle.style.top = this.offsetTop + (this.offsetHeight / 2) + "px";
  circle.style.left = this.offsetLeft + (this.offsetWidth / 2) + "px";
  circle.style.width = size * 2 + "px";
  circle.style.height = size * 2 + "px";
});
/*});*/
.container {
  position: relative;
  height: 300px;
  background-color: black;
  overflow: hidden;
}
.spesial {
  z-index: 10;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50%;
  height: 150px;
  background-color: yellow;
  border: 2px solid #888;
  cursor: pointer;
}
.circle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  transition: width 3s, height 3s;
  background-color: yellow;
  transform: translate(-50%, -50%);
}
<div class="container">
  <div class="spesial">
    <h1>Cool header</h1>
    <p>lorem ipsum etc, etc,</p>
  </div>
</div>

Upvotes: 3

Related Questions