Streaming live at 10am (PST)

Change direction of interaction from down to up


#1

Hi Folks,

I have created a simple bar (block) that (upon loading the page) grows into view (0 to 200). Works fine, except it 'grows' downwards. How can I reverse its direction, so that it grows upwardly?

Many thanks!

https://webflow.com/design/june-201461102577290400?preview=9acd98f0f8d01d87c809daf5d9180233


#2

Hi @RB123 Follow steps below and let us know your result. Here they are:

  1. Create a new Div and put it right under first heading, give it a class name growing bar wrapper. Put your growing bar effect under your new growing bar wrapper.

    Click to Enlarge

  2. Change a bit growing bar effect properties as seen on following images. Remove its Top Margin properties or Set it to 0. Set its Height to only 20 px. is for visual-help purpose only because as you can see on next following image, we need to set its Position to Absolute so we can align it to Bottom of our growing bar wrapper (later we will set growing bar wrapper position to relative to make this happens).

  3. Now let's set our new growing bar wrapper properties. First, set its Top Margin to 50 px and its Height to 200 px. Next we need to set its Position to Relative and, optionally, you can set its border, again, for visual-help purpose.

  4. Let's Preview it.

Cheers


#3

Oh man ... I can't thank you enough. Slightly frustrating to know that I had the interaction correct, but not the setup.

Is it a fair guideline to suggest that for a growing bar effect: you need a wrapper that's absolutely placed and a block within that's relative (the element that grows). Just looking for the general / fundamental piece that I was missing.

Regardless of that, wow! Thanks again. Above and beyond, Pastiwibawa. You have no idea how many hours I wasted on that.

Again! First class. Many thanks.


#4

You are spot on @RB123, I am going to include this to a help doc entry. Thanks for the input and thanks to @pastiwibawa for the detailed info -- First Class smile


#5

Ah, super!

Dangerously informed now! : )

Many thanks!


#6