Keyframe animations

This topic contains 7 replies, has 2 voices, and was last updated by  Sebastian 5 months, 3 weeks ago.

Author Posts

deanphillips1991

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

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

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

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

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

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

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


Sebastian

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.