Navbar animation like www.invisionapp.com

Design help Animations & Interactions
1

Hey guys :slight_smile:,
I have a little question and am convinced that some of you can easily help me out!

I just want to animate a navbar after I scroll down 50% of my hero section. (Like https://www.invisionapp.com) With Interactions 1.0 this was super easy but I just donā€™t understand how I can create something like this with Interactions 2.0 :confused:

Thanks a lot in advance!

Here is my public share link: LINK
(how to access public share link)

2

There is no threshold for the ā€œscroll-inā€ ā€œscroll-outā€ trigger in IX2 yet, thatā€™s why youā€™re confused.

But thereā€™s a technique nevertheless, and itā€™s much more precise. I was using it for IX Legacy too.

Instead of placing the interaction on the element that must be affected by it, you place it on a dummy, invisible div that you place exactly where you want, using absolute positioning. Then you target the class of the element that must be affected.

Look here: www.lebathyscaphe.com and look on the right side of the newspaper. Iā€™ve let the divs that I use as triggers for the submarine animation visible.

http://vincent.polenordstudio.fr/snap/buxdx.jpg

Using that technique you can adjust events exactly like you want, and fine tune them easily by just moving the divs. Even better, by using VH units for their vertical position, you can stretch or shrink a whole series of animations depending on the viewport height, and ensure a good viewing experience on all devices.

PS: you can still use IX Legacy, along with IX2. They can work together.

1 Like
3

Or simply create while scrolling in view interaction on the hero section and create the scroll down interaction for the menu element at 50%.

1 Like
4

hey @vincent for that super accurate question!! Iā€™m sure that this will solve my problem! :slight_smile: I will try to create this animation and let you know if I figure it out.

Best regards from Germany! :)))