Adding Animations
Question
hi @artf I want to include animation on all the blocks Here is some snippet of code but it's not working Could you please help me here
const def = editor.Components.getType("default");
editor.Components.addType("default", {
model:{
defaults:{
traits:[
...def.model.prototype.defaults.traits,
...[{
type: "select",
label: "Animation",
name: 'animation',
options:[
{value: 'bounce',name: 'Bounce'},
//Other animations...
]
}, {
changeProp: 1,
type: "number",
label: "Duration(s)",
name: "duration",
}, {
changeProp: 1,
type: "number",
label: "Delay(s)",
name: "delay",
}]
]
},
init() {
this.on('change:animation', this.onAnimationChange);
this.onAnimationChange();
this.on("change:duration", this.onDurationChange);
this.onDurationChange();
this.on("change:delay", this.onDelayChange);
this.onDelayChange();
},
onAnimationChange() {
const animation = this.get('animation')
this.addAttributes({ 'data-anim-type': animation });
// this.addClass({ animation });
},
onDurationChange() {
const duration = this.get("duration");
this.addStyle({ "animation-duration": duration });
},
onDelayChange() {
const delay = this.get("delay");
this.addStyle({ "animation-delay": delay });
},
}
});
Thanks
Answers (3)
You forgot changeProp: 1 on the animation trait
@artf Without giving the animation name it's not working. Should i need to add css rule for this Any suggestion.Please?
Thanks for reporting this, @Abhisheknanda1344463.
Thanks for sharing your report about Adding Animations. To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- Steps to reproduce the issue
What helps most:
- Minimal code example (not your full project)
- Screen recording or screenshot showing the issue
- Expected vs actual behavior clearly stated
- GrapesJS configuration you're using
With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3446
Cannot Store Data Unexpected token '-'
Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: const editor = grapesj...
Issue #3225
How to Update Style from checkbox Trait?
Hi @artf I am trying to update the style using the checkbox trait but it's not calling the function. Here is the code I really appreciate a...
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
Issue #3137
When I select an particular element I'm not getting its styles. This issue happens only with some elements.
Not getting styles of the selected element Here is my code, const model = editor.StyleManager.getModelToStyle(component); let styleObject =...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.