Simple dropdown navigation

[Geestig]

On a project I'm working I use a dropdown menu as a way to filter the shown content. However I want to transition to the corresponding page using highway transitions.

HTML `

Toon alles ({{craft.entries.section('projects').all()|length}}) {% for category in craft.categories.group('projectCategories').all() %} {% set results = craft.entries.section('projects').relatedTo(category) %} {{category.title}} ({{results|length}}) {% endfor %}

`

JS checkFilter() { this.filter.addEventListener('change', (e) => { const link = e.target.value; this.H.redirect(link); }); }

This way it goes to the correct page however, it does not transition. When I specifically add my custom DefaultTransition this.H.redirect(link, DefaultTransition); it shows me the following error:

When I try to use a contextual transition such as 'ProjectTransition' it returns the same error. I have no clue as to what could be causing this issue.

EDIT: I can give in a contextual transitions name (instead of the actual transition). However this does not initiate the animations that are being expected from that transition and simply loads the page regularly.

EDIT EDIT: The link I was giving was something like '/projects/name' but it had to be the full URL including http / https in order to make it work. Ofcourse I had to reinitialize the function on every navigation.