Hamburger icon animation

Tips
1

Hi everyone,

Thought I would share how to achieve a hamburger animation in Cwicly, with only the use of Relative Styling (which targets the modal-open attribute, which is added every time a Modal block is opened).

Enjoy :slight_smile:

10 Likes
2

Dear Araminta

Very interesting guide. I find Cwicly to be very customizable, but currently there is little documentation and video tutorials for newbies.

Thank you !

3

This is awesome @Araminta.

No additional interaction rules required, and since we have a very clean code output now, this is definitely something I will use in the future.

Thanks for the share :heart_hands:

1 Like
4

Hi @Araminta,

thank you for the tutorials. For what reason are the Advanced Attributes used? At the end of each video they are removed :thinking:

5

Hi @T-low,

Great question!

I added the “modal-open” attribute to demonstrate that when editing the Relative Styles, you can see what you’re doing instead of doing it blindly. Especially for this type of fiddly animation.

I made sure to remove this attribute at the end of the videos, since if I didn’t, my hamburger would already be in its final position and not its original one which would ruin the animation.

Of course you don’t have to add the attribute, it’s up to your editing preference.

Please let me know if this clears up the confusion :slight_smile:

2 Likes
6

Hi @Araminta,

thank you for elaborating. This sounds like a nice way of editing, will try it out :blush:

2 Likes
7

Love that!
Thank you @Araminta

1 Like
8

Hi everyone,

Thought I would just add that both these Hamburger animations are now readily available from the Cloud Design Library, in the Menu → Hamburger categories.

So in case you don’t feel like building them from scratch, just bring them in from the library :wink:

6 Likes
9

Thank you very much @Araminta
I’ve already done from scratch the first one following theinstructions of your great video.
For sure, I will import the second one.

2 Likes
10

Hi @Araminta
Since this morning, the hamburger is not visible anymore but I didn’t change nothing.
Can you help me to find the origine of issue: on my site or a Cwicly change that prevents the hamburger to be visible.
Cheers,
Bruno

EDIT:
In order to set the site “live”, I added an icon next to the hamburger with the link to the modal.
Immediately (and I changed nothing) the previous hamburger (designed according to the video) reappered. I deleted the very new icon freshly added and now, all is ok.
I don’t understand nothing!