Skip to Content

Designer News

StoriesJobsPodcast
  • About
  • Things
  • Gallery
  • Advertise
  • RSS Feed
Log in / Register+New Story
I need help.

Join Us

Designer News is where the design community meets.

Register now
↵

Show DN: I made a CSS3 scroll position based animation library

almost 7 years ago from Erik Terwan, Full stack developer.

  • Simon FSimon F, almost 7 years ago

    Have you looked at wow.js? https://github.com/matthieua/WOW

    If so how does this differ from that?

    0 points
    • John KimJohn Kim, almost 7 years ago

      It's free! :P

      0 points
    • Erik TerwanErik Terwan, almost 7 years ago (edited almost 7 years ago )

      Try scrolling up & down, wow.js just triggers the animations once. And wow.js minified is 8.22 KB while ScrollTrigger minified is 1.4 KB

      5 points
      • Thompson GeorgeThompson George, almost 7 years ago

        Big up

        0 points
      • Jared Pike, almost 7 years ago

        Is there an option trigger them just once?

        2 points
        • Erik TerwanErik Terwan, almost 7 years ago

          Not yet but i'm interested in this myself, so this might be a feature in the future ;)

          1 point
        • Jay KerrJay Kerr, almost 7 years ago

          I would love to see this as an option too.

          0 points
          • Erik TerwanErik Terwan, almost 7 years ago

            I recently added this option, just use the 'once' option in the data-scroll tag! Releasing v0.2 today with more legible/concise syntax.

            1 point
      • Julian LloydJulian Lloyd, almost 7 years ago

        wow.js is positioned as the companion to animate.css, which is a collection of CSS animations (as opposed to transitions). It’s chiefly this reason that wow.js does not trigger animations more than once, since reversing CSS animations is an entirely different beast than removing a CSS class with transitions.

        1 point
        • Simon FSimon F, almost 7 years ago

          Can I use ScrollTrigger with Animate.css?

          0 points

Available Markdown syntax:

# H1
## H2
### H3
#### H4
##### H5
###### H6
*italics* or _italics_
**bold**
~~strike~~
- List item
- List item
- List item
1. List item
2. List item
3. List item
[Link title](https://isitchristmas.com/)
![Image title](http://imgur.com/0fwbUI3.gif)
> Blockquote
^Superscript
<code>
   foo();
</code>
***
Horizontal rule
---

Now playing

Designer News

Where the design community meets.

Designer News is a large, global community of people working or interested in design and technology.

  • News

  • Top Stories
  • Recent Stories
  • Badges
  • Post a Story
  • Jobs

  • Find a Job
  • Remote Jobs
  • Design / Dev
  • Post a Job
  • Top Companies
  • DN

  • Podcast
  • About
  • Guidelines
  • Advertise
  • Terms / Privacy
  • More

  • Search
  • Shop
  • Things
  • Gallery
  • RSS Feed

© 2023 Designer News Ltd.

Have feedback?