React Headers:

React Mega Menu with Fading Effect

Menus are inseparable items for any website, and if you have a page and want to increase the number of its followers, it is better to use a menu to change its design. This is the React Mega Menu with Fading Effect that allows you to change the appearance of your page easily. If you use this Mega Menu Code on your page, you can classify all content of your website into three or four parts. These React JS Menu Code also have a more organized design, and as a result, you are able to attract more viewers.

We have prepared the preview of this Mega Menu Effect down below so that you can look at it and realize its performance. By looking at this preview, you can understand that the background of this code is blue with white writing. When you put the cursor of the mouse on each item, you will face a white page that represents the subcategories of each part. These subcategories are represented vertically in blue color. This Header Menu Fading Effect is so attractive, and you can use it to gain more followers as soon as possible.

Mega Menu Code

React JS Menu Code

Mega Menu Effect

Header Menu Fading Effect

<!-- This script got from frontendfreecode.com -->
<div id="root"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
* {
	box-sizing: border-box;
}
:root {
	--white: #fff;
	--grey: #f1f4f8b0;
	--dark-grey: #6b7c93;
	--green: #24b47e;
	--teal: #4F96CE;
	--blue: #6772e5;
	--dark-blue: #4F3EF5;
	--spacer: 28px;
}
body {
	font-family: karla, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--dark-grey);
}
a {
	text-decoration: none;
	color: var(--blue);
}
a:hover, a:focus {
	color: var(--dark-blue);
}
ul {
	list-style: none;
	padding-left: 0;
}
p {
	margin-top: 0;
	margin-bottom: 1rem;
}

function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} 
const { Component, Children } = window.React;
const { keyframes, default: styled } = window.styled;
const { Flipper, Flipped } = window.ReactFlipToolkit;
const getDropdownRootKeyFrame = ({ animatingOut, direction }) => {
  if (!animatingOut && direction) return null;
  return keyframes`
  from {
    transform: ${animatingOut ? "rotateX(0)" : "rotateX(-15deg)"};
    opacity: ${animatingOut ? 1 : 0};
  }
  to {
    transform: ${animatingOut ? "rotateX(-15deg)" : "rotateX(0)"};
    opacity: ${animatingOut ? 0 : 1};
  }
`;
};
const DropdownRoot = styled.div`
  transform-origin: 0 0;
  animation-name: ${getDropdownRootKeyFrame};
  animation-duration: ${props => props.duration}ms;
  /* use 'forwards' to prevent flicker on leave animation */
  animation-fill-mode: forwards;
  /* flex styles will center the caret child component */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -20px;
`;
const Caret = styled.div`
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent var(--white);
  /* make sure it's above the main dropdown container so now box-shadow bleeds over it */
  z-index: 1;
  position: relative;
  /* prevent any gap in between caret and main dropdown */
  top: 1px;
`;
const DropdownBackground = styled.div`
  transform-origin: 0 0;
  background-color: var(--white);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
`;
const AltBackground = styled.div`
  background-color: var(--grey);
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  transform-origin: 0 0;
  z-index: 0;
  transition: transform ${props => props.duration}ms;
`;
const getFadeContainerKeyFrame = ({ animatingOut, direction }) => {
  if (!direction) return;
  return keyframes`
  from {
    transform: translateX(${
  animatingOut ? 0 : direction === "left" ? 20 : -20
  }px);
  }
  to {
    transform: translateX(${
  !animatingOut ? 0 : direction === "left" ? -20 : 20
  }px);
    opacity: ${animatingOut ? 0 : 1};
  }
`;
};
const FadeContainer = styled.div`
  animation-name: ${getFadeContainerKeyFrame};
  animation-duration: ${props => props.duration * 0.75}ms;
  animation-fill-mode: forwards;
  position: ${props => props.animatingOut ? "absolute" : "relative"};
  opacity: ${props => props.direction && !props.animatingOut ? 0 : 1};
  animation-timing-function: linear;
  top: 0;
  left: 0;
`;
class FadeContents extends Component {
  render() {
    const {
      children,
      duration,
      animatingOut,
      innerRef,
      direction } =
    this.props;
    return /*#__PURE__*/(
      React.createElement(FadeContainer
      // prevent screen readers from reading out hidden content
      , { "aria-hidden": animatingOut,
        animatingOut: animatingOut,
        direction: direction,
        duration: duration,
        innerRef: el => {
          this.el = el;
          innerRef(el);
        } },
      children));
  }}_defineProperty(FadeContents, "propTypes", { duration: PropTypes.number, direction: PropTypes.oneOf(["right", "left"]), animatingOut: PropTypes.bool, children: PropTypes.node, innerRef: PropTypes.func });
