Fade Transition

[ghost]

I'm hoping that a discussion could be opened up about adding Fade back into the transitions for Glide. It sounds like it was available in v2, I'm confused as to why it was removed from v3. I enjoy Glide for its simplicity and easy setup, but this seems like a necessary feature to include. Originally brought up in #32

[freekwevers]

I know there is currently no fade option available in this awesome plugin..., but with a little CSS you can get the fade behavior:

`.glide__slides { transform: translate3d(0,0,0)!important; width: 100vw!important; height: 100vh; } .glide__slide { opacity: 0; z-index: 0; position: absolute; top: 0; left: 0; transition: opacity .4s ease; height: 100vh; }

.glide__slide.glide__slide--active { opacity: 1; z-index: 1; } `

This disabled the transform3d on the .glide__slides that would normally be going on. The .glide__slide divs get position: absolute, top and left 0 to stack them on top of each other. The opacity is 0 for al slides, except for the active one. Therefore only the active slide will be visible.

Note the 100vh on the .glide__slides. Because in the example above the individual slides get a 100vh, the .glide__slides need to get this value as well.

Hope this helps.

[ghost]

It all seems so easy once its written out for you! Thanks that was exactly what I'm looking for

[jameelmoses]

vote to re-open. this solution only works if you have a single slide showing at a time

[CorySchulz]

Would love to see fade added back in

[ghost]

I would too, I wonder how hard it would be to make your own plugin for it? I'm thinking you would need to extend the transform module or create your own...

[Tam2]

I vote to re-open this too, should get some options

[freekwevers]

The "solution" I mentioned was just a dirty workaround for the single slide use case, because the fade option is currently not available in glide. I would love to get this out of the box to...

[ghost]

I agree, I'll open it up again, but I wonder if anyone here is willing to take on the task? I'm not super familiar with the way this slider is built, but I took a swing at it and didn't get very far.

[MarkHTML]

+1

[willdavidow]

For anyone interested, I simplified the CSS for fading from @freekwevers post (above).

position: absolute on every slide and height: 100vh on glide__slides was messing with my layout.

.glide__slides {
    // important needed because this is set using the style attribute
    transform: translate3d(0, 0, 0) !important;
}

.glide__slide {
    position: absolute;
    top: 0;
    left: 0;
    order: 2;
    opacity: 0;
    transition: opacity 1250ms ease-in-out;
}

.glide__slide.glide__slide--active {
    position: relative;
    order: 1;
    opacity: 1;
    z-index: 1;
}

[ary-ana]

The above solutions did not work well for me. I was able to achieve a fade in/out transition (for my slider that only shows one slide at a time) very easily with just this CSS:

// this prevents the usual sliding transition effect from being visible:
.glide__slides {
  transition: none !important;
}

// and this creates the fade in/out effect of the slides:
.glide__slides li {
  opacity: 0;
  transition: all 700ms ease-in-out;
}
li.glide__slide--active {
  opacity: 1;
}

[morawcik]

Anyone gets fade effect for multiple slides visible at once?

[julie-impuls]

Would also like to know how to get a fade effect for multiple slides visible at once.

[lano-vargas]

The above solutions did not work well for me. I was able to achieve a fade in/out transition (for my slider that only shows one slide at a time) very easily with just this CSS:

// this prevents the usual sliding transition effect from being visible:
.glide__slides {
  transition: none !important;
}

// and this creates the fade in/out effect of the slides:
.glide__slides li {
  opacity: 0;
  transition: all 700ms ease-in-out;
}
li.glide__slide--active {
  opacity: 1;
}

Beautifully done, simple with much less css then the other examples and this is the only one that worked for me. much appreciated.

[7rocs]

For anyone interested, I simplified the CSS for fading from @freekwevers post (above).

position: absolute on every slide and height: 100vh on glide__slides was messing with my layout.

.glide__slides {
    // important needed because this is set using the style attribute
    transform: translate3d(0, 0, 0) !important;
}

.glide__slide {
    position: absolute;
    top: 0;
    left: 0;
    order: 2;
    opacity: 0;
    transition: opacity 1250ms ease-in-out;
}

.glide__slide.glide__slide--active {
    position: relative;
    order: 1;
    opacity: 1;
    z-index: 1;
}

And set animationDuration property to 0

[gitVasile]

@7rocs That worked well for me, thank you. I added rewindDuration: 0 into params too.