Hi everyone!
I am new to Readymag and I’ve been trying to create an animated menu for my portfolio. I’ve categorised my work into sections and I want each section to appear in the menu (editorial design, motion design, …). On hover, I’d like the text leading to each section to become italic (same font, just italic - also, I’m not using a variable font). I watched tutorials and searched through this forum but I couldn’t find anything, which led me to think that this might not be possible in Readymag. Is that right? If so, do you have any idea how I could achieve this with code?
I would suggest you used two different text widgets for this (one with default and the other with italic). Place the second image on top of the existing one. Then, add a Hover animation to the one on top (italic) with Opacity 1—>100 with itself as the trigger. The idea is that the second text is ‘invisible’ at first but you can make it ‘visible’ (appear on top of the first one) when hovering it.
To avoid having the first text displaying underneath, you can apply text box color to the second widget or you can opt to use another animation to hide first widget when the second one is being hovered.
I wanted to achieve the same thing as the above, but I wanted to pin my horizontal navigation menu text to the top of every page, which will have different background colours, is there any other way to solve this? Alternatively I was thinking of creating more of an animation on hover for my menu titles. I wanted each letter of the words to separate and expand horizontally slightly. For example Home > H o m e, About me > A b o u t M e, etc. How could I make them actually move, rather than just turn from one word to the next in a rigid way? Also the animation would go back to the original after the cursor is moved. I hope that makes sense! Any help is so appreciated
you could use lottiefiles to have this. create your desired animation (text in two states) and have it playing on hover. Or you could also use pure css to get this done, which would be the cleanest way. You would need to set it up like this:
[data-id="PASTE DATA ID HERE"] {
transition: letter-spacing 0.3s ease; /* smooth transition */ }
[data-id="PASTE DATA ID HERE"]:hover {
letter-spacing: 5px; /* increase the distance between letters on hover */ }
You need to set in the correct data-id of your buttons via the dev-tools / inspect.
probably you would also need to check if your textelement is a child of the data-id element.