const getFirstDropdownSectionHeight = el => {
  if (!el) return null;
  return el.querySelector("*[data-first-dropdown-section]") ?
  el.querySelector("*[data-first-dropdown-section]").offsetHeight :
  0;
};
const updateAltBackground = ({
  altBackground,
  prevDropdown,
  currentDropdown }) =>
{
  const prevHeight = getFirstDropdownSectionHeight(prevDropdown);
  const currentHeight = getFirstDropdownSectionHeight(currentDropdown);
  const immediateSetTranslateY = (el, translateY) => {
    el.style.transform = `translateY(${translateY}px)`;
    el.style.transition = "transform 0s";
    requestAnimationFrame(() => el.style.transitionDuration = "");
  };
  if (prevHeight) {
    // transition the grey ("alt") background from its previous height to its current height
    immediateSetTranslateY(altBackground, prevHeight);
    requestAnimationFrame(() => {
      altBackground.style.transform = `translateY(${currentHeight}px)`;
    });
  } else {
    // just immediately set the background to the appropriate height
    // since we don't have a stored value
    immediateSetTranslateY(altBackground, currentHeight);
  }
};
class DropdownContainer extends Component {
  componentDidMount() {
    updateAltBackground({
      altBackground: this.altBackgroundEl,
      prevDropdown: this.prevDropdownEl,
      currentDropdown: this.currentDropdownEl,
      tweenConfig: this.props.tweenConfig });
  }
  render() {
    const { children, direction, animatingOut, tweenConfig } = this.props;
    const [currentDropdown, prevDropdown] = Children.toArray(children);
    return /*#__PURE__*/(
      React.createElement(DropdownRoot, {
        direction: direction,
        animatingOut: animatingOut,
        duration: tweenConfig.duration }, /*#__PURE__*/
      React.createElement(Flipped, { flipId: "dropdown-caret" }, /*#__PURE__*/
      React.createElement(Caret, null)), /*#__PURE__*/
      React.createElement(Flipped, { flipId: "dropdown" }, /*#__PURE__*/
      React.createElement(DropdownBackground, null, /*#__PURE__*/
      React.createElement(Flipped, { inverseFlipId: "dropdown", scale: true }, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(AltBackground, {
        innerRef: el => this.altBackgroundEl = el,
        duration: tweenConfig.duration }), /*#__PURE__*/
      React.createElement(FadeContents, {
        direction: direction,
        duration: tweenConfig.duration,
        innerRef: el => this.currentDropdownEl = el },
      currentDropdown),
      prevDropdown && /*#__PURE__*/
      React.createElement(FadeContents, {
        animatingOut: true,
        direction: direction,
        duration: tweenConfig.duration,
        innerRef: el => this.prevDropdownEl = el },
      prevDropdown)))))));
  }}_defineProperty(DropdownContainer, "propTypes", { children: PropTypes.node.isRequired, animatingOut: PropTypes.bool, direction: PropTypes.oneOf(["left", "right"]), tweenConfig: PropTypes.shape({ duration: PropTypes.number, easing: PropTypes.string }) });
