Display on scroll with fade transition

Wappler General Need Help
1

I have a div which shows when you scroll (dmx-show="(browser1.scrollY.offset > 100)") but I want it to fade in and out instead of just appear and disappear. I’ve tried the transitions in the Design panel but I don’t think they work with the Show and Hide Dynamic Attributes.

Is that the case? How should I do it?

2

Show/Hide attributes add css display: none / display: block to the element. The display property can’t be animated.
You should create custom classes which animate your element visibility and apply them on scroll instead of using show/hide for this.

1 Like
3

I got it working with a fade in on a div, but I can’t seem to get it working on a fade out. This works for me on fading in though on a flex container… this may help @sitestreet

image
image1111×774 22.1 KB

1 Like
4

Yes, because you cannot animate display: none :slight_smile:

5

That will be why then :smiley: Just wondering Teodor whats the point in the leave animation does that not relate to the hide action?

Thanks

6

No, the leave animation is used when you have dynamic data on the page filtered/udpated so elements are reloaded, next page is clicked etc.

That's not a limitation of Wappler, is how CSS works. You can't animate the display property.

1 Like
7

I went with creating two classes:

.item-show {
  opacity: 1;
}

.item-hide {
  opacity: 0;
}

and then used the Class Toggle Dynamic Attribute to use one or other class depending on scroll value.

Is this the best way?

8

But you can use animations like:

.fade-in {
	-webkit-animation: fade-in 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-out {
	-webkit-animation: fade-out 0.4s ease-out both;
	        animation: fade-out 0.4s ease-out both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;

  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;

  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

so just the fade-in and fade-out classes to the element, depending on the condition you need.

2 Likes
9

Thanks for clarifying the leave animation.