I can’t figure out a good way to make a navigation menu where when I click on a menu item, it shows the section on page for that item, and hides the other sections at the same time.
It is impossible for me to have the About button open the About section as well as close any currently-open sections (such as Contact Us), within the same animation, without hand-coding a close animation for every single section individually, which makes the animation completely unmaintainable and unscalable. If a new section is added, I have to make changes to every single animation on the page. There should be an intelligent way to hide all sections EXCEPT the one I clicked a navigation button to show.
In other words, it is impossible to animate all but the selected element for a given class, in order to hide other sections, at the same time as animating that section by itself, within the same animation. The designer changes all of my other animations in the same animation to either the class or selected element whenever I change a single animation’s target, so it won’t let me design more complex interactions, like what I’m describing.
It seems the class-based animation keeps interfering with the Selected Element animations.
Section class: hide = true
seems to override the element’s: hide = false
I do not like this behavior. My understanding of how the animations work is that it would select via class or element ID, and then alter the state of the hide
attribute for each element that is an instance of the class, rather than altering the class’s global hide
attribute which overrides the element’s hide
attribute.
The interpreter should be looking at fields like this: element -> hide: true/false?
instead of like this element -> class -> hide: true/false?
I find this completely ridiculous. This is a pretty common use case for any button/animation.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)