const Heading = styled.h3`
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: ${props => props.noMarginBottom ? 0 : "1rem"};
  color: ${({ color }) => color ? `var(--${color})` : "var(--blue)"};
`;
const HeadingLink = Heading.withComponent("li");
const LinkList = styled.ul`
  li {
    margin-bottom: 1rem;
  }
  li:last-of-type {
    margin-bottom: 0;
  }
  margin-left: ${props => props.marginLeft ? props.marginLeft : 0};
`;
const Icon = styled.div`
  width: 13px;
  height: 13px;
  margin-right: 13px;
  background-color: var(--blue);
  opacity: 0.8;
  display: inline-block;
`;
const DropdownSection = styled.div`
  padding: var(--spacer);
  position: relative;
  z-index: 1;
`;
const CompanyDropdownEl = styled.div`
  width: 18.5rem;
`;
const CompanyDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(CompanyDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement("ul", null, /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " About Stripe")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Customers")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Jobs")), /*#__PURE__*/
    React.createElement(HeadingLink, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Environment")))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, null, /*#__PURE__*/
    React.createElement(Icon, null), "From the Blog"), /*#__PURE__*/
    React.createElement(LinkList, { marginLeft: "25px" }, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Stripe Atlas \u203A")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Stripe Home \u203A")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Improved Fraud Detection \u203A")))))));
};
const DevelopersDropdownEl = styled.div`
  width: 25rem;
`;
const Flex = styled.div`
  display: flex;
  > div:first-of-type {
    margin-right: 48px;
  }
`;
const DevelopersDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(DevelopersDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, null, "Documentation"), /*#__PURE__*/
    React.createElement("p", null, "Start integrating Stripe\u2019s products and tools"), /*#__PURE__*/
    React.createElement(Flex, null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("h4", null, "Get Started"), /*#__PURE__*/
    React.createElement(LinkList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Elements")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Checkout")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Mobile apps")))), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("h4", null, "Popular Topics"), /*#__PURE__*/
    React.createElement(LinkList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Apple Pay")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Testing")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Launch Checklist"))))))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement("ul", null, /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Full API Reference")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " API Status")), /*#__PURE__*/
    React.createElement(HeadingLink, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Open Source"))))));
};
const ProductsDropdownEl = styled.div`
  width: 29rem;
`;
const Logo = styled.div`
  width: 38px;
  height: 38px;
  margin-right: 16px;
  border-radius: 100%;
  opacity: 0.6;
  background-color: ${({ color }) => `var(--${color})`};
`;
const SubProductsList = styled.ul`
  li {
    display: flex;
    margin-bottom: 1rem;
  }
  h3 {
    margin-right: 1rem;
    width: 3.2rem;
    display: block;
  }
  a {
    color: var(--dark-grey);
  }
`;
const ProductsSection = styled.ul`
  li {
    display: flex;
  }
`;
const WorksWithStripe = styled.div`
 border-top: 2px solid #fff;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacer);
  padding-top: var(--spacer);
}
h3 {
  margin-bottom: 0;
}
`;
const ProductsDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(ProductsDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement(ProductsSection, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "blue" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "blue" }, "Payments"), /*#__PURE__*/
    React.createElement("p", null, "A complete payments platform"))), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "green" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "green" }, "Billing"), /*#__PURE__*/
    React.createElement("p", null, "Build and scale your recurring business model"))), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "teal" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "teal" }, "Connect"), /*#__PURE__*/
    React.createElement("p", { style: { marginBottom: 0 } }, "Everything platforms need to get sellers paid"))))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement(SubProductsList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Sigma"), /*#__PURE__*/
    React.createElement("div", null, "Your business data at your fingertips.")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Atlas"), /*#__PURE__*/
    React.createElement("div", null, "The best way to start an internet business.")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Radar"), /*#__PURE__*/
    React.createElement("div", null, "Fight fraud with machine learning."))), /*#__PURE__*/
    React.createElement(WorksWithStripe, null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Works with Stripe"))))));
};
const NavbarItemTitle = styled.button`
  background-color: transparent;
  font-family: inherit;
  font-weight: bold;
  border: none;
  font-size: 18px;
  padding: 1.25rem;
  color: white;
  display: flex;
  justify-content: center;
  transition: opacity 250ms;
  cursor: pointer;
  position: relative;
  z-index: 2;
  &:hover,
  &:focus {
    opacity: 0.7;
    outline: none;
  }
`;
const NavbarItemEl = styled.li`
  position: relative;
  cursor: pointer;
`;
const DropdownSlot = styled.div`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  perspective: 1500px;
`;
class NavbarItem extends Component {constructor(...args) {super(...args);_defineProperty(this, "onMouseEnter",
    () => {
      this.props.onMouseEnter(this.props.index);
    });}
  render() {
    const { title, children } = this.props;
    return /*#__PURE__*/(
      React.createElement(NavbarItemEl, null, /*#__PURE__*/
      React.createElement(NavbarItemTitle, {
        onMouseEnter: this.onMouseEnter,
        onFocus: this.onMouseEnter },
      title), /*#__PURE__*/
      React.createElement(DropdownSlot, null, children)));
  }}
const NavbarEl = styled.nav`
  margin: auto;
`;
const NavbarList = styled.ul`
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
`;
class Navbar extends Component {
  render() {
    const { children, onMouseLeave } = this.props;
    return /*#__PURE__*/(
      React.createElement(NavbarEl, { onMouseLeave: onMouseLeave }, /*#__PURE__*/
      React.createElement(NavbarList, null, children)));
  }}
