How to use the framer-motion.motion.section function in framer-motion

To help you get started, we’ve selected a few framer-motion examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github samdenty / gqless / internal / website / src / pages / index.js View on Github external
import 'regenerator-runtime/runtime'
import Layout from '@theme/Layout'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import Link from '@docusaurus/Link'
import useBaseUrl from '@docusaurus/useBaseUrl'
import * as React from 'react'
import { Feature, Arrow, Example, Overflow } from '../components'
import styled from '@emotion/styled'
import { motion, useAnimation } from 'framer-motion'
import CodeBlock from '@theme/CodeBlock'

const Glare = styled.div`
  background: radial-gradient(rgba(69, 72, 75, 0.15), rgba(69, 72, 75, 0.25));
`

const Features = styled(motion.section)`
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding: 1.5rem 0;
`

Features.defaultProps = {
  className: 'container',
}

const ResultArrow = styled(Arrow)`
  color: #e535ab;
  height: 3rem;
  align-self: center;
  margin-left: 3.5rem;
  margin-right: 3rem;