Midwest Dev Chat

MidwestDevChat.com github.com/skidvis/Midwest-Dev-Chat

  • The newest 15 messages in the super-cool #frontend channel.

  • 01/12 21:27:04 Edgardo: Any folks around here know how to do CSS animations? It’s intended to be one of those animations tied to scrolling where the page doesn’t move but the animation runs as you scroll. I can provide more details if anyone has the skillset and some availability.

  • 01/12 22:38:57 Hipolito: @Edgardo as in, the animation frames advance forward based on the page being scrolled down, or backwards when the page is scrolled up? I haven't implemented it before, but it sounds like a fun challenge

  • 01/12 22:39:41 Edgardo: Yup. a little scroll-jacking.

  • 01/12 22:41:16 Hipolito: Playback speed based on the scroll speed?

  • 01/12 22:42:43 Hipolito: With the video starting at 0% as soon as the top pixel of the video element is in the viewport, and hitting 100% when the bottom pixel of the video element leaves the top of the viewport?

  • 01/12 22:43:20 Hipolito: no, you said CSS

  • 01/13 09:23:49 Bartholome: @Edgardo what you’re wanting to do with animations is pretty easy to do with Greensock and would probably look a little cleaner. But you can set the animation-delay property with a negative value and jump around the animation that way.

  • 01/13 09:24:47 Deven: i’m not sure you can do it with CSS. You’ll need javascript to find scroll percentages in order to update the animation’s percentage.

    *If it needs to be ‘css’:*
    You can periodically apply classes to the HTML at given scroll-distances such as `.one-fourth-complete` then do 1/4th of the animation’s progress.

    *If it can be javascript*
    It depends on which kind of animation you’re looking for (raster / svg lines / svg objects).
    Like @Bartholome said, Greensock is probably going to be your best bet.

  • 01/13 09:25:11 Bartholome: `animation-delay: var(—jsScrollPosition)`

  • 01/13 09:25:18 Bartholome: or just manually setting it via JS would work

  • 01/13 09:35:59 Edgardo: @Bartholome @Deven Thanks, friends — I figured JS (something like greensock) would be the driving force, but figured it’d be dancing with CSS to generate the animation. It’s totally fine with me if css isn’t the solution. Canvas? Fine. JS-only? Fine. slightly_smiling_face

  • 01/13 09:37:27 Bartholome: No problem, I’ve used this in the past for exactly what you’re asking for : https://greensock.com/timelinelite

  • 01/13 09:37:31 Bartholome: Have had great success with it

  • 01/13 09:37:55 Lucy: GreenSock++

  • 01/17 17:10:27 Davonte: anyone have experience with the flickr api? trying to get the user ID by username but flickr.people.findByUsername seems to be returning the wrong ID

  • *Usernames have been changed to protect the innocent.

Check out all the cool channels!

Join the conversation!