Offcanvas v2 - not able to remake animation from video 06 [SOLVED]

Hello All

I am a happy user of Offcanvas v2 but in term of training I wanted to follow the 2 videos for making same style of Affinity menu
some changes on 1st video between v1 to v2 but everything went perfectly

but I am stuck on the 2nd video: animation
I just did same step by step but this script send me an error (on safari and chrome)

As I would like to understand to be able to understand java I am pretty lost right now
@PeteSharp if you have any clues about my troubles, u are more than welcome :wink:

is it about Offcanvas v2 (different of v1)?
or maybe some problems of codes?

thx

<script>
const menuContainer = document.getElementById('offcanvas-menu');
const menuLists = menuContainer.querySelectorAll('ul');
console.log(menuLists);
</script>



Hi @SENEK

Replace ‘offcanvas-menu’ with the ID of your Offcanvas menu.

Which, based off your screen shot is main-menu

This code is independent of Offcanvas Helper, and is just handling the animation effect for the Affinity menu replication. I kept the code simple, it has no checks for errors etc.

The main difference is OH2, now has support for multiple Offcanvas Menus, so the ID is no longer automatically added like it was in the video. It’s user definable.

Great you are following along. I think from memory I talk through the code I do use here. :+1:

It’s fun experimenting :smile: and learning as you go.

For anyone else who was interested in trying to replicate the Affinity Website using Offcanvas Helper.

Tutorials - watch videos 5 & 6

I guess this is the quickest resolution of the forum: 3 mins :smiley:

you were right, I am beginner in script and not so familiar…
thank you very much it solves my pb
I continue to learn based on your video

PS: I almost bought everything from your store (one by one and not with bundle unfortunately)
I would like to have everything so then buying Quicklink for Blocs and Flexy Foot 2
is there any discount possible in this case?

cheers

1 Like

:laughing: