Making an object disappear after a certain time

[Reduce_]

Hi everyone!

I'm trying to make a video, image, etc. disappear after a set time is passed. I'd prefer if the method doesn't just make the object transparent- I want to put the object on a button, which means that an overlay on top of the button will make it unclickable.

Is there also a method where a part of the screen which scrolled past cannot be scrolled back to? For example, I'd like to have a first screen that comes up, and once scrolled past, is basically gone. Something similar to the Forbes quote of the day but instead of the  "continue to site" button you scroll down instead to reach the content.

Thanks!

[fotoroeder]

This needs some coding skills, unfortunately. There´s no possibility in Muse to let something disappear after a certain amount of time and no possibility to make an element not being reachable anymore after rolling it away.

You may have a look at musewidgeits.com but I didn`t see anything like this so far.

You should ask the coders from Forbes Quote .

Best Regards,

Uwe

[Reduce_]

I doubt the Forbes coders could help me, they made their website using a "continue to site" button, which is extremely easy to make by linking the button to the page.

[Günter Heißenbüttel]

Don’t understand quite well. Please elaborate.

Do you want

• a button to be clicked -> an image appears. –> it disappears after a certain time?

• an image button, which can be clicked, but nevertheless appears after a certain time (even if it is unclicked)?

• or …?

[Reduce_]

I'm trying to get something that appears right when the screen loads, then disappears after a while.

Thanks for the help!

The only current method I know is by using the composition widget, where something shown until the auto play time runs out. I tried using that method, but it creates an overlay and basically makes anything under it not clickable (or breaks the website's animations).

I was planning in the beginning to make one screen show up, play an animation, and then show the website itself. That means that I either have to put the whole website into the target (which gets rid of all scroll effects and doesn't allow stretching to browser width). The composition will play the trigger for the autoplay time, with the "Hide all initially" on, then reveal everything later.

The second method is by adding a huge rectangle that covers the screen in the trigger that plays with the animation, meaning that while the trigger is playing a huge rectangle is substituted for the "Hide all initially". However, after creating the huge rectangle that disappears with the animation, it's still there as an overlay, making everything under it impossible to click.

Animation Introduction (Composition Widget) by Edward Taylor shows exactly what I want to do, but uses the 1st method, making the website have no scroll animations and disabling stretch to browser width.

[Ussnorway]

have a look at this demo page

bootstrap

[Reduce_]

It's a good website, but sadly doesn't let you click under it. I'm curious on how you did it? Did you use the composition widget to make it disappear after a set time?

Thanks!

[ankushr40215001]

Looks like it's kind of an edge animation!

Ussnorway can you please shed some more light on this, can be achieved in Muse natively?

Regards,

Ankush

[Reduce_]

Take a look at Animation Introduction (Composition Widget) by Edward Taylor ​as it shows how to achieve this. It can be done in muse without any plugins, and uses the composition and slideshow widgets However, the page will not be responsive after and will act as an overlay (if there's a button or something under it, you can't click it).

If you don't understand how it works, it basically opens up the website with the composition on autoplay, plays the text for the certain amount of time, then fades away to show the website. You'll notice that the buttons are all selectable- this is done by putting everything in the target/trigger, meaning the website will not be responsive (and have potential problems with scaling). If you choose to move all layers outside of the composition and just have the composition play, there's going to be an overlay but it's so much easier to set up.

[Ussnorway · Accepted solution]

Reduce_  wrote

I'm trying to make a video, image, etc. disappear after a set time is passed.

allowed

Reduce_  wrote

I'd prefer if the method doesn't just make the object transparent

tricky but doable

Reduce_  wrote

I want to put the object on a button

I don't understand this... does pressing this button do something else or does it make the image appear or disappear?

Reduce_  wrote

which means that an overlay on top of the button will make it unclickable.

correct... the work around is to move the overlay off the page layout (desktop ONLY) or goto a new page

Reduce_  wrote

Is there also a method where a part of the screen which scrolled past cannot be scrolled back to?

no

Reduce_  wrote

For example, I'd like to have a first screen that comes up, and once scrolled past, is basically gone.

not as a scroll but possible with cms data

Reduce_  wrote

Something similar to the Forbes quote of the day but instead of the  "continue to site" button you scroll down instead to reach the content.

a cms can do this or a bootstrap code but the overlay limits above still apply if you use bootstrap... a cms needs a 3rd party system (like Publiz) but bootstrap code can be typed into Muse without needing any other tools... well a knowledge of code helps but there are good tutorials for that.

[Reduce_]

Thanks for the help!

Yeah, moving the screen off or putting it on a different page seems like a good idea! Any suggestions on how to do this? Usually buttons need to be clicked in order to move to another page, but how can you do that over a set amount of time?

I'm not sure what you mean on "move the overlay off the page layout", can you elaborate on that?

[Ussnorway]

Reduce_  wrote

I'm not sure what you mean on "move the overlay off the page layout", can you elaborate on that?

watch this and see how Dani moves the lightbox off the page layout (Desktop design only)

[Reduce_]

Thanks, that tutorial was really nice!

Just out of curiosity, you mentioned moving to a new page once the overlay plays for the set time. How would that be achieved?

Thank you for your help!

[Ussnorway]

I would use a Bootstrap timer then link to the new page from my Muse site or if the page is outside my Muse site (like Google.com say) then I'd just place it in a modal window... I recommend you have a look around for a widget however if code isn't your strong point and lets face it Muse isn't for coders so here is a simple free option to try out

MUSE RESOURCES™ | Timed Redirect

[Reduce_]

So far, I've looked at the Lightbox Display, and l like it a lot. The timed redirect is really basic however, and only allows you to put in text.

I can't complain though, only know the basics to java and haven't done much HTML before. Would creating a timer and making it redirect to a page in the muse site be easy? If it is, how would this be achieved?

Thanks!

Also, is there a way to make a definite size for an object inside the lightbox? It seems that whatever I put in it doesn't become the right size- if I scale a white rectangle to the same size of the website and put it in the target, it isn't covering the whole website when previewing in browser.

[Ussnorway]

Reduce_  wrote

Would creating a timer and making it redirect to a page in the muse site be easy? If it is, how would this be achieved?

you can place that redirect widget on your home page... just leave the text field blank... and have it goto any webpage (yes even on in the same site) you like then perhaps design your home page as a sort of "Welcome to my site" page that goes away in 5 seconds

you could also send a few years learning bootstrap code and make some custom design... its up to you

Reduce_  wrote

Also, is there a way to make a definite size for an object inside the lightbox? It seems that whatever I put in it doesn't become the right size- if I scale a white rectangle to the same size of the website and put it in the target, it isn't covering the whole website when previewing in browser.

you can place objects inside it at a certain size but they will always rescale themselves to FIT into the screen of whatever device is used by the guy at the other end and you tip don't know if thats going to be a widescreen desktop | an old ie6 browser running inside a V-xp system or a phone 350 pixels wide

[Reduce_]

Oh, I get how the timed redirect works now! Thanks!

While using the lightbox though, I can't seem to get it to disappear after a certain amount of time. I set auto-play to a certain amount of seconds, and it either doesn't do anything or goes into a loop (objects inside the target disappear for the set time, reappears). Is there any other setting I'm missing?

I'm using the same settings as the video you posted earlier.