chinchang / cta.js Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 144.0 488 KB

Animate your 'action-to-effect' paths

Home Page: https://kushagra.dev/lab/ctajs/

License: MIT License

JavaScript 60.04% HTML 39.96%

cta.js's People

Contributors

Stargazers

Watchers

Forkers

rudimk noahmanion tanhuynhngoc rahulsimpact punken twocngdagz nalinc iarnaud anurajricky yashilanka yomigits fertas oleksandr2015 dmanzer2 pandroid umarmughal tusharv lucarosaldi anenth niraj-thapa davedele ravinthranath 925800521 jbusch cranca ferdov benediktharter dwfcommunication carabina conqs a-chisholm calzinispaiati edwinyzh shoshinsha e-studio2015 renamathai alexgilev fengyiyi compbusonline maggieluo baqianxin glivera mostafasedaghat ldg warpsmith unrepeteable tabblack trishasalas akreturn deavy blooparksystems findigital koburakuda cosanca riyue jingdor monw3c ron-yu widiyanata bazhuang cube3power txd159 tweed x3hong hquestion yotakawato trestyeung tannyzz christiantrejo ydlsp2015 henryblinds athmangude candiceharper mychaelgo itmyprofession michael-gabenna wtz thram duyquoc apptorg angrycrotch chrismoulton themattwilliams imarty everdimension weguri samadmoizc8 yetone jamesliu96 skarred allenwaston creative-srijon googleask prayagverma francisco33 murthy71191 luxifertran andreioprisan ocl29 dev-arena

cta.js's Issues

Angular...

This looks cool...
I would like to popup modal when user navigates to another page, is that possible? Let's say in page-1 i have a tile (just like in your demo) and when user clicks on it, it goes to page-2 (which has same color and some other stuff, just like in demo) when url changes, from localhost:3000/#/page-1 to localhost:3000/#/page-2. Will this work? Didn't tested, hope i can be useful for web applications

Add basic tests

Add some basic tests for the library.

5 months ago this brilliance was created - can you tell us all how to make colored boxes responsive?

Flexbox in the middle part would be great (the colored boxes that open/animate section) -- really interested in flexbox

PROBLEM: when the browser is made small the boxes all cram together.

Question: Is there a way to have them align all in a row when browser LARGE -- ie. setting a width i guess?

SO: then when the browser is small they would be one above the other.

Can you help us all with this? Grid needed i think.

whatever happens great thanks!

Don

not compatible with hybrid app development framework like ionicframework

it would be great if cta works with ionicframework since cta has an attractive animation features. Also this follows material design concepts I have tried integrate it with ionic material and the animation didnt work because it appending run time element into document body (ionic uses document with ). I had to modify the library. If you can give the parent element when declaring click events that would be great.

Thanks

Not compatible with bootstrap

This animation is awesome , but it is not compatible with bootstrap.(especially the closing part)

Incorrect AMD export

The AMD export code should be wrapped in a function like so:

define(function () {
  return cta;
});

Currently the module causes error with AMD loader like RequireJS because cta() is run immediately upon load.

If you F5 to refresh your browser, and then press "esc" to fire the event I don't have the transition
if you F5, then click inside the browser window, then "esc" I got the expecting transition

Strange ....

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>cta.js - Animate your 'action-to-effect' paths!</title>
  <meta name="author" content="Kushagra Gour">
  <meta name="description" content="Animate any element onto another element.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
   .e1 {
      position: absolute;
      background: #F90;
      border-radius: 50%;
      margin-left: -10px;
      margin-top: -10px;
      left: 10px;
      top: 430px;
      width: 20px;
      height: 20px;
    }
   .e2 {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px;
      background: #EA006F;
      color: white;
      z-index: 1;
      transition: 200ms ease;
    }
   .hide {
      visibility: hidden;
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="e1"></div>
  <div class="e2 hide"></div>
  <script src="src/cta.js"></script>
  <script>
   addEventListener('keyup', function(e) {
     if (e.which === 27) {
      var e1 = document.querySelector('.e1'),
       e2 = document.querySelector('.e2');
      e1.classList.add('hide');
      cta(e1, e2, {
         duration: 3
       },
       function() {
         e2.classList.remove('hide');
       });
     }
   }, false);
  </script>
</body>

</html>

Issue on JSBin: http://jsbin.com/sebalilana

Subtract elementheight from modal

Hello,
how can I subtract an elementheight from the modal?

Kind regards.

chinchang / cta.js Goto Github PK

cta.js's People

Contributors

Stargazers

Watchers

Forkers

cta.js's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs