search

miniMAC / magic

CSS3 Animations with special effects
https://www.minimamente.com/project/magic/
MIT License
8.45k stars 1.18k forks source link

Is it possible to improve perf with that kind of technics : https://github.com/googlechrome/flipjs #31

Closed Rebolon closed 7 years ago

Rebolon commented 7 years ago

Hi,

i really love this project but i'm wondering if the performance could reach 60fps using First Last Invert Plays technics.

I tried to do this but the rendering is not good with FLIP technic (try in chrome or ES6 browser compliant) :

`

<html>
<head>
<link crossorigin="anonymous" href="/node_modules/magic/magic.min.css"i media="all" rel="stylesheet" />
<script crossorigin="anonymous" src="/node_modules/FLIP/dist/flip.js"></script>
<script crossorigin="anonymous" src="/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>

open the chrome debug and compare FPS
<br />

<div id="flip" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>

<br/>

<div id="std" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>

<script>
let elFlip = document.querySelector('#flip');

elFlip.onclick = () => {
  let flip = new FLIP({
    element: elFlip,
    duration: 2000
  });
  flip.first();
  flip.last('puffIn');
  flip.invert();
  flip.play();

  flip.removeClass('puffIn');
};

$('#std').click(function () {
  $(this).addClass('puffIn');
});
</script>
</body>
</html>

`