const navbarConfig = [
{ title: "Products", dropdown: ProductsDropdown },
{ title: "Developers", dropdown: DevelopersDropdown },
{ title: "Company", dropdown: CompanyDropdown }];
class AnimatedNavbar extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      activeIndices: [] });_defineProperty(this, "resetDropdownState",
    i => {
      this.setState({
        activeIndices: typeof i === "number" ? [i] : [],
        animatingOut: false });
      delete this.animatingOutTimeout;
    });_defineProperty(this, "onMouseEnter",
    i => {
      if (this.animatingOutTimeout) {
        clearTimeout(this.animatingOutTimeout);
        this.resetDropdownState(i);
        return;
      }
      if (this.state.activeIndices[this.state.activeIndices.length - 1] === i)
      return;
      this.setState(prevState => ({
        activeIndices: prevState.activeIndices.concat(i),
        animatingOut: false }));
    });_defineProperty(this, "onMouseLeave",
    ev => {
      this.setState({
        animatingOut: true });
      this.animatingOutTimeout = setTimeout(
      this.resetDropdownState,
      this.props.tweenConfig.duration);
    });}
  render() {
    const { tweenConfig } = this.props;
    let CurrentDropdown;
    let PrevDropdown;
    let direction;
    const currentIndex = this.state.activeIndices[
    this.state.activeIndices.length - 1];
    const prevIndex =
    this.state.activeIndices.length > 1 &&
    this.state.activeIndices[this.state.activeIndices.length - 2];
    if (typeof currentIndex === "number")
    CurrentDropdown = navbarConfig[currentIndex].dropdown;
    if (typeof prevIndex === "number") {
      PrevDropdown = navbarConfig[prevIndex].dropdown;
      direction = currentIndex > prevIndex ? "right" : "left";
    }
    return /*#__PURE__*/(
      React.createElement(Flipper, _extends({ flipKey: currentIndex }, tweenConfig), /*#__PURE__*/
      React.createElement(Navbar, { onMouseLeave: this.onMouseLeave },
      navbarConfig.map((n, index) => {
        return /*#__PURE__*/(
          React.createElement(NavbarItem, {
            title: n.title,
            index: index,
            onMouseEnter: this.onMouseEnter },
          currentIndex === index && /*#__PURE__*/
          React.createElement(DropdownContainer, {
            direction: direction,
            animatingOut: this.state.animatingOut,
            tweenConfig: this.props.tweenConfig }, /*#__PURE__*/
          React.createElement(CurrentDropdown, null),
          PrevDropdown && /*#__PURE__*/React.createElement(PrevDropdown, null))));
      }))));
  }}
const Form = styled.form`
  padding: 1.5rem 0 0.5rem 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  > div {
    display: flex;
  }
  fieldset {
    border: 0;
    padding: 1rem 0 1rem 0;
    margin-right: 3rem;
  }
  legend {
    font-weight: bold;
    display: block;
  }
  input {
    margin-right: 0.5rem;
  }
  label + label input {
    margin-left: 1.5rem;
  }
`;
class DemoControls extends Component {
  render() {
    const { duration, ease } = this.props;
    return /*#__PURE__*/(
      React.createElement(Form, {
        innerRef: el => this.el = el,
        onChange: () => {
          this.props.onChange({
            duration: parseInt(
            this.el.querySelector('input[name="duration"]:checked').value,
            10),
            ease: this.el.querySelector('input[name="ease"]:checked').value });
        } }, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("fieldset", { key: "duration" }, /*#__PURE__*/
      React.createElement("legend", null, "Duration (ms):"),
      [0, 300, 500, 1500].map(d => {
        return /*#__PURE__*/(
          React.createElement("label", { key: d }, /*#__PURE__*/
          React.createElement("input", {
            type: "radio",
            name: "duration",
            value: d,
            checked: duration === d }),
          d));
      })), /*#__PURE__*/
      React.createElement("fieldset", { key: "easing" }, /*#__PURE__*/
      React.createElement("legend", null, "Easing:"),
      ["linear", "easeOutExpo", "easeInOutCirc"].map(e => {
        return /*#__PURE__*/(
          React.createElement("label", { key: e }, /*#__PURE__*/
          React.createElement("input", {
            type: "radio",
            name: "ease",
            value: e,
            checked: ease === e }),
          e));
      })))));
  }}
