Comments (9)
Hi Steven! Thanks a lot! Your demo looks awesome! Sorry for delayed reply.
Adding/removing elements to/from DOM is bad for performance since every DOM change will trigger the chain of browser reorganizations and cleanups. So every time you will remove an element from the DOM it will trigger reflow
/repaint
events which are bad for your animation. Also deleted elements have to be garbage collected
just like any other objects are, which will block the main thread for a while and will make your animation jabber.
So mojs
modules were designed to make as little DOM changes as possible. The best way to deal with the issue is to create modules once at page initialization and then reuse exact same modules on subsequent calls. For that, you have the tune
public method that tunes options of module for ones that work for your current call:
const burst = new mojs.Burst({
// options
});
$(document.body).on('click', '.some-card', function (e) {
// reuse same burst by just tuning `x`/`y` of the burst to the current element's coordinates
burst
.tune({ x: e.pageX, y: e.pageY })
// replay it after tune
.replay()
});
Of course, since user can click on your cards frequently, with small delay, and you animations can overlap, you want to create a pool of bursts and increment pointer to current element in that pool on each click event, probably 5 would be enough to cover all your cards: codepen example
I hope it sets more light over the problem. Please let me know if you have any further difficulties or if you have any thoughts.
P.S.
If you do want to remove the element from DOM after its done with it's job - just use .el
property of the module. Callbacks are bound to module that they are called on and each module has .el
property that is the root of the markup. So just do:
onPlaybackComplete () {
$(this.el).remove();
}
Of course, I won't suggest to proceed with this approach since it will cause DOM thrashing and will bother GC a lot.
Cheers
from mojs.
@darrentorpey thanks for the feedback. Yeah, we definitely need the faq
section and better docs. I'm working on the stable release at the moment and plan to do the better job with the docs and even to create a full-length mojs
video course. The main issue is that I have limited capacity and the docs always seemed to be low priority (since the API can change) but it will change with the stable release. If you want/can help with the docs, shoot me a message I will highly appreciate your help.
from mojs.
Happy to help, please let me know if something you'll stumble upon something! 🎉
from mojs.
This was great to know, @legomushroom. Have you considered writing out an FAQ for something like this (or build one as we go along)? I'm sure more than a few of us will be creating thousands of animations for art projects and can always benefit from advice like this on how to manage performance.
from mojs.
Thanks, @xavierfoucrier for the quick response and making this clear.
from mojs.
hey Oleg,
Thanks for the good words, and for the detailed reply!
Ah I see, I had a feeling there was a good reason for keeping things in the DOM. That makes a lot of sense, re:performance. For our prototyping, the $(this.el).remove()
is perfect for us, and we'll definitely continue exploring reuse as our project matures. Thanks for the Codepen + code examples, really helpful in understanding.
Talk soon,
~s
from mojs.
Pure javascript implementation
onComplete: function () {this.el.parentNode.removeChild(this.el);} }
from mojs.
React js Component for context
import mojs from '@mojs/core';
class Heart extends mojs.CustomShape {}
Heart.prototype.getShape = () => {
return '<path d="M73.6170213,0 C64.4680851,0 56.5957447,5.53191489 51.7021277,13.8297872 C50.8510638,15.3191489 48.9361702,15.3191489 48.0851064,13.8297872 C43.4042553,5.53191489 35.3191489,0 26.1702128,0 C11.9148936,0 0,14.0425532 0,31.2765957 C0,48.0851064 14.893617,77.8723404 47.6595745,99.3617021 C49.1489362,100.212766 50.8510638,100.212766 52.1276596,99.3617021 C83.8297872,78.5106383 99.787234,48.2978723 99.787234,31.2765957 C100,14.0425532 88.0851064,0 73.6170213,0 L73.6170213,0 Z"></path>';
};
mojs.addShape('heart', Heart);
const CIRCLE_RADIUS = 32;
const RADIUS = 48;
const circle = new mojs.Shape({
left: 0,
top: 0,
stroke: '#E5214A',
strokeWidth: { [2 * CIRCLE_RADIUS]: 0 },
fill: 'none',
scale: { 0: 1 },
radius: CIRCLE_RADIUS,
duration: 400,
easing: 'cubic.out',
});
const burst = new mojs.Burst({
left: 0,
top: 0,
radius: { 4: RADIUS },
angle: 45,
count: 14,
timeline: { delay: 300 },
children: {
radius: 2.5,
fill: '#E5214A',
scale: { 1: 0, easing: 'quad.in' },
pathScale: [0.8, null],
degreeShift: [13, null],
duration: [500, 700],
easing: 'quint.out',
},
});
const heart = new mojs.Shape({
left: 0,
top: 2,
shape: 'heart',
fill: '#E5214A',
scale: { 0: 2 },
easing: 'elastic.out',
duration: 1600,
delay: 300,
radius: 11,
});
const showHeartWhereClicked = (e) => {
const x = e.clientX;
const y = e.clientY;
const cords = { x, y };
burst.tune(cords).replay();
circle.tune(cords).replay();
heart.tune(cords).replay();
};
export {
showHeartWhereClicked
};
In the current code, I can show an animation but the heart remains on the screen even though the animation has ended, is there a fix for this?
Note: when the animation is fired again the heart is deleted and new animation is played, this is not an issue, the issue is again the next heart will remain on the screen.
from mojs.
Hi @rajchandra3,
As explained by @almgwary, you need to remove it by yourself as it is not implemented yet in the library.
Use:
const heart = new mojs.Shape({
left: 0,
top: 2,
shape: 'heart',
fill: '#E5214A',
scale: { 0: 2 },
easing: 'elastic.out',
duration: 1600,
delay: 300,
radius: 11,
onComplete: function() {
this.el.parentNode.removeChild(this.el);
}
});
😉
from mojs.
Related Issues (20)
- GPR publication workflow failure HOT 2
- Not working on IE HOT 2
- then() method is firing error "TypeError: Cannot read property '4' of null" HOT 9
- 可以为mojs添加一个removeShape的功能吗 HOT 3
- Improve the way custom shapes are instantiated HOT 4
- Unable to import in "modules" mode HOT 3
- The file imported by cdn reports an error(a native html page) HOT 2
- Como corrigir o erro/How to fix the error: Uncaught TypeError: Cannot read properties of null (reading 'appendChild') HOT 1
- Offset on click animations HOT 3
- Frame-by-frame animation HOT 6
- Independent delta not working in .then HOT 4
- Move Shape To Absolute Position HOT 1
- Document How to Add `pointer-events: none` To Shape/Timeline HOT 2
- @mojs/core not working with remix.run > ReferenceError: self is not defined HOT 1
- Mo.js support for typescript HOT 1
- Upgrade to NodeJS 20 HOT 5
- Showcase code is not working HOT 3
- The `dist` folder is missing in the npm package for `v1.7.0` HOT 1
- Tween has chance to be played 2 times rapidly in a timeline. HOT 3
- Path Easing Debugging
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mojs.