Collection of animated burgers for React, also available as HTML+CSS
Home Page: https://march08.github.io/animated-burgers/
License: MIT License
Animated burgers available in plain html/css or as React components.
Preview and documentation available at https://march08.github.io/animated-burgers/
Needless to say, I cannot get this to work.
I've followed the instruction on the website:
So my problem is that I cannot trigger the animation at all. I've even tried it in a brand new document with no success. Same with codepen, no success there either. I've even tried using developer tools on the website to try and figure it out, but of cause, I would not be here if I did solve my problem.
I know the CSS is working because I can see the lines, so it can't be a problem with linking the file.
How would you import the CSS?
thanks for your effort. nice work. We would love to assist you in the development of the project. have a nice day:)
,gökmen.
I'm having difficulties when using it on my React app, when trying to install the npm or yarn package it displays the following error message:
npm install --save @animated-burgers/{burger-style} classnames npm ERR! code ENOLOCAL npm ERR! Could not install from "@animated-burgers/{burger-style}" as it does not contain a package.json file. npm ERR! A complete log of this run can be found in:
I would truly appreciate if you could tell me a way for using it on ReactJS.
Thanks in advance!
Under 'Available as plain html/css or as React components', if you click on html/css, it takes you to react section instead as it is using the incorrect id, it should be finding #htmlcss.
When I click the icon, nothing happens (no animation).
I am getting this issue when trying to build in my Gatsby project:
I have ran npm install --save @animated-burgers/burger-squeeze classnames and integrated into my header.js file as such:
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./scss/layout.scss"
import AniLink from "gatsby-plugin-transition-link/AniLink"
import Burger from '@animated-burgers/burger-squeeze'
import '@animated-burgers/burger-squeeze/dist/styles.css'
import '@animated-burgers/Burger/styles.scss'
import Logo from "./logo"
const Header = ({ siteTitle }) => (
<header
style={{
marginTop: 25,
marginBottom: 25,
}}>
<div className="container" >
<div className="row">
<div className="col-9">
<AniLink cover to={`/`} direction="right" bg="#EE4E31" duration={0.50}>
<Logo />
</AniLink>
</div>
<div className="col-3 my-auto desktop-menu">
<div style={{textAlign: 'right'}}>
<AniLink cover to={`/`} direction="left" bg="#EE4E31" duration={0.50}>Testing</AniLink>
</div>
</div>
<div className="col-3 my-auto mobile-menu">
<div style={{textAlign: 'right', marginTop: '-13px'}}>
{/* <Link to="/" style={{fontSize: 40}}></Link> */}
<Burger Component="button" type="button" />
</div>
</div>
</div>
</div>
</header>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./scss/layout.scss"
import AniLink from "gatsby-plugin-transition-link/AniLink"
import Burger from '@animated-burgers/burger-squeeze'
import '@animated-burgers/burger-squeeze/dist/styles.css'
import '@animated-burgers/Burger/styles.scss'
import Logo from "./logo"
const Header = ({ siteTitle }) => (
<header
style={{
marginTop: 25,
marginBottom: 25,
}}>
<div className="container" >
<div className="row">
<div className="col-9">
<AniLink cover to={`/`} direction="right" bg="#EE4E31" duration={0.50}>
<Logo />
</AniLink>
</div>
<div className="col-3 my-auto desktop-menu">
<div style={{textAlign: 'right'}}>
<AniLink cover to={`/`} direction="left" bg="#EE4E31" duration={0.50}>Testing</AniLink>
</div>
</div>
<div className="col-3 my-auto mobile-menu">
<div style={{textAlign: 'right', marginTop: '-13px'}}>
{/* <Link to="/" style={{fontSize: 40}}></Link> */}
<Burger Component="button" type="button" />
</div>
</div>
</div>
</div>
</header>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
Let me know if I can provide any additional context or replication steps. Thank you for this cool tool!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.