DEV Community

Minimalistic nav menu with Vue.js and GSAP - WotW

Eder Díaz on April 24, 2019

Welcome to the Second Season of the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with...

Read full post

Advaith • Apr 25 '19

This is really clean and helpful! I haven't really used GSAP, I use d3 transitions, but this will help me get started on a Vue, ThreeJs, and GSAP I've been wanting to do for a while now.

Awesome work!

Nick keers • Apr 24 '19

Good stuff, simple but effective.

It looks like you made a mistake when posting the code, you call this.animateLetters but the function you posted is called animateChars

Eder Díaz • Apr 24 '19

You're right, I just fixed it. Thanks for the feedback :D

Mateo Hrastnik • Apr 25 '19

Why use TweenMax to animate the letters?
You can just add this to the css and have the same effect.

.char {
  transition: transform 0.3s;
}
.selected .char {
  transform: scaleX(-1);
}

Eder Díaz • Apr 25 '19

You're right, I didn't know that transforms had transitions support, for some reason I though they just didn't work together.

Just to match I'll add an ease-out easing property to match TweenMax's one

Victor Tortolero • Apr 29 '19

Hey there, awesome post 😄! I created a React version of this using react-pose:

Lazar Ljubenović • Apr 25 '19

What exactly is “minimalistic” about this? The letters flipping backwards or the 23kb library which achieves it?

Eder Díaz • Apr 25 '19

As in art, it is about the design of the menu. The menu is just text and an arrow, nothing too complex (ie borders, shadows, etc)