Comments (6)
Hi Anshul!
Thanks for the question! Not sure I'm 100% understood you. You are using custom shapes
and want to animate them? Or you are using motion path
for shapes? A simple code snippet would help a lot. Cheers!
from mojs.
Give me just another day... I'll upload a code snippet soon!
from mojs.
sure, take your time :)
from mojs.
Take the following code for example... It's from the tutorials of mojs itself :
class Heart extends mojs.CustomShape {
getShape () {
return '<path d="M79.8226133,31.1716767 C71.2668462,22.7128894 57.4418472,22.7128894 48.8860801,31.1716767 L45.1254217,34.910784 C43.9939916,36.0098876 42.1837033,36.0206631 41.0522732,34.889233 L41.0522732,34.889233 L37.3023903,31.1716767 C28.7789498,22.7128894 14.9323997,22.7128894 6.40895921,31.1716767 C-2.13603238,39.6520152 -2.13603238,53.3800345 6.40895921,61.8280463 L25.686374,80.9653793 C25.686374,80.9761548 25.6971496,80.9761548 25.6971496,80.9869304 L37.2916148,92.4844159 C40.4919458,95.6739714 45.6857491,95.6739714 48.8860801,92.4844159 L60.4913209,80.9869304 C60.4913209,80.9869304 60.4913209,80.9761548 60.5020964,80.9761548 L79.8226133,61.8280463 C88.3352783,53.3800345 88.3352783,39.6520152 79.8226133,31.1716767 L79.8226133,31.1716767 Z"></path>' +
'<path stroke="#50E3C2" d="M87.2293862,20.3305554 C81.6681375,14.8323436 72.6818882,14.8323436 67.1206395,20.3305554 L64.6762116,22.7609751 C63.940782,23.4753925 62.7640947,23.4823966 62.0286651,22.746967 L62.0286651,22.746967 L59.5912412,20.3305554 C54.0510049,14.8323436 45.0507473,14.8323436 39.510511,20.3305554 C33.9562665,25.8427754 33.9562665,34.7659879 39.510511,40.2571956 L52.0408306,52.6964621 C52.0408306,52.7034662 52.0478347,52.7034662 52.0478347,52.7104703 L59.5842371,60.1838358 C61.6644523,62.2570469 65.0404244,62.2570469 67.1206395,60.1838358 L74.6640461,52.7104703 C74.6640461,52.7104703 74.6640461,52.7034662 74.6710502,52.7034662 L87.2293862,40.2571956 C92.7626184,34.7659879 92.7626184,25.8427754 87.2293862,20.3305554 L87.2293862,20.3305554 Z"></path>' +
'<path d="M97.1269756,7.85484074 C93.2768804,4.04838642 87.0556308,4.04838642 83.2055356,7.85484074 L81.5132393,9.53743902 C81.0040958,10.0320356 80.1894661,10.0368846 79.6803225,9.52774105 L79.6803225,9.52774105 L77.9928752,7.85484074 C74.157327,4.04838642 67.9263795,4.04838642 64.0908312,7.85484074 C60.245585,11.670993 60.245585,17.8486017 64.0908312,21.6502071 L72.7656679,30.2620069 C72.7656679,30.2668559 72.7705169,30.2668559 72.7705169,30.2717049 L77.9880262,35.4455734 C79.4281752,36.8808733 81.7653866,36.8808733 83.2055356,35.4455734 L88.427894,30.2717049 C88.427894,30.2717049 88.427894,30.2668559 88.4327429,30.2668559 L97.1269756,21.6502071 C100.957675,17.8486017 100.957675,11.670993 97.1269756,7.85484074 L97.1269756,7.85484074 Z"></path>';
}
getLength () { return 200; } // optional
}
mojs.addShape( 'heart', Heart ); // passing name and Bubble class
/* USE CUSTOM SHAPE */
// now it is available on mojs.Shape constructor as usual
const heart = new mojs.Shape({
shape: 'heart',
fill: 'none',
stroke: { 'white' : 'deeppink' },
scale: { 0 : 1 },
strokeWidth: { 50 : 0 },
y: -20,
duration: 1000,
});
All I want is the three paths (in this case the three hearts) should be animated one at a time without chaining them with the then call... Is there a direct option for that?
from mojs.
Hi, Anshul! Thanks for the snippet!
So you have 3 shapes inside your module, and want to animate them one by one? It is not possible because for mojs
that's just a complex shape that consists of 3 <path>
elements.
If you want to animate one shape at time - you need to create 3 different modules with simple shapes, something like that: codepen (click on body to see the animation). You can even make it more concise with Stagger
module: codepen.
Hope it helps!
from mojs.
Hello,
Thanks for your reply... That closes the issue then 😄
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.