const AppContainer = styled.div`
  background: #53f;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > div:first-of-type {
    flex: 1 0 70vh;
  }
`;
class App extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    { duration: 300, ease: "easeOutExpo" });_defineProperty(this, "onChange",
    data => {
      this.setState(data);
    });}
  render() {
    return /*#__PURE__*/(
      React.createElement(AppContainer, null, /*#__PURE__*/
      React.createElement(AnimatedNavbar, {
        tweenConfig: {
          ease: this.state.ease,
          duration: this.state.duration } }), /*#__PURE__*/
      React.createElement(DemoControls, {
        duration: this.state.duration,
        onChange: this.onChange,
        ease: this.state.ease })));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.querySelector("#root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.2.3/styled-components.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@tboyt/react-flip-toolkit@6.4.1/umd/react-flip-toolkit.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.2.3/styled-components.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@tboyt/react-flip-toolkit@6.4.1/umd/react-flip-toolkit.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
* {
	box-sizing: border-box;
}
:root {
	--white: #fff;
	--grey: #f1f4f8b0;
	--dark-grey: #6b7c93;
	--green: #24b47e;
	--teal: #4F96CE;
	--blue: #6772e5;
	--dark-blue: #4F3EF5;
	--spacer: 28px;
}
body {
	font-family: karla, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--dark-grey);
}
a {
	text-decoration: none;
	color: var(--blue);
}
a:hover, a:focus {
	color: var(--dark-blue);
}
ul {
	list-style: none;
	padding-left: 0;
}
p {
	margin-top: 0;
	margin-bottom: 1rem;
}
</style>

</head>
<body>
<div id="root"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} 
const { Component, Children } = window.React;
const { keyframes, default: styled } = window.styled;
const { Flipper, Flipped } = window.ReactFlipToolkit;
const getDropdownRootKeyFrame = ({ animatingOut, direction }) => {
  if (!animatingOut && direction) return null;
  return keyframes`
  from {
    transform: ${animatingOut ? "rotateX(0)" : "rotateX(-15deg)"};
    opacity: ${animatingOut ? 1 : 0};
  }
  to {
    transform: ${animatingOut ? "rotateX(-15deg)" : "rotateX(0)"};
    opacity: ${animatingOut ? 0 : 1};
  }
`;
};
const DropdownRoot = styled.div`
  transform-origin: 0 0;
  animation-name: ${getDropdownRootKeyFrame};
  animation-duration: ${props => props.duration}ms;
  /* use 'forwards' to prevent flicker on leave animation */
  animation-fill-mode: forwards;
  /* flex styles will center the caret child component */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -20px;
`;
const Caret = styled.div`
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent var(--white);
  /* make sure it's above the main dropdown container so now box-shadow bleeds over it */
  z-index: 1;
  position: relative;
  /* prevent any gap in between caret and main dropdown */
  top: 1px;
`;
const DropdownBackground = styled.div`
  transform-origin: 0 0;
  background-color: var(--white);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
`;
const AltBackground = styled.div`
  background-color: var(--grey);
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  transform-origin: 0 0;
  z-index: 0;
  transition: transform ${props => props.duration}ms;
`;
const getFadeContainerKeyFrame = ({ animatingOut, direction }) => {
  if (!direction) return;
  return keyframes`
  from {
    transform: translateX(${
  animatingOut ? 0 : direction === "left" ? 20 : -20
  }px);
  }
  to {
    transform: translateX(${
  !animatingOut ? 0 : direction === "left" ? -20 : 20
  }px);
    opacity: ${animatingOut ? 0 : 1};
  }
`;
};
const FadeContainer = styled.div`
  animation-name: ${getFadeContainerKeyFrame};
  animation-duration: ${props => props.duration * 0.75}ms;
  animation-fill-mode: forwards;
  position: ${props => props.animatingOut ? "absolute" : "relative"};
  opacity: ${props => props.direction && !props.animatingOut ? 0 : 1};
  animation-timing-function: linear;
  top: 0;
  left: 0;
`;
class FadeContents extends Component {
  render() {
    const {
      children,
      duration,
      animatingOut,
      innerRef,
      direction } =
    this.props;
    return /*#__PURE__*/(
      React.createElement(FadeContainer
      // prevent screen readers from reading out hidden content
      , { "aria-hidden": animatingOut,
        animatingOut: animatingOut,
        direction: direction,
        duration: duration,
        innerRef: el => {
          this.el = el;
          innerRef(el);
        } },
      children));
  }}_defineProperty(FadeContents, "propTypes", { duration: PropTypes.number, direction: PropTypes.oneOf(["right", "left"]), animatingOut: PropTypes.bool, children: PropTypes.node, innerRef: PropTypes.func });
