eff-anim/dist/index.js

Librería de efectos y animaciones con React

"use strict";var r=require("react/jsx-runtime"),n=require("react");!function(r,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}("/* default effects */\r\n\r\n.eff-left {\r\n  transform: translate3d(100px, 0, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n\r\n}\r\n\r\n.eff-right {\r\n  transform: translate3d(-100px, 0, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-bottom {\r\n  transform: translate3d(0, 100px, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-top {\r\n  transform: translate3d(0, -100px, 0);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n/* default active animations */\r\n\r\n\r\n.eff-left.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n\r\n}\r\n\r\n.eff-right.animation {\r\n opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-bottom.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-top.animation {\r\n  opacity: 1;\r\n  transform: none;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n\r\n/* zoom effects */\r\n\r\n\r\n.eff-zoom {\r\n  transform: scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-left {\r\n  transform: translate3d(100px, 0, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-right {\r\n  transform: translate3d(-100px, 0, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-top {\r\n  transform: translate3d(0, -100px, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n.eff-z-bottom {\r\n  transform: translate3d(0, 100px, 0) scale(0.6);\r\n  opacity: 0;\r\n  transition-property: opacity, transform;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n/* zoom active animations */\r\n\r\n\r\n.eff-zoom.animation {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-left.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-right.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-top.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-z-bottom.animation {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n\r\n/* flip effects */\r\n\r\n.eff-flip {\r\n  transform: perspective(2500px) rotateY(-100deg);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-left {\r\n  transform: perspective(2500px) rotateY(-100deg) translateX(100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-right {\r\n  transform: perspective(2500px) rotateY(100deg) translateX(-100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-top {\r\n  transform: perspective(2500px) rotateX(-100deg) translateY(-100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-bottom {\r\n  transform: perspective(2500px) rotateX(100deg) translateY(100px);\r\n  transition-property: transform;\r\n  opacity: 0;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n/* flip active animations */\r\n\r\n.eff-flip.animation {\r\n  transform: perspective(2500px) rotateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-left.animation {\r\n  transform: perspective(2500px) rotateY(0) translateX(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-right.animation {\r\n  transform: perspective(2500px) rotateY(0) translateX(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-top.animation {\r\n  transform: perspective(2500px) rotateX(0) translateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n\r\n.eff-f-bottom.animation {\r\n  transform: perspective(2500px) rotateX(0) translateY(0);\r\n  opacity: 1;\r\n  transition: transform 0.5s, opacity 0.5s;\r\n}\r\n");exports.ContainerViews=function(t){var a=t.children,o=t.threshold,s=void 0===o?.9:o,i=t.effect,e=void 0===i?"":i,f=n.useRef(null),p=n.useState(!1),c=p[0],m=p[1];return n.useEffect((function(){var r=f.current;if(r){var n=new IntersectionObserver((function(r){var n=r[0];m(n.isIntersecting)}),{threshold:s});return n.observe(r),function(){n.disconnect()}}}),[s]),r.jsx("section",{ref:f,className:"content ".concat(e," ").concat(c?"animation":""),children:a})};
//# sourceMappingURL=index.js.map