framer-motion#useViewportScroll JavaScript Examples
The following examples show how to use
framer-motion#useViewportScroll.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Cryptocurrencies.js From ensdomains-v2 with MIT License | 6 votes |
|
export default function Cryptocurrencies(props) {
const { scrollYProgress } = useViewportScroll()
const { t } = useTranslation()
const x = useTransform(scrollYProgress, [0, 1], [0, -1000])
return (
<HeroContainer id="home-title">
<Wrapper>
<AnchorContainer href={"#home-title"}>
<H2>
{t("home.cryptocurrencies.title")}
<Anchor />
</H2>
</AnchorContainer>
<P>{t("home.cryptocurrencies.text")}</P>
<WalletAnimation>
<img className="wallet" src={wallet} alt={t("wallet")} />
<Coins style={{ x: x }}>
{coins.map((coin, index) => {
return <img src={coin.src.default} alt={coin.name} key={index} />
})}
</Coins>
</WalletAnimation>
</Wrapper>
</HeroContainer>
)
}
Example #2
| Source File: Layout.jsx From pooltogether-landing-site with MIT License | 5 votes |
|
Layout = (props) => {
const {
children
} = props
const [yScrollPosition, setYScrollPosition] = useState()
const { scrollY } = useViewportScroll()
scrollY.onChange(y => {
setYScrollPosition(y)
})
// const router = useRouter()
// const signIn = router.query.signIn
// const deposit = /deposit/.test(router.asPath)
// const withdraw = /withdraw/.test(router.asPath)
return <>
<Meta />
<NavMobile />
<div
className='flex flex-col w-full'
style={{
minHeight: '100vh'
}}
>
<div
className={classnames(
'header pool-container w-full z-30 mx-auto',
)}
>
<div
className='flex justify-between items-center w-full px-4 sm:px-0 py-10 mx-auto'
>
<HeaderLogo />
<Nav />
</div>
</div>
<div className='content'>
<div
className='mx-auto w-full flex flex-grow relative z-10 h-full page'
>
<div
className='flex flex-col flex-grow'
>
<div
className='relative text-inverse flex flex-col flex-grow h-full z-10'
style={{
flex: 1
}}
>
{React.cloneElement(children, {
...props,
})}
</div>
</div>
</div>
</div>
<div
className='footer--container'
>
<Footer />
</div>
</div>
</>
}
Example #3
| Source File: design-tooling.js From gatsby-portfolio with BSD Zero Clause License | 4 votes |
|
DesignTooling = () => {
const [cursorText, setCursorText] = useState("");
const [cursorVariant, setCursorVariant] = useState("default");
const ref = useRef()
const { scrollYProgress } = useViewportScroll();
function projectEnter(event) {
setCursorText("View");
setCursorVariant("project");
}
function cursorLeave(event) {
setCursorText("");
setCursorVariant("default");
}
function contactEnter(event) {
setCursorText("?");
setCursorVariant("contact");
}
function linkEnter(event) {
setCursorText("");
setCursorVariant("link");
}
const imageVariants = {
initial: {
opacity: 0,
y: 100,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
},
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
}
};
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Daniel Destefanis Product Designer - Design Tooling Case Study</title>
<meta name="description" content="Case study for design tools I've made in Figma for Discord and the design community." />
<link rel="canonical" href="https://danield.design/design-tooling/" />
</Helmet>
<div>
<ClientOnly>
<Cursor cursorText={cursorText} cursorVariant={cursorVariant} />
</ClientOnly>
<motion.div className="project-hero-wrapper" ref={ref}>
<Navigation onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
<div className="project-hero project-hero--bottom">
<ClientOnly>
<motion.figure
className="project-hero-image align-image-bottom"
initial="initial"
animate="visible"
variants={imageVariants}
>
<motion.img
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/0-tooling-hero.png"
alt="Mockup of a figma plugin Design lint running on a design of an ecommerce site" />
</motion.figure>
</ClientOnly>
</div>
<div className="project-hero-background green"></div>
</motion.div>
<div class="grid">
<div className="project-intro">
<h1 className="project-title">
Design Tooling
</h1>
<div className="project-description">
<p className="paragraph--large project-lede">
Building open source Figma plugins to improve my teams workflow and automate the busy work.
</p>
</div>
<ClientOnly>
<div className="detail first-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.4, damping: 15 }}
className="icon-wrapper">
<img src={clockIcon} alt="Clock Icon" className="details-icon" />
</motion.div>
<motion.h3
className="details-label"
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.65, damping: 15 }}>
6 Months
</motion.h3>
</div>
<div className="detail second-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.8, damping: 15 }}
className="icon-wrapper">
<img src={calendarIcon} alt="Calendar Icon" className="details-icon" />
</motion.div>
<motion.h3
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 1, damping: 15 }}
className="details-label">Multiple Ship Dates
</motion.h3>
</div>
</ClientOnly>
</div>
</div>
<div className="grid">
<section className="project-main">
<figure className="project-image project-image--full">
<img alt="Design Lint mockup images of different states"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/1-tooling.png"
/>
</figure>
<div className="body">
<h3 className="h3 project-about">
As the creator of several Figma plugins, I believe tools can enable us to spend less time doing repetitive tasks and more time focusing on our craft.
</h3>
</div>
<figure className="project-image project-image--full">
<img alt="Title art for the Figma plugin named Inspector"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/2-tooling.png"
/>
</figure>
<div className="body">
<h2 className="h2">About</h2>
<p className="paragraph">
The design tool Figma, released a plugin API back in 2019. Since then, I’ve built a
handful of tools to help improve our design workflow at Discord and made these plugins
open source to the larger community.
</p>
<p className="paragraph">
I built a tool for us to automatically theme designs called Auto Theme, a design linter
called Design Lint, and a tool to automatically generate a title page called Table of Contents.
</p>
<p className="paragraph">
I’ve written articles on this topic, released open source files on how to build your own tools,
and did a live stream talk with some of the folks over at Figma in early 2021. In August of 2021, I was Figma's
"Featured Creator" in the community newsletter.
</p>
<ul className="case-list">
<li>
<a href="https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143">
“Building Open Source Design Tooling at Discord”
</a>
</li>
<li>
<a href="https://lintyour.design">Design Lint landing page</a>
</li>
<li>View all our open source rescouces at <a href="https://figma.com/@discord">figma.com/@discord</a>
</li>
</ul>
</div>
<div className="image-2up">
<div class="image-with-caption">
<figure className="project-image project-image--half">
<img alt="Art for my Medium Article Building Open Source Design Tooling at Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/3-tooling.png"
/>
</figure>
<figcaption>
<a href="https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143">
“Building Open Source Design Tooling at Discord”
</a>
</figcaption>
</div>
<div className="image-with-caption">
<figure className="project-image project-image--half">
<img
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/4-tooling.png"
alt="Title slide for the talk In The File - Building Tools for your ideal workflow"
/>
</figure>
<figcaption>
<a href="https://www.youtube.com/watch?v=mFaMpi7Pumg">
In The File Livestream
</a>
</figcaption>
</div>
</div>
<div className="body">
<h2 className="h2">Design Lint</h2>
<p className="paragraph">
One of my most popular plugins, Design Lint has been downloaded 30,000+ times and has been used as a
foundation for custom design linters at some of the world’s largest tech companies like Twitter and Lyft.
</p>
<p className="paragraph">
Common issues with developer handoff are missing design tokens, using the wrong colors for specific layers,
and introducing styles that aren’t part of a design system. Design Lint flags these errors in order
to make the handoff process less prone to issues.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Design Lint landing page"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/5-tooling.png"
/>
</figure>
<figure className="project-image project-image--full">
<video src="https://designlint.s3-us-west-2.amazonaws.com/design-lint-website-vid+(1).mp4" autoPlay muted loop />
</figure>
<figure className="project-image project-image--full">
<video src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/design-lint-update.mp4" autoPlay muted loop />
</figure>
<div className="body">
<h2 className="h2">Auto Theme</h2>
<p className="paragraph">
Another plugin I built for our team automatically changes a designs themes from light to dark, or vice versa, using our design system colors.
</p>
<p className="paragraph">
This let’s us create designs in either theme in seconds. Since it’s such a common use case for designers, I open sourced the plugin for other teams to build off of.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Mockup of Steelseries engine software, news page with articles and blog posts"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/8-tooling.png"
/>
</figure>
<figure className="project-image project-image--full">
<video src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/auto-theme-example.mp4" autoPlay muted loop />
</figure>
<div className="body">
<h2 className="h2">Create Sticky Note</h2>
<p className="paragraph">
While managing design on the Discord growth team, I've found myself conducting a lot more brainstorms. As a team that uses Figjam often,
I created a utility to convert notes written before meetings and text layers into sticky notes automatically.
</p>
</div>
<figure className="project-image project-image--full">
<video src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/create-sticky-example-smaller.mp4" autoPlay muted loop />
</figure>
<div className="body">
<h2 className="h2">Open Source</h2>
<p className="paragraph">
I’m a huge believer in the open source community. I’ve utilized countless open source libraries
in the past when building software and projects of my own. As one way to contribute
back to the community, all the tools I’ve built are open source and documented on <a href="https://github.com/destefanis">Github</a>.
</p>
<p className="paragraph">
I'll continue making open source tools as soon as I come across a new problem worth solving.
<a href="https://twitter.com/daniel__designs">Follow me on Twitter</a> for my latest work.
</p>
</div>
<div className="image-2up">
<div class="image-with-caption">
<figure className="project-image project-image--half">
<img alt="Title slide for the talk In The File - Building Tools for your ideal workflow"
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/6-tooling.png"
/>
</figure>
<figcaption>
<a href="https://www.figma.com/community/file/943929739849217782">
“Building Open Source Design Tooling at Discord Slides”
</a>
</figcaption>
</div>
<div className="image-with-caption">
<figure className="project-image project-image--half">
<img
src="https://newportfolio.s3.us-west-2.amazonaws.com/design-tooling/7-tooling.png"
alt="Cover art for a slide deck for how to get starting making figma plugins"
/>
</figure>
<figcaption>
<a href="https://www.figma.com/community/file/942856928187155104">
Intro building Figma plugins
</a>
</figcaption>
</div>
</div>
</section>
</div>
<motion.section className="container next-project">
<div className="grid">
<h2 className="h2 grid-title">Next Project</h2>
</div>
<div className="grid work-grid">
<Card
image="https://newportfolio.s3-us-west-2.amazonaws.com/discord-onboarding-image.png"
imageAlt="Image of Discord's Onboarding Screen"
link="/discord-growth"
color="blue"
title="Discord Onboarding"
size="normal"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
<Card
image="https://newportfolio.s3-us-west-2.amazonaws.com/destiny-medals-image.png"
link="/destiny-medals"
imageAlt="Image of Destiny Medals Project"
title="Destiny Medals"
color="purple"
size="normal"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
</div>
</motion.section>
<Footer onFooterEnter={contactEnter} onFooterLeave={cursorLeave} onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
</div>
</div>
)
}
Example #4
| Source File: destiny-medals.js From gatsby-portfolio with BSD Zero Clause License | 4 votes |
|
DestinyMedals = () => {
const [cursorText, setCursorText] = useState("");
const [cursorVariant, setCursorVariant] = useState("default");
const ref = useRef()
const { scrollYProgress } = useViewportScroll();
function projectEnter(event) {
setCursorText("View");
setCursorVariant("project");
}
function cursorLeave(event) {
setCursorText("");
setCursorVariant("default");
}
function contactEnter(event) {
setCursorText("?");
setCursorVariant("contact");
}
function linkEnter(event) {
setCursorText("");
setCursorVariant("link");
}
const imageVariants = {
initial: {
opacity: 0,
y: 100,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
},
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
}
};
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Daniel Destefanis Product Designer - Destiny Medals Case Study</title>
<meta name="description" content="Case study for a webapp I made for Destiny, the game by Bungie." />
<link rel="canonical" href="https://danield.design/destiny-medals/" />
</Helmet>
<div>
<ClientOnly>
<Cursor cursorText={cursorText} cursorVariant={cursorVariant} />
</ClientOnly>
<motion.div className="project-hero-wrapper" ref={ref}>
<Navigation onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
<div className="project-hero">
<ClientOnly>
<motion.figure
className="project-hero-image"
initial="initial"
animate="visible"
variants={imageVariants}
>
<motion.img
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/Work+Card/0-destiny-hero.png"
alt="Mockup of the web app Destiny Medals on a phone" />
</motion.figure>
</ClientOnly>
</div>
<div className="project-hero-background purple"></div>
</motion.div>
<div class="grid">
<div className="project-intro">
<h1 className="project-title">
Destiny Medals
</h1>
<div className="project-description">
<p className="paragraph--large project-lede">
A react web app for reliving sweet multiplayer carnage in Destiny 2.
</p>
</div>
<ClientOnly>
<div className="detail first-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.4, damping: 15 }}
className="icon-wrapper">
<img src={clockIcon} alt="Clock Icon" className="details-icon" />
</motion.div>
<motion.h3
className="details-label"
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.65, damping: 15 }}>
3 Months
</motion.h3>
</div>
<div className="detail second-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.8, damping: 15 }}
className="icon-wrapper">
<img src={calendarIcon} alt="Calendar Icon" className="details-icon" />
</motion.div>
<motion.h3
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 1, damping: 15 }}
className="details-label">Shipped January 2018
</motion.h3>
</div>
</ClientOnly>
</div>
</div>
<div className="grid">
<section className="project-main">
<figure className="project-image project-image--full">
<img alt="Destiny Medals showing match history on a macbook"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/1-destiny.png"
/>
</figure>
<div className="body">
<h3 className="h3 project-about">
Destiny Medals was built to be a lightweight way to view your multiplayer match history,
stats, and a frictionless way to share games with your friends.
</h3>
</div>
<figure className="project-image project-image--full">
<img alt="Login screen for Destiny Medals"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/2-destiny.png"
/>
</figure>
<div className="body">
<h2 className="h2">Discovery and definition</h2>
<p className="paragraph">
Destiny 2 was massively popular in 2017 when it released. It had a huge community,
one of the largest subreddits, and its where I could find my friends on any given night.
</p>
<p className="paragraph">
During our late nights together I encountered a few issues:
</p>
<p className="paragraph">
I’ve written articles on this topic, released open source files on how to build your own tools,
and did a live stream talk with some of the folks over at Figma in early 2021. In August of 2021, I was Figma's
"Featured Creator" in the community newsletter.
</p>
<ul className="case-list">
<li>
The multiplayer match history only went back one match, so if you wanted to review how you did, you had to login bungie.net on a computer.
</li>
<li>
Being able to share a match witha a friend was hard. Most other services mixed in tons of stats or required an account.
</li>
<li>
“Medals” were unique accolades based on performance, we’re oddly missing from the game’s UI and weren’t reviewable anywhere, even in the API.
</li>
</ul>
<p className="paragraph">
Once I realized the game had a public API, I realized I could address these issues myself.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Character select screen for Destiny Medals"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/3-destiny.png"
/>
</figure>
<div className="body">
<h2 className="h2">Frictionless match history on mobile</h2>
<p className="paragraph">
By just using your gamertag or username, I could fetch a players match history going back 25+ matches vs the game only allowing
you to look at one. There was no login, no remembering passwords.
</p>
<p className="paragraph">
The match history took the form of a stack of cards, which showed the level
you played on, whether you won or lost, along with some other valuable meta data.
By storing this public data in the URL, sharing matches was easy as copy and pasting.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Character select screen for Destiny Medals"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/4-destiny.png"
/>
</figure>
<div className="body">
<h2 className="h2">Filling in the missing data</h2>
<p className="paragraph">
As I was building Destiny Medals I came to realize that the API didn’t have a
full list of medals (the accolades earned during multiplayer matches). Pieces of
this information were there, but the full list was incomplete.
</p>
<p className="paragraph">
I joined a Discord community for the Destiny 2 API and together we put together
a complete list and made it open source on Github.
</p>
<p className="paragraph">
This meant Destiny Medals, and other stat apps, now had a more feature
complete way of viewing your performance than the actual game did!
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Match results screen for Destiny Medals showing stats, medals, and match score"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/5-destiny.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="Two mobile phones showing the match results screenshots of Destiny Medals"
src="https://newportfolio.s3.us-west-2.amazonaws.com/destiny/6-destiny.png"
/>
</figure>
<div className="body">
<h2 className="h2">Launch</h2>
<p className="paragraph">
In January of 2018 I launched Destiny Medals as an open source site to the community.
It ran for over a year and had a few hundred monthly users. Destiny 2 has been releasing updates
for several years now so eventually my webapp was redudant.
</p>
<p className="paragraph">
This project taught me a considerable amount about React, creating frictionless user experiences,
and designing an interface around an API.
</p>
</div>
</section>
</div>
<motion.section className="container next-project">
<div className="grid">
<h2 className="h2 grid-title">Next Project</h2>
</div>
<div className="grid work-grid">
<Card
image="https://newportfolio.s3-us-west-2.amazonaws.com/design-tooling-image.png"
imageAlt="UI of Design Tooling Plugins in Figma"
link="/design-tooling"
color="green"
title="Design Tooling"
size="normal"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
<Card
image="https://newportfolio.s3-us-west-2.amazonaws.com/steelseries-image.png"
link="/steelseries"
imageAlt="SteelSeries Engine UI"
title="SteelSeries"
color="yellow"
size="normal"
alignment="bottom"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
</div>
</motion.section>
<Footer onFooterEnter={contactEnter} onFooterLeave={cursorLeave} onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
</div>
</div>
)
}
Example #5
| Source File: discord-growth.js From gatsby-portfolio with BSD Zero Clause License | 4 votes |
|
DiscordGrowth = () => {
const [cursorText, setCursorText] = useState("");
const [cursorVariant, setCursorVariant] = useState("default");
const ref = useRef()
const { scrollYProgress } = useViewportScroll();
function projectEnter(event) {
setCursorText("View");
setCursorVariant("project");
}
function cursorLeave(event) {
setCursorText("");
setCursorVariant("default");
}
function contactEnter(event) {
setCursorText("?");
setCursorVariant("contact");
}
function linkEnter(event) {
setCursorText("");
setCursorVariant("link");
}
const imageVariants = {
initial: {
opacity: 0,
y: 100,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
},
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
delay: 0.35,
duration: 0.8,
damping: 10,
stiffness: 80,
bounce: 0.2,
}
}
};
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Daniel Destefanis Design - Discord Growth Case Study</title>
<link rel="canonical" href="https://danield.design/discord-growth/" />
</Helmet>
<div>
<ClientOnly>
<Cursor cursorText={cursorText} cursorVariant={cursorVariant} />
</ClientOnly>
<motion.div className="project-hero-wrapper" ref={ref}>
<Navigation onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
<div className="project-hero">
<ClientOnly>
<motion.figure
className="project-hero-image"
initial="initial"
animate="visible"
variants={imageVariants}
>
<motion.img
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/Work+Card/0-discord-growth-hero.png"
alt="Two phones displaying the app Discord" />
</motion.figure>
</ClientOnly>
</div>
<div className="project-hero-background blue"></div>
</motion.div>
<div class="grid">
<div className="project-intro">
<h1 className="project-title">
Discord Growth
</h1>
<div className="project-description">
<p className="paragraph--large project-lede">
Since 2020, I’ve been leading design for Growth at Discord with goal of making
the product easier to use for our next 100+ million users.
</p>
</div>
<ClientOnly>
<div className="detail first-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.4, damping: 15 }}
className="icon-wrapper">
<img src={clockIcon} alt="Clock Icon" className="details-icon" />
</motion.div>
<motion.h3
className="details-label"
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.65, damping: 15 }}>
1+ Years
</motion.h3>
</div>
<div className="detail second-detail">
<motion.div
initial={{ opacity: 0, scale: 0.6, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: 'spring', delay: 0.8, damping: 15 }}
className="icon-wrapper">
<img src={calendarIcon} alt="Calendar Icon" className="details-icon" />
</motion.div>
<motion.h3
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', delay: 1, damping: 15 }}
className="details-label">Multiple Ship Dates
</motion.h3>
</div>
</ClientOnly>
</div>
</div>
<div className="grid">
<section className="project-main">
<figure className="project-image project-image--full">
<img alt="Discords invite sheet redesigned"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/1-discord-growth.png"
/>
</figure>
<div className="body">
<h3 className="h3 project-about">
In early 2020, we repositioned Discord to be more friendly to communities besides gaming. This meant a renewed focused on improving our registration flow, onboarding, and helping users create successful communities.
</h3>
</div>
<figure className="project-image project-image--full">
<img alt="The multiple splash page designs for Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/2-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Discovery and Definition</h2>
<p className="paragraph">
Using a mix of qualitative data and user feedback, in 2020 we identified a handfull of
issues with Discord’s registration and onboarding.
</p>
<p className="paragraph">
These problems were:
</p>
<ul className="case-list">
<li>We didn’t educate users about our core primitives (servers, channels, etc).</li>
<li>The path after registeration was confusing and often led to states where the user had little idea of what to do next.</li>
<li>Finding your friends on the app was difficult.</li>
</ul>
<p className="paragraph">
I’d be remissed if I didn’t mention the amazingly talented designers that I now work with on this team.
San Chung, Selina Her, and Brett Johnson all now produce the designs on our team. This case study will
focus on the projects I primarily designed or co-designed as we built the team to what it is today.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Discords registration screen before and after"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/3-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Establishing a new visual baseline</h2>
<p className="paragraph">
User testing taught us that our current buttons and inputs didn’t seem interactable. Our app’s splash page
didn’t tell users anything about the product, and steps of registration looked inconsistent from being updated piece by piece.
</p>
<p className="paragraph">
I started design by updating the visual design of the steps we knew we needed for registration and login. That way we could
build from a baseline we knew was working and our future iterations would be consistent.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Three phones displaying Discords tutorial halfsheets in iOS"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/4-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Onboarding help</h2>
<p className="paragraph">
During user testing we heard common phrases like “What is a channel?”, “Are voice channels like a phone call?”.
Channels are how users organize their server by topic, so a new user not understanding one of the core
primitives of the product was a big contributor to why they felt confused.
</p>
<p className="paragraph">
Our solution was to improve the empty states of the most commonly visited parts of the app
along with tutorial messages to introduce these concepts.
</p>
<p className="paragraph">
We tested this approach with interactive prototypes and users first. After seeing success with our user tests we
released this project as an experiment and shortly after to production in early 2020.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Three phones displaying Discords server template screens"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/5-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Server templates</h2>
<p className="paragraph">
San Chung and I co-designed this project into production across Desktop, Android, and iOS.
Discord Servers are hard to understand for new users. They’re a primitive that can be used for communities of
800k people, an private book club for 10 of your fellow hobbyists, or for a classroom of 100.
</p>
<p className="paragraph">
By providing a list of templates to build from, we could teach users what Discord could be used for
and guide them through the process resulting in a less confusing user experience.
</p>
<p className="paragraph">
Server templates were designed around our most common uses cases “a place for friends”, “study group”,
“an art community”. This screen did double duty of education about the product and helping them onboard.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Illustrations by Kevin Dam at Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/00-discord-growth-illustrations.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="All of our prototypes in Figma we used for testing at Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/7-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Phone Registration</h2>
<p className="paragraph">
Next we built phone registration to make signing up for Discord easier. This feature had two benefits, less
friction to register and it allowed us to work on social graph features as our next project.
</p>
<p className="paragraph">
This project spanned across all three platforms we support(Desktop, Android and iOS). Phone registration is a
good example of a project that seems simple in practice, but requires a considerable amount of design for all of it’s various states (update, remove, add phone number etc).
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Three phones displaying the screens for registering with a phone on discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/8-discord-growth.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="Desktop version of Discord showing UI for entering a 6 digit number for password reset"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/9-discord-growth.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="Three phones displaying the flow of clearing a phone number on a users account"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/10-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Finding your friends</h2>
<p className="paragraph">
To make finding people you know on Discord easier, we built “Find Your Friends” which let users upload their contacts to find existing Discord users.
</p>
<p className="paragraph">
One of the challenge of this project was staying privacy focused. We let users decide whether or not other people could
find them. We had to balance this messaging and make it simple to dig further into your privacy preferences. We used
user research to help us message this feature since it’s uncommon with other modern social media networks.
</p>
<p className="paragraph">
Another problem we had to solve was how to surface this feature for new users vs existing users.
We decided to promote the feature before launch to help educated our existing users on how it would work.
<em>Selina Her</em>, the designer I mentioned earlier worked side by side on this feature. She owned how it would fit within
Discord's onboarding while I had started on how the feature a few months prior for existing users.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Floating phone with the Find Your Friends feature of Discord displayed"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/11-discord-growth.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="Three phones displaying the splash screens of Find Your Friends on Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/12-discord-growth.png"
/>
</figure>
<figure className="project-image project-image--full">
<img alt="Three phones displaying various steps of the Find your Friends feature of Discord"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/13-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">Measuring and validating designs</h2>
<p className="paragraph">
All of these features were tested with various experiments. On our growth team, forming a hypothesis,
testing variations of a design, and measuring it’s impact are critical to learning.
</p>
<p className="paragraph">
Quantitative feedback was used for us to measure the true impact and success of these projects
during experimentation and post launch.
</p>
</div>
<figure className="project-image project-image--full">
<img alt="Two phones displaying two variations of the Discord welcome splash screen on iOS"
src="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/growth/14-discord-growth.png"
/>
</figure>
<div className="body">
<h2 className="h2">The Result</h2>
<p className="paragraph">
All of these features, except for designs showing variations we tested, shipped in 2020 or early 2021.
</p>
<p className="paragraph">
To date, the Discord growth team has shipped dozens of features, tested even more ideas
using experimentation, and is continuing to work on improving our product for our next 100+ million users.
</p>
<p className="paragraph">
While there's still a considerable amount of work left to be done, I'm proud of the work my team and I did
for the features showcased above.
</p>
</div>
</section>
</div>
<motion.section className="container next-project">
<div className="grid">
<h2 className="h2 grid-title">Next Project</h2>
</div>
<div className="grid work-grid">
<Card
image="https://newportfolio.s3.us-west-2.amazonaws.com/server-video-final/server-video-tile-imagee.png"
imageAlt="Mockup of Discord's video chat feature with a person using it"
link="/server-video"
color="pink"
title="Server Video"
size="normal"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
<Card
image="https://newportfolio.s3-us-west-2.amazonaws.com/design-tooling-image.png"
imageAlt="UI of Design Tooling Plugins in Figma"
link="/design-tooling"
color="green"
title="Design Tooling"
size="normal"
onProjectEnter={projectEnter}
onProjectLeave={cursorLeave}
/>
</div>
</motion.section>
<Footer onFooterEnter={contactEnter} onFooterLeave={cursorLeave} onLinkEnter={linkEnter} onLinkLeave={cursorLeave} />
</div>
</div>
)
}
Example #6
| Source File: HomePage.js From enrollar with MIT License | 4 votes |
|
HomePage = (props) => {
const { scrollYProgress } = useViewportScroll()
if(localStorage.getItem('token')){
props.history.push('/home')
}
return (
<>
{
props ? (
<>
<Navbar props={props}/>
<div id="home">
<div className="section row">
<div className="container introSection col s12">
<Homecover />
<h2 className="header col s12 l6 pull-l6 center" id="enrollarTitle"
>enrollar</h2>
<p id="tagline" className="lighten-3 col s12 l6 pull-l6 center">
Step Up Your Learning Game!
<br />
<i>
Let us do the heavy lifting. <br />
Find all your favourite courses at one place!
</i>
</p>
<div className="col s12 center">
<a href="#whyEnrollar" className="btn-floating btn-large center pulse cyan">
<motion.i className="material-icons" id="drop"
style={{fontSize:{scrollYProgress}}}
>arrow_drop_down</motion.i>
</a>
</div>
</div>
</div>
<div id="curve"></div>
<div className="row why" id="whyEnrollar">
<div id="roll" className="col s10 offset-s1 l8 offset-l2" style={{"borderRadius":'24px'}}>
<div className="card" style={{"borderRadius":"24px"}}>
<div className="card-image waves-effect waves-block waves-light"
style={{"borderRadius":"24px 24px 0 0"}}
>
<img className="activator" src={ animatedCover } alt="cover"/>
</div>
<div className="card-content">
<span className="card-title activator grey-text text-darken-4">
Why use enrollar?
<i className="material-icons right">more_vert</i></span>
<p>Click to find out.</p>
</div>
<div className="card-reveal" style={{"backgroundColor":"#2a9d8f","color":"white"}}>
<span className="card-title white-text text-darken-4">
Why use enrollar?
<i className="material-icons right">close</i>
</span>
<p>
<a href="https://github.com/nowmozillaclub/Course-Place"
style={{color:"yellow"}}
>A NOW Mozilla Club project...</a>
</p>
<hr />
<p>
Ever been overwhelmed by the amount of sites that are there on the web for
learning your desired course?
<br/><br />
Guess we all have been there...
<br /><br />
To overcome this, <span>NOW Mozilla Club</span>
came up with a project that bridges all the sites together and allows the user to
view different courses from different sites at one place!
<br /><br />
Let's get learning, shall we?
</p>
</div>
</div>
</div>
</div>
<Features />
<Footer />
</div>
</>
) : (
<div className="loading">
<img src={LoadingScreen} className="responsive-img" alt="loading..." />
</div>
)
}
</>
);
}