const getFirstDropdownSectionHeight = el => {
  if (!el) return null;
  return el.querySelector("*[data-first-dropdown-section]") ?
  el.querySelector("*[data-first-dropdown-section]").offsetHeight :
  0;
};
const updateAltBackground = ({
  altBackground,
  prevDropdown,
  currentDropdown }) =>
{
  const prevHeight = getFirstDropdownSectionHeight(prevDropdown);
  const currentHeight = getFirstDropdownSectionHeight(currentDropdown);
  const immediateSetTranslateY = (el, translateY) => {
    el.style.transform = `translateY(${translateY}px)`;
    el.style.transition = "transform 0s";
    requestAnimationFrame(() => el.style.transitionDuration = "");
  };
  if (prevHeight) {
    // transition the grey ("alt") background from its previous height to its current height
    immediateSetTranslateY(altBackground, prevHeight);
    requestAnimationFrame(() => {
      altBackground.style.transform = `translateY(${currentHeight}px)`;
    });
  } else {
    // just immediately set the background to the appropriate height
    // since we don't have a stored value
    immediateSetTranslateY(altBackground, currentHeight);
  }
};
class DropdownContainer extends Component {
  componentDidMount() {
    updateAltBackground({
      altBackground: this.altBackgroundEl,
      prevDropdown: this.prevDropdownEl,
      currentDropdown: this.currentDropdownEl,
      tweenConfig: this.props.tweenConfig });
  }
  render() {
    const { children, direction, animatingOut, tweenConfig } = this.props;
    const [currentDropdown, prevDropdown] = Children.toArray(children);
    return /*#__PURE__*/(
      React.createElement(DropdownRoot, {
        direction: direction,
        animatingOut: animatingOut,
        duration: tweenConfig.duration }, /*#__PURE__*/
      React.createElement(Flipped, { flipId: "dropdown-caret" }, /*#__PURE__*/
      React.createElement(Caret, null)), /*#__PURE__*/
      React.createElement(Flipped, { flipId: "dropdown" }, /*#__PURE__*/
      React.createElement(DropdownBackground, null, /*#__PURE__*/
      React.createElement(Flipped, { inverseFlipId: "dropdown", scale: true }, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(AltBackground, {
        innerRef: el => this.altBackgroundEl = el,
        duration: tweenConfig.duration }), /*#__PURE__*/
      React.createElement(FadeContents, {
        direction: direction,
        duration: tweenConfig.duration,
        innerRef: el => this.currentDropdownEl = el },
      currentDropdown),
      prevDropdown && /*#__PURE__*/
      React.createElement(FadeContents, {
        animatingOut: true,
        direction: direction,
        duration: tweenConfig.duration,
        innerRef: el => this.prevDropdownEl = el },
      prevDropdown)))))));
  }}_defineProperty(DropdownContainer, "propTypes", { children: PropTypes.node.isRequired, animatingOut: PropTypes.bool, direction: PropTypes.oneOf(["left", "right"]), tweenConfig: PropTypes.shape({ duration: PropTypes.number, easing: PropTypes.string }) });
