Page Fades/Animation? - RocketCake Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > RocketCake
	Page Fades/Animation?

obligacc Registered User
Quote
2024-01-01 08:42:25

Heyo! Sorry if this has been asked before, but after scouring Google for an answer I thought I'd go through the pain of asking myself.

I'm trying to use Rocketcake for a personal project, and right now I'm trying to hyperlink a button to a separate page.

That's all well and good, however I was wondering if there was a way to add animation for a fade-in fade-out? I can't seem to find anything that would allow me to mess with the CSS.

I know sometimes advanced elements like this can be a premium feature, if so I'd love to know so I can personally weigh my option of either purchasing and continuing with the program or going back to manual learning.

Thanks!

erik Registered User
Quote
2024-01-01 08:59:43

Do you want to fade in/out the button when it is hovered/activated, or the page which the browser navigates to it?

obligacc Registered User
Quote
2024-01-02 04:23:47

Fade in to the next page - I know you can set it in a CSS document as an animation with keyframes.

micaelo Registered User
Quote
2024-01-02 09:00:21

Here is how to create a page fade-in effect in RocketCake (requires RocketCake Pro):

-> right-click the target page in RC's documents explorer
-> select "HTML Code ..."
-> select "Additional code in header"
-> insert this code

<style>
        body {
            animation: fadeInAnimation ease 5s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
</style>

-> click "OK"

That's it. Click Preview to see the effect. The page will take 5 seconds to fully fade-in.

Source: https://www.geeksforgeeks.org/ho...

obligacc Registered User
Quote
2024-01-02 12:13:15

*Snip*

Ah alright - So it *is* a Pro feature.

That's more or less what I was asking.

Thank you much!

micaelo Registered User
Quote
2024-01-02 12:46:15

If my understanding of the differences between Free and Pro is correct you can try this page fade-in with RocketCake Free and watch the effect via Preview, but the additional code won't be saved when you close the project. That would need the Pro version.

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons