ConnorAtherton / walkway

An easy way to animate SVG elements.
http://connoratherton.com/walkway
MIT License
4.37k stars 229 forks source link

feature suggestion: filter elements (draw / redraw) #44

Closed DanielRuf closed 7 years ago

DanielRuf commented 7 years ago

Currently querySelectorAll is used for the selector so we can already draw a set of elements at the same time.

But in some cases it might be helpful to instanciate Walkway on a set of elements and draw just single elements using a filter / id selector). This could be done with an optional parameter (selector to filter the current elements of the instance) for draw and redraw.

Like creating a Walkway instance for all elements with a class animated and then animate a single one using an id selector.

I've done a similar approach using an associative array / object with multiple Walkway instaces and calling draw of the instance when the animated element enters the viewport.

https://sicherheit.daniel-ruf.de

ConnorAtherton commented 7 years ago

@DanielRuf Do you have an example running anywhere that demonstrates the use case you are describing above?

I've done a similar approach using an associative array / object...

That sounds like a pretty good solution to me. Walkway focuses mostly on the drawing, and any viewport logic is container in the application using it. What would you think about adding a small section to the README outlining the problem you encountered and how you solved it? Since I think it would be useful to share with other people wanting to experiment with this library.

DanielRuf commented 7 years ago

@ConnorAtherton outside of Walkway using an object: https://sicherheit.daniel-ruf.de/

DanielRuf commented 7 years ago

Generally I have generated an object with Walkway instances and tracked the status in an object and used Array.every to check if all were drawn.

You misunderstood it a bit. I do not want to add any viewport related changes but add an optional argument filter so I can draw just one of the selected elements.

Walkway uses querySelectorAll so instanciating Walkway on elements with the same class works. But draw starts drawing all of them at once. Currently there is no possibility to draw/redraw just one of the elements from the selector.

ConnorAtherton commented 7 years ago

@DanielRuf Nice!

Where did I misunderstand? I took my viewport sentence from here:

calling draw of the instance when the animated element enters the viewport

Any logic pertaining to whether the elements is coming in or out of the viewport should not be in this library, which should solely focus on transitioning the the frames to form an animation.

Currently there is no possibility to draw/redraw just one of the elements from the selector.

That is intentional, see my comment in this issue. Mainly because it does not take a look of glue code to achieve what you want. Like you said, instead of having a single walkway instance, just have more, with each one matching a different selector pattern.

DanielRuf commented 7 years ago

Ok, than I will stick with my solution =)

Thought we could have a cleaner aporoach and a filter parameter for draw. Was just a suggestion =)