const Heading = styled.h3`
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: ${props => props.noMarginBottom ? 0 : "1rem"};
  color: ${({ color }) => color ? `var(--${color})` : "var(--blue)"};
`;
const HeadingLink = Heading.withComponent("li");
const LinkList = styled.ul`
  li {
    margin-bottom: 1rem;
  }
  li:last-of-type {
    margin-bottom: 0;
  }
  margin-left: ${props => props.marginLeft ? props.marginLeft : 0};
`;
const Icon = styled.div`
  width: 13px;
  height: 13px;
  margin-right: 13px;
  background-color: var(--blue);
  opacity: 0.8;
  display: inline-block;
`;
const DropdownSection = styled.div`
  padding: var(--spacer);
  position: relative;
  z-index: 1;
`;
const CompanyDropdownEl = styled.div`
  width: 18.5rem;
`;
const CompanyDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(CompanyDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement("ul", null, /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " About Stripe")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Customers")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Jobs")), /*#__PURE__*/
    React.createElement(HeadingLink, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), "Environment")))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, null, /*#__PURE__*/
    React.createElement(Icon, null), "From the Blog"), /*#__PURE__*/
    React.createElement(LinkList, { marginLeft: "25px" }, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Stripe Atlas \u203A")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Stripe Home \u203A")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Improved Fraud Detection \u203A")))))));
};
const DevelopersDropdownEl = styled.div`
  width: 25rem;
`;
const Flex = styled.div`
  display: flex;
  > div:first-of-type {
    margin-right: 48px;
  }
`;
const DevelopersDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(DevelopersDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, null, "Documentation"), /*#__PURE__*/
    React.createElement("p", null, "Start integrating Stripe\u2019s products and tools"), /*#__PURE__*/
    React.createElement(Flex, null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("h4", null, "Get Started"), /*#__PURE__*/
    React.createElement(LinkList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Elements")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Checkout")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Mobile apps")))), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("h4", null, "Popular Topics"), /*#__PURE__*/
    React.createElement(LinkList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Apple Pay")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Testing")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, "Launch Checklist"))))))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement("ul", null, /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Full API Reference")), /*#__PURE__*/
    React.createElement(HeadingLink, null, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " API Status")), /*#__PURE__*/
    React.createElement(HeadingLink, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Open Source"))))));
};
const ProductsDropdownEl = styled.div`
  width: 29rem;
`;
const Logo = styled.div`
  width: 38px;
  height: 38px;
  margin-right: 16px;
  border-radius: 100%;
  opacity: 0.6;
  background-color: ${({ color }) => `var(--${color})`};
`;
const SubProductsList = styled.ul`
  li {
    display: flex;
    margin-bottom: 1rem;
  }
  h3 {
    margin-right: 1rem;
    width: 3.2rem;
    display: block;
  }
  a {
    color: var(--dark-grey);
  }
`;
const ProductsSection = styled.ul`
  li {
    display: flex;
  }
`;
const WorksWithStripe = styled.div`
 border-top: 2px solid #fff;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacer);
  padding-top: var(--spacer);
}
h3 {
  margin-bottom: 0;
}
`;
const ProductsDropdown = () => {
  return /*#__PURE__*/(
    React.createElement(ProductsDropdownEl, null, /*#__PURE__*/
    React.createElement(DropdownSection, { "data-first-dropdown-section": true }, /*#__PURE__*/
    React.createElement(ProductsSection, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "blue" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "blue" }, "Payments"), /*#__PURE__*/
    React.createElement("p", null, "A complete payments platform"))), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "green" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "green" }, "Billing"), /*#__PURE__*/
    React.createElement("p", null, "Build and scale your recurring business model"))), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Logo, { color: "teal" })), /*#__PURE__*/
    React.createElement("div", null, /*#__PURE__*/
    React.createElement(Heading, { color: "teal" }, "Connect"), /*#__PURE__*/
    React.createElement("p", { style: { marginBottom: 0 } }, "Everything platforms need to get sellers paid"))))), /*#__PURE__*/
    React.createElement(DropdownSection, null, /*#__PURE__*/
    React.createElement(SubProductsList, null, /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Sigma"), /*#__PURE__*/
    React.createElement("div", null, "Your business data at your fingertips.")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Atlas"), /*#__PURE__*/
    React.createElement("div", null, "The best way to start an internet business.")), /*#__PURE__*/
    React.createElement("li", null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, "Radar"), /*#__PURE__*/
    React.createElement("div", null, "Fight fraud with machine learning."))), /*#__PURE__*/
    React.createElement(WorksWithStripe, null, /*#__PURE__*/
    React.createElement(Heading, { noMarginBottom: true }, /*#__PURE__*/
    React.createElement("a", { href: "/" }, /*#__PURE__*/
    React.createElement(Icon, null), " Works with Stripe"))))));
};
const NavbarItemTitle = styled.button`
  background-color: transparent;
  font-family: inherit;
  font-weight: bold;
  border: none;
  font-size: 18px;
  padding: 1.25rem;
  color: white;
  display: flex;
  justify-content: center;
  transition: opacity 250ms;
  cursor: pointer;
  position: relative;
  z-index: 2;
  &:hover,
  &:focus {
    opacity: 0.7;
    outline: none;
  }
`;
const NavbarItemEl = styled.li`
  position: relative;
  cursor: pointer;
`;
const DropdownSlot = styled.div`
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  perspective: 1500px;
`;
class NavbarItem extends Component {constructor(...args) {super(...args);_defineProperty(this, "onMouseEnter",
    () => {
      this.props.onMouseEnter(this.props.index);
    });}
  render() {
    const { title, children } = this.props;
    return /*#__PURE__*/(
      React.createElement(NavbarItemEl, null, /*#__PURE__*/
      React.createElement(NavbarItemTitle, {
        onMouseEnter: this.onMouseEnter,
        onFocus: this.onMouseEnter },
      title), /*#__PURE__*/
      React.createElement(DropdownSlot, null, children)));
  }}
const NavbarEl = styled.nav`
  margin: auto;
`;
const NavbarList = styled.ul`
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
`;
class Navbar extends Component {
  render() {
    const { children, onMouseLeave } = this.props;
    return /*#__PURE__*/(
      React.createElement(NavbarEl, { onMouseLeave: onMouseLeave }, /*#__PURE__*/
      React.createElement(NavbarList, null, children)));
  }}
