Can I make elements disappear?

[nguyenlamlll]

Hi there,

I'm using ScrollReveal 3.4.0 on Chrome, developing with Net Core 2.0 and Razor Pages. I'm pretty new to front-end development so this question might be a bit silly, but can I make an element disappear after it has been revealed (after some seconds or some button clicks).

I reckon that I need a fixed pre-made place on the website so that contents of the element will be dragged into place. Can I place a second point on my site to do the disappear animation? I mean, is it supported?

Thanks a lot!

[jlmakes]

"but can I make an element disappear after it has been revealed"

I don't fully understand what you're trying to build, but the options.afterReveal callback will let you manually do whatever you want after a completed reveal animation:

var sr = ScrollReveal();

sr.reveal('.item', {
    afterReveal: function (el) {
        // You can do whatever you want with the `el` here...
    }
});

"Can I place a second point on my site to do the disappear animation? I mean, is it supported?"

There is no ScrollReveal API for manually triggering (or resetting) animations, yet.

[nguyenlamlll]

Thanks for answering.

Basically, I'm looking for the float out transition to complete the float in - float out chain.

I have a fixed element on the page which will be reloaded after the user clicks a button. The page is small and doesn't require to scroll up or scroll down. So right now what I'm doing is removing the attributes, loading the new contents inside the element, and then calling reveal() on it again.

[jlmakes]

Basically, I'm looking for the float out transition to complete the float in - float out chain.

ScrollReveal currently does not provide manual control over the "float in" or "float out". This is managed for you based on element visibility. So when you say...

The page is small and doesn't require to scroll up or scroll down.

This makes me think ScrollReveal is not a good solution for this part of your project.

From what you've described, it sounds like toggling classes in your button click handler would be effective, and simpler. That way you don't have to wrestle with the ScrollReveal API, or the changes it makes to the DOM.

I'm imagining some CSS like this

```css .item { transition: transform 0.2s, opacity 0.2s; transform: translateY(-50px); opacity: 0; } .item.revealed { transform: translateY(0px); opacity: 1; } ``` Where you toggle `.revealed` on your element, inside the button click handler.