search

LeaVerou / inspire.js

Lean, hackable, extensible slide deck framework. Previously known as CSSS.
https://inspirejs.org
MIT License
1.73k stars 254 forks source link

Not clear on how to use `data-steps` attribute on a slide #160

Open bentorkington opened 10 months ago

bentorkington commented 10 months ago

Background: I want to add a WebGL canvas to one of my slides, and cue different phases of an animation when I use the arrow keys to proceed to the next slide. Clearly it's not desirable to use separate slides for this, but to do something similar to what delayed-children does.

Looking over the source I've found a data-steps attribute that I can use to assign a number of steps to a slide, but I'm not sure how its supposed to be used. I see that it must be set to an integer, and doing so creates a number of <span> elements that progressively have displayed added to their class, but I don't understand what these elements are supposed to do, and there doesn't seem to be anything demonstrating the feature in the example slide deck.

Furthermore, I was hoping to hook into the slidechange event to trigger different phases of the animation, but this only fires for a complete slide change, not for progressive changes on a slide with delayed-children or data-steps.

I suppose I could use DOM Mutation Observers to watch these changes to these dummy elements, but this seems unwieldy as I'd need to find the child index of each to know which one was just displayed.

At this point I thought I'd ask the community what I might be missing about data-steps, and if there's an opportunity for a feature to fire an event as each of these steps are progressed through, which I'd be happy to submit a PR for. Thoughts?

LeaVerou commented 10 months ago

Yeah unfortunately this was primarily intended for slide effects that can be coded with CSS attribute selectors. Ideally Inspire.js should also fire events for this (e.g. step), just like it fires slidechange events. Happy to accept a PR for this!

bentorkington commented 10 months ago

Whoops! I found the gotoitem-end hook (but there's no classical event) which I can use for my purposes. Once I've finished putting my talk together I'll add a classical event and edit the readme.md

LeaVerou commented 9 months ago

The irony: I needed this myself just now, and had to look up your post to remember how to do it šŸ¤£ And I coded the thing!

LeaVerou commented 9 months ago

Just pushed an experimental change for an itemcurrent event, if you do get to try it out, please let me know how it worked! Not closing this yet, as the docs are still neededā€¦

bentorkington commented 9 months ago

well would you look at that, something else I said I was gonna do and didn't get around to. Thanks Lea