const navbarConfig = [
{ title: "Products", dropdown: ProductsDropdown },
{ title: "Developers", dropdown: DevelopersDropdown },
{ title: "Company", dropdown: CompanyDropdown }];
class AnimatedNavbar extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      activeIndices: [] });_defineProperty(this, "resetDropdownState",
    i => {
      this.setState({
        activeIndices: typeof i === "number" ? [i] : [],
        animatingOut: false });
      delete this.animatingOutTimeout;
    });_defineProperty(this, "onMouseEnter",
    i => {
      if (this.animatingOutTimeout) {
        clearTimeout(this.animatingOutTimeout);
        this.resetDropdownState(i);
        return;
      }
      if (this.state.activeIndices[this.state.activeIndices.length - 1] === i)
      return;
      this.setState(prevState => ({
        activeIndices: prevState.activeIndices.concat(i),
        animatingOut: false }));
    });_defineProperty(this, "onMouseLeave",
    ev => {
      this.setState({
        animatingOut: true });
      this.animatingOutTimeout = setTimeout(
      this.resetDropdownState,
      this.props.tweenConfig.duration);
    });}
  render() {
    const { tweenConfig } = this.props;
    let CurrentDropdown;
    let PrevDropdown;
    let direction;
    const currentIndex = this.state.activeIndices[
    this.state.activeIndices.length - 1];
    const prevIndex =
    this.state.activeIndices.length > 1 &&
    this.state.activeIndices[this.state.activeIndices.length - 2];
    if (typeof currentIndex === "number")
    CurrentDropdown = navbarConfig[currentIndex].dropdown;
    if (typeof prevIndex === "number") {
      PrevDropdown = navbarConfig[prevIndex].dropdown;
      direction = currentIndex > prevIndex ? "right" : "left";
    }
    return /*#__PURE__*/(
      React.createElement(Flipper, _extends({ flipKey: currentIndex }, tweenConfig), /*#__PURE__*/
      React.createElement(Navbar, { onMouseLeave: this.onMouseLeave },
      navbarConfig.map((n, index) => {
        return /*#__PURE__*/(
          React.createElement(NavbarItem, {
            title: n.title,
            index: index,
            onMouseEnter: this.onMouseEnter },
          currentIndex === index && /*#__PURE__*/
          React.createElement(DropdownContainer, {
            direction: direction,
            animatingOut: this.state.animatingOut,
            tweenConfig: this.props.tweenConfig }, /*#__PURE__*/
          React.createElement(CurrentDropdown, null),
          PrevDropdown && /*#__PURE__*/React.createElement(PrevDropdown, null))));
      }))));
  }}
const Form = styled.form`
  padding: 1.5rem 0 0.5rem 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  > div {
    display: flex;
  }
  fieldset {
    border: 0;
    padding: 1rem 0 1rem 0;
    margin-right: 3rem;
  }
  legend {
    font-weight: bold;
    display: block;
  }
  input {
    margin-right: 0.5rem;
  }
  label + label input {
    margin-left: 1.5rem;
  }
`;
class DemoControls extends Component {
  render() {
    const { duration, ease } = this.props;
    return /*#__PURE__*/(
      React.createElement(Form, {
        innerRef: el => this.el = el,
        onChange: () => {
          this.props.onChange({
            duration: parseInt(
            this.el.querySelector('input[name="duration"]:checked').value,
            10),
            ease: this.el.querySelector('input[name="ease"]:checked').value });
        } }, /*#__PURE__*/
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("fieldset", { key: "duration" }, /*#__PURE__*/
      React.createElement("legend", null, "Duration (ms):"),
      [0, 300, 500, 1500].map(d => {
        return /*#__PURE__*/(
          React.createElement("label", { key: d }, /*#__PURE__*/
          React.createElement("input", {
            type: "radio",
            name: "duration",
            value: d,
            checked: duration === d }),
          d));
      })), /*#__PURE__*/
      React.createElement("fieldset", { key: "easing" }, /*#__PURE__*/
      React.createElement("legend", null, "Easing:"),
      ["linear", "easeOutExpo", "easeInOutCirc"].map(e => {
        return /*#__PURE__*/(
          React.createElement("label", { key: e }, /*#__PURE__*/
          React.createElement("input", {
            type: "radio",
            name: "ease",
            value: e,
            checked: ease === e }),
          e));
      })))));
  }}
const AppContainer = styled.div`
  background: #53f;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > div:first-of-type {
    flex: 1 0 70vh;
  }
`;
class App extends Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    { duration: 300, ease: "easeOutExpo" });_defineProperty(this, "onChange",
    data => {
      this.setState(data);
    });}
  render() {
    return /*#__PURE__*/(
      React.createElement(AppContainer, null, /*#__PURE__*/
      React.createElement(AnimatedNavbar, {
        tweenConfig: {
          ease: this.state.ease,
          duration: this.state.duration } }), /*#__PURE__*/
      React.createElement(DemoControls, {
        duration: this.state.duration,
        onChange: this.onChange,
        ease: this.state.ease })));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.querySelector("#root"));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS