Choosing the animation
Closed this issue · 4 comments
Hi, I have another question regarding prioritisation of animations in swupjs.
Say i have two animations defined. One which goes 'info>homepage', and another '*>homepage'.
From the info '/info/' page to the homepage '/', the 'info>homepage' animation should take precedence right? I'm finding that the wildcard * animation is overriding the 'info>hompage' animation in my website and I'm not sure why. It would be good to understand a bit better how this works, as the docs don't provide a lot of info.
Hi,
The process of choosing the animation can be seen here and is using kind of a rating system. This system considers * and the actual route as a same fitting animation, which could definitely consider the actual routes as more fitting than a wildcard. I will make the change in the next few days.
The actual process of choosing the animation is intentionally not mentioned in the documentation, as I think that's something that should be handled automatically for you. I guess no one just ever got to this level of complexity as you have.
In a meanwhile, you can reorder the animation definition in your options. When two animations are considered as a "same fitting", the first one is used.
Thanks for clarifying that. I hadn't intended to build with this level of complexity/control for transitions initially... but it has been interesting seeing how far I can push swupjs in this regard.
I think for general use cases the current method works well, but having used barba in the past I do miss the 'views' approach for this reason [http://barbajs.org/views.html]. I personally would love to see some of this logic implemented into swupjs animation routing, I don't think swup needs it though.
For example, it would be really helpful to be able to define the [starting route]>[final route] using something like a data-namespace="homepage" attribute on the swup container. This could be the first preference for defining the [starting route], followed by the url slug if this isn't present. The data-swup-transition on links would be first priority for the [final route] if present, followed by the data-namespace="homepage" attribute, and then the url slug if this isn't present.
This would be really convenient for portfolio-based sites where projects have unique url slugs, and the transition would be best defined by the page template used.
Hopefully, that makes sense!
That makes perfect sense, although it might make the process of choosing the animation a bit more confusing for people at first, as we would add another place to define the name. I will give it some time and think it through before making this change, as you can currently solve your issue by changing the order of animations.
Here is another thread discussing some changes in the content replacement/animation flow. If you have any other ideas, you're more than welcome to add a comment!