Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

49

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Example 5: Animation On Scroll With Waypoint

https://gist.github.com/stolinski/423af72cae65db2e27c43a45a2a359f8

import React from 'react'

const Waypoints = () => {
  return (
    <div className="waypoints">
      <p>
        Lorem ipsum dolor amet poutine pitchfork tattooed venmo, heirloom cliche chartreuse gentrify mumblecore hammock single-origin coffee banh mi. Sartorial unicorn 90's edison bulb iPhone. Leggings pickled brunch neutra tousled. Occupy fixie affogato pinterest vaporware aesthetic, tbh subway tile hammock next level prism vape lomo taiyaki kale chips. Jianbing knausgaard taxidermy squid artisan thundercats, gochujang subway tile air plant taiyaki master cleanse cray.
      </p>
      <p>
        Pug godard pour-over 90's direct trade, PBR&B +1 next level organic edison bulb quinoa DIY. Taiyaki sriracha unicorn, cronut taxidermy chicharrones four dollar toast keytar cold-pressed raclette yuccie cray iceland. Roof party knausgaard neutra plaid, pork belly chambray banh mi chia. Blue bottle narwhal iceland health goth cornhole fam humblebrag flannel pitchfork pickled.
      </p>
      <p>
        Jianbing lomo lumbersexual put a bird on it fixie next level pitchfork gentrify, disrupt echo park. Hot chicken subway tile drinking vinegar fixie. YOLO keytar gluten-free artisan live-edge four loko cred man braid food truck leggings. Health goth semiotics kogi heirloom authentic hell of. Pork belly helvetica cornhole gentrify microdosing austin chillwave pitchfork paleo cred raclette venmo vegan fashion axe +1.
      </p>
      <p>
        Craft beer tousled ennui ugh, williamsburg stumptown flexitarian plaid activated charcoal. Taxidermy letterpress glossier 8-bit, organic bitters coloring book. Selvage lo-fi typewriter wolf ugh, lyft four loko chillwave bitters mustache tumblr copper mug subway tile. Fanny pack aesthetic taiyaki vice sustainable mustache. Asymmetrical shabby chic DIY authentic normcore man braid you probably haven't heard of them. Mustache humblebrag umami beard williamsburg. Prism hexagon VHS, paleo tacos narwhal etsy fashion axe ennui schlitz ethical echo park vinyl.
      </p>
      <p>
        Health goth af scenester irony, farm-to-table austin intelligentsia man bun celiac flexitarian yuccie marfa kickstarter banh mi gluten-free. Pabst vape bespoke banjo umami next level tumblr offal wolf kombucha. Jean shorts direct trade distillery yr glossier dreamcatcher, before they sold out butcher. Fixie unicorn leggings pabst forage neutra. 3 wolf moon microdosing food truck hell of keytar, bitters disrupt flannel chartreuse knausgaard affogato ethical pickled. Humblebrag small batch meh glossier mixtape.
      </p>
    </div>
  )
}

export default Waypoints

Downloads

Become a pro to download code and videos

Comments

User avatar

Teddy

over 2 years ago

@Justin It seems you use this with transition along with waypoint it causes these issues. I am currently looking for an alternative to waypoint that can do the same thing.

User avatar

Justin

over 2 years ago

I am tryin to use this with GatsbyJS and it is animating all the Waypoint components on render :(

User avatar

Jonathan Prozzi

about 3 years ago [edited]

EDIT: I just wanted to update this -- the problem was Gatsby specific. I was using gatsby-plugin-transition-link in addition to react-waypoint, which didn't play well with waypoint because it changed the scrollableAncestor. Figure this may be helpful for some other folks!

Great tutorial! I just wanted to comment about something in case anyone else experiences this. I've used waypoint in previous projects without issue, but I was using it again in a new project and noticed my waypoints were triggering only on page load, and not due to scrolling. I followed the tutorial again just to make sure I didn't do something incorrectly, but I couldn't isolate what was happening.

I did some debugging and noticed that for some reason waypoint wasn't able to track the scrollableAnscestor. I read through some past issues in react-waypoint's GitHub and they suggested adding the debug prop, which showed that my previousPosition was returning undefined.

The fix for this was adding scrollableAncensor={window} into waypoint.

Not sure why I suddenly had this issue, as I haven't before and I used pretty bare JSX for testing.

Anyway, just wanted to share in case anyone else experiences this! Here's a link to the issue that helped me figure it out: https://github.com/civiccc/react-waypoint/issues/171

Great lesson & course!

Stan Vision

about 3 years ago

How can I make staggering revealing animation for multiple elements? Should I make separated state props for toggling the animation for each element?

Want to join the conversation?

Become a Pro member today!