While page is scrolling | using px instead of %

Design help Animations & Interactions
1

Hello :slight_smile:

Is it possible to somehow use pixel instead of percentage to start an animation ?
At the moment, my navigation backround remains transparent from 0% to 10%.
Then, from 11% to 100% its background will be white.

The problem is, the length of the body is unknown to meā€¦ I wish I could get this effect after having scrolled letā€™s say 800px instead of 10% of the pageā€¦ so that I always know when the navigation background color will take placeā€¦

Is that possible ?

Screenshot%20(1270)
Screenshot%20(1270)1920Ɨ1011 82.9 KB

Screenshot%20(1271)
Screenshot%20(1271)1920Ɨ1011 75.1 KB

Read-only link:
https://preview.webflow.com/preview/further-main-nav-v-6?utm_source=further-main-nav-v-6&preview=098ba3a3375d4c7da9ebc51d7f20837e

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

2

I donā€™t think this is possible on Webflow interactions, you can always create a ā€˜triggerā€™ that at your 800 px of your element will trigger the animation needed.

1 Like
3

hey @aaronocampo !

Thank you for getting back at me, appreciate !
All right, I just needed someone to confirm it was not possible.
I will try alternatives then, thanks ! :slight_smile:

1 Like
4

Hey @aaronocampo,

So Iā€™ve found an alternative :slight_smile:
Wrote a few lines of javacript and it seems to do exactely the trick I need (smoothly implemented it within my Webflow project too) :

/*
 * Scroll based nav bar opacity šŸ‘»
 * Expected behaviour:
 * turn background-color to transparent after scrolling 300px
*/

document.addEventListener('scroll', function() {
  // define the navigation div
  const nav = document.getElementById('navigation');
  // define the scroll element
  const scrollElm = document.scrollingElement;
  // calculate how many pixels have been scrolled from the top
  let pixelScrolled = scrollElm.scrollTop;
  /* console.log(pixelScrolled); */

  if (pixelScrolled < 300) {
    // from 0 to 300 pixel, color is white
    nav.style.backgroundColor = 'white';
  } else if (pixelScrolled > 300) {
    // from 0 to 300 pixel, color is transparent
    nav.style.backgroundColor = 'transparent';
  }
});

You can have a look at the script in action on my codepen:
https://codepen.io/anthonysalamin/pen/NJVRLL

EDIT:

Now just need a way to smooth the transition out :slight_smile:

1 Like
5

So the idea behind it is whenever youā€™re scrolling an element the nav bar shows a different background colour?

6

Nope the idea is to change an elementā€™s background color after having scrolled a specific amount of pixels. Since we can only do percentage based scroll animation, I had to use custom code to make a pixel based ā€œinterractionā€.

7

Yeah I get what you want to achieve, the only thing that I donā€™t get is why not using a trigger element to do this.

  1. The element can be 800px on size, or
  2. The element can be at 800px of the top of the section you need the interaction to happen

Iā€™m just saying this to avoid the need of custom code, but if you have it figured out itā€™s ok.