Add with-gsap example (#17195)

This PR adds an example Next.js project with GSAP
![example-next-gsap](https://user-images.githubusercontent.com/21099312/93552465-170dfe80-f9a3-11ea-978c-4e1dc01731e8.gif)

examples/with-gsap/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.prettierrc
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-gsap/App.scss

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap');
+
+.header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 100px;
+  a {
+    margin: 0 28px;
+    text-decoration: none;
+    color: #181818;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: 'Poppins';
+  }
+}
+
+.container {
+  position: relative;
+  width: 1280px;
+  min-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  .page {
+    position: absolute;
+    .inner {
+      display: flex;
+      justify-content: center;
+      h1 {
+        font-family: 'Bebas Neue';
+        font-size: 52px;
+        letter-spacing: 0.1rem;
+        .line-wrap {
+          overflow: hidden;
+          height: 66px;
+        }
+      }
+      p {
+        font-family: 'Poppins';
+        margin-top: 200px;
+        width: 340px;
+        font-weight: 300;
+        line-height: 24px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.page-enter {
+  opacity: 0;
+}
+.page-enter-active {
+  opacity: 1;
+  transition: opacity 400ms;
+  transition-delay: 600ms;
+}
+.page-exit {
+  opacity: 1;
+}
+.page-exit-active {
+  opacity: 0;
+  transition: opacity 400ms;
+}

examples/with-gsap/README.md

@@ -0,0 +1,21 @@
+# Example app with GSAP
+
+This example features how to use [GSAP](https://greensock.com/gsap/) as the animation library within a Next.js app.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-gsap)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-gsap with-gsap-app
+# or
+yarn create next-app --example with-gsap with-gsap-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-gsap/components/Content.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+
+const Content = () => {
+  let line1 = useRef(null)
+  useEffect(() => {
+    gsap.from([line1], 0.6, {
+      delay: 0.9,
+      ease: 'power3.out',
+      y: 24,
+      stagger: {
+        amount: 0.15,
+      },
+    })
+  }, [line1])
+
+  return (
+    <p ref={(el) => (line1 = el)} className="line">
+      A Simple example using{' '}
+      <a
+        href="https://greensock.com/gsap/"
+        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+      >
+        GSAP
+      </a>{' '}
+      &{' '}
+      <a
+        href="https://www.npmjs.com/package/react-transition-group"
+        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+      >
+        react-transition-group
+      </a>
+    </p>
+  )
+}
+
+export default Content

examples/with-gsap/components/Home.js

@@ -0,0 +1,19 @@
+import Title from './Title'
+import Content from './Content'
+
+const Home = () => {
+  return (
+    <div className="inner">
+      <Title lineContent="With-GSAP" lineContent2="Using NEXT" />
+      <div>
+        <div className="other">
+          {/* Does project report used question death, out more rhetoric unpleasing
+          what compared both of sentinels. */}
+          <Content />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

examples/with-gsap/components/Title.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+
+const Title = ({ lineContent, lineContent2 }) => {
+  let line1 = useRef(null)
+  let line2 = useRef(null)
+  useEffect(() => {
+    gsap.from([line1, line2], 0.8, {
+      delay: 0.8,
+      ease: 'power3.out',
+      y: 64,
+      stagger: {
+        amount: 0.15,
+      },
+    })
+  }, [line1, line2])
+  return (
+    <h1 className="page-title">
+      <div className="line-wrap">
+        <div ref={(el) => (line1 = el)} className="line">
+          {lineContent}
+        </div>
+      </div>
+      <div className="line-wrap">
+        <div ref={(el) => (line2 = el)} className="line">
+          {lineContent2}
+        </div>
+      </div>
+    </h1>
+  )
+}
+
+export default Title

examples/with-gsap/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "with-gsap",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "gsap": "^3.0.1",
+    "next": "latest",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-transition-group": "^4.3.0",
+    "sass": "1.29.0"
+  },
+  "license": "MIT"
+}

examples/with-gsap/pages/_app.js

@@ -0,0 +1,7 @@
+import '../App.scss'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-gsap/pages/api/hello.js

@@ -0,0 +1,6 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.statusCode = 200
+  res.json({ name: 'John Doe' })
+}

examples/with-gsap/pages/index.js

@@ -0,0 +1,55 @@
+import { CSSTransition } from 'react-transition-group'
+import { gsap } from 'gsap'
+import Home from '../components/Home'
+
+function App() {
+  const onEnter = (node) => {
+    gsap.from(
+      [node.children[0].firstElementChild, node.children[0].lastElementChild],
+      0.6,
+      {
+        y: 30,
+        delay: 0.6,
+        ease: 'power3.InOut',
+        opacity: 0,
+        stagger: {
+          amount: 0.6,
+        },
+      }
+    )
+  }
+  const onExit = (node) => {
+    gsap.to(
+      [node.children[0].firstElementChild, node.children[0].lastElementChild],
+      0.6,
+      {
+        y: -30,
+        ease: 'power3.InOut',
+        stagger: {
+          amount: 0.2,
+        },
+      }
+    )
+  }
+
+  return (
+    <>
+      <div className="container">
+        <CSSTransition
+          in={true}
+          timeout={1200}
+          classNames="page"
+          onExit={onExit}
+          onEntering={onEnter}
+          unmountOnExit
+        >
+          <div className="page">
+            <Home />
+          </div>
+        </CSSTransition>
+      </div>
+    </>
+  )
+}
+
+export default App

examples/with-gsap/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>