Dogstudio / highway

Highway - A Modern Javascript Transitions Manager
https://highway.js.org/
MIT License
1.43k stars 92 forks source link

Changing multiple parts of site in one transition and with different animations #95

Closed uncikmarek closed 2 years ago

uncikmarek commented 4 years ago

Hi not an issue, just question, I cant seem to find in docs how to do this, so I have a website where on page change I need to simultaneously:

site header: when you click on link which is to the right from actual active menu item, slide new content from right and slowly slide old content to left, and when you click on menu item to the left the animation must be in reverse order

content of site: fade transition thru opacity from old to new

So my question is, can I swap multiple parts of web at the same time and with different transition effect? And can I call different animation on header if clicked link has lets say data-side="left" and data-side="right" attribute?

ThaoD5 commented 4 years ago

Yes you can, you'll have to play with attributes and conditions, you'll probably have to define yourself the navigation to happen on the header on each page change.

So for example you have 5 elements, you're on page 1, all other menu items will trigger "right to left" highway transition, if you go on page 3, 1 2 will be left to right, 4 5 right to left. this can be achieved by using H.redirect(href, transition) and preventing default navigation on your items.

This is just an idea but there are other options as well, the only limit is your creativity and skill in JS development I would say :-) On my side, nothing seems impossible to achieve in what you're describing me, I've already seen super complex websites made with Highway so your use case is ok IMO :)

Glad you're trying out Highway !