Keyframe animations

Author Posts

deanphillips1991 January 12, 2020 at 11:16 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hey man,

Is it possible to write our keyframe animation and give it to elements using the GUI at all:

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

I’d like to give a bunch of elements a float like animation, and offset each one (delay?) so they all float but at different times.

Sebastian January 13, 2020 at 2:22 pm

Hi Dean,

Yes, simply add your keyframe code to the full code editor: View > Full code editor

You can then reference float in the animation-name field of Microthemer’s animation options.

deanphillips1991 January 13, 2020 at 3:35 pm

Worked perfectly.

Is there anyway to enter a bunch of CSS (say 10 selectors given by O2 is one of their blog templates) and have that all split into selectors at all?

Sebastian January 14, 2020 at 10:55 am

Hi Dean,

You can import multiple CSS selectors into the Microthemer interface via Packs > Import > CSS Stylesheet.

Just paste the CSS for the 10 selectors into the editor. Click the IMPORT button when you’re ready (bottom right of the screen). The config options and REVIEW BEFORE IMPORTING button might be helpful first however.

Please let me know if you need any help with that.

Cheers,
Sebastian

deanphillips1991 February 15, 2020 at 12:11 am

Hey man,

I had a question about another element becoming into view, trigger another elements animation:

https://www.loom.com/share/92f5d863917d401f92d31146f63750b8

Is this possible at all?

Sebastian February 15, 2020 at 8:57 am

Hey Dean,

This is possible with MT. That’s what the Event target field is for. Unfortunately your video had no sound, so I can’t offer advice specific to your use case yet.

Thanks,
Sebastian

deanphillips1991 February 15, 2020 at 12:11 pm

Opps. Take 2: https://www.loom.com/share/8f8dd1fe133c4a6db5d37d0c66bd3107

Sebastian February 17, 2020 at 10:35 am

Hey Dean,

I’m still a bit unsure about the effect you are trying to create. How does the button relate to the paragraphs?

Do you want the paragraphs to animate into view when the button is visible? Won’t they be mostly out of view at that point?

Or do you want the button to animate in response to the paragraphs doing something?

I wonder if you might be getting the selector CSS code and Event target CSS code back to front… In which case you could try switching them. But I’m still a bit confused about your ultimate goal at this stage 🙂

You must login or register to reply to this topic.