Is there a way to keep Burst showing after complete? about mojs HOT 13 CLOSED

Hi @eybarta!

I have coded a small snippet for your project. This code need to be adapted to your needs. First, I have try to create your "arc curve" with only one burst staggered, but no way... that's why I moved to a similar code of my firework animation.

So, ripple is the number of total circles that will be painted before the star: to paint 5 "ripples", or "circles", you need to calculate steps between start (0%) and end (100%) of the animation. stage is when you reach a step: on each stage, you need to paint a ripple. The last stage need to paint a star instead of a ripple. I have made some randomization inside. And that's it!

This snippet renders:

As you can see, the curve isn't exactly what you was waiting for. To get a sweet "rounded curve", (I think) you need to build a motion path, and tune it to your needs. As there is no documentation that explained how to creates motion path, you need to read the coffee script source file at https://github.com/legomushroom/mojs/blob/master/js/motion-path.coffee. You will find some usefull codepen urls inside it. Good luck!

Hope this help! 😉

// defines the star shapes
class Star extends mojs.CustomShape {
  getShape() { return '<path d="M5.51132201,34.7776271 L33.703781,32.8220808 L44.4592855,6.74813038 C45.4370587,4.30369752 47.7185293,3 50,3 C52.2814707,3 54.5629413,4.30369752 55.5407145,6.74813038 L66.296219,32.8220808 L94.488678,34.7776271 C99.7034681,35.1035515 101.984939,41.7850013 97.910884,45.2072073 L75.9109883,63.1330483 L82.5924381,90.3477341 C83.407249,94.4217888 80.4739296,97.6810326 77.0517236,97.6810326 C76.0739505,97.6810326 74.9332151,97.3551083 73.955442,96.7032595 L49.8370378,81.8737002 L26.044558,96.7032595 C25.0667849,97.3551083 23.9260495,97.6810326 22.9482764,97.6810326 C19.3631082,97.6810326 16.2668266,94.4217888 17.4075619,90.3477341 L23.9260495,63.2960105 L2.08911601,45.2072073 C-1.98493875,41.7850013 0.296531918,35.1035515 5.51132201,34.7776271 Z" />'; }
  getLength() { return 200; }
}

// adds the class
mojs.addShape('star', Star);

// total count of ripples
let ripple = 5;

// total steps for painting ripples (including the last stage)
let step = 100 / (ripple + 1);

// the tween starts at stage 1
let stage = 1;

// trajectory
let path = new mojs.ShapeSwirl({
  shape: 'circle',
  fill: '#000',
  x: 'rand(-50, 50)',
  y: { 0 : 'rand(-100, -200)' },
  radius: 2,
  swirlSize: 3,
  swirlFrequency: 10,
  degreeShift: 'rand(-45, 45)',
  direction: -1,
  scale: 1,
  duration: 1000,
  easing: mojs.easing.sin.in,
  isForce3d: true,
  onProgress: function(p) {

    // % of tween progression
    let progress = Math.round(p*100);

    // steps (interval min and max between ripples, with a little tolerance)
    let min = step * stage - 2;
    let max = step * stage + 2;

    // throttling (creates a ripple effect each steps)
    if (progress > min && progress < max) {

      // do not paint the last ripple (paint the star instead)
      if (stage == (ripple + 1)) {
        return;
      }

      // ripple effect
      new mojs.Shape({
        x: path._props.x,
        y: path._props.y,
        fill: 'none',
        stroke: '#ffc97c',
        radius: { 0 : 2 * stage },
        duration: 500,
        delay: 'stagger(10, 250)',
        isShowEnd: true,
        isForce3d: true,
      }).play();

      // prepares the next ripple to be paint
      stage++;
    }
  },
  onComplete: function() {

    // gets the x & y coordinates from the last path point
    let x = parseInt(path._props.x.replace('px', ''));
    let y = parseInt(path._props.y.replace('px', ''));

    // creates a star at the end of the path (based on coordinates)
    let star = new mojs.Shape({
      shape: 'star',
      x: x,
      y: y,
      fill: '#fc6e5e',
      scale: { 0 : 1.2 },
      easing: 'elastic.out',
      duration: 1600,
      radius: 20,
      angle: { 0 : 'rand(-45, 45)' }
    }).play();

    // generates and play the path tween every second (just for the demo)
    setTimeout(function() {
      stage = 1;
      path.generate().play();
    }, 1000);
  }
});

// plays the path
path.play();

from mojs.

Yes, isShowEnd will do the trick : http://codepen.io/sol0mka/pen/pbdayQ

from mojs.

Hi @eybarta!

Its because you are using the last version of mojs.

By default, childrens on the Burst module are using the scale property with {1 : 0} to hide the element at the end of the animation. So you just need to set this property to 1, or {1 : 0.5}, to let the element displayed. Here is an example:

children: {
  scale: 1,
  fill: 'none',
  stroke: 'red',
  ...
}

Hope this help 😉

from mojs.

No problem mate 😉 !

The demo in under MIT License, so you need to include a copy of the license and copyright notice with your code in case you are reusing part of the project. Repository and source code can be found here: https://github.com/studiomotio/happy-2018.

Happy coding!

from mojs.

awesome!

I'll try to learn from the code and take a shot coding myself, if I end up using
some of your code, I'll be sure to give credit!

thx again :) :)

from mojs.

Hey 😃 !

I need to test some code from scratch on my dev environment to replicate what you are trying to do. I will give a feedback as soon as possible with a good starting point for your animation.

from mojs.

@xavierfoucrier You sir have made my day ;) appreciate your time
and will let you know how it turned out.

thx a million!

from mojs.

Hello, thanks for your work..!

I'm trying to use isShowEnd:true in codepen with no success.. please le me know what I'm doing wrong: https://codepen.io/webkit_il/pen/NXLogY

thx :)

from mojs.

@xavierfoucrier awesome thx!! it worked.

As long as I have you on the line ;)..
is there a way to make {scale: 'rand(0.3,0.7)'} into something like 'increment(0.3,1)' ?

what I'm trying to accomplish:
I want the circles to go from small to big and have a star at the end, behave like fireworks.

is there a way to do this just with bursts? please point me in the right direction.. appreciate
all your help and thx for a great plugin.

from mojs.

Hey @eybarta!

Yeah, Stagger Strings will do the trick.
Full documentation just here:
https://github.com/legomushroom/mojs/blob/master/api/syntax/stagger.md
https://github.com/legomushroom/mojs/blob/master/api/stagger.md

In your children object, you can make the radius property increments automatically on each stage of the burst animation, like this:

children: {
  scale: 1,
  radius: 'stagger(10, -1)',
  ...
}

This will paint a circle with a radius of 10, and then, decrement the radius by 1 on each stage. The result will produce circles with radius of 10, 9, 8, 7, etc..

Hope this sounds clear to you 😉

As you are talking about fireworks, I made an experimental demo with mojs for the new year, if you are searching for fireworks inspiration: Happy 2018 — from Studio MOTIO

from mojs.

@xavierfoucrier You rock man! thx for saving me the time to find this..

I checked out your demo, looks amazing, definitely the direction I'm going for, thx.
I imagine the source code for it is not shared ;) ?

Anyways, you helped me greatly.. thx again.

from mojs.

@xavierfoucrier
Hey man!
thx for all your help up to now, I'm still trying to create
the artificial fireworks animation with the stars like in the
screenshot above.. we're not going for an exact natural fw effect
like you have in your 2018 demo, but just a very simple eased
effect pretty similar to what I made here:
https://codepen.io/webkit_il/pen/NXLogY

the issues I'm stuck with:

• Can't figure out how to make the star always appear where the
  next CIRCLE would appear, basically the last part of the chain..? right
  now as you can see I'm manually calculating it, from the offset of the last circle
  but if I change the angle of the burst, it won't look good.

• I need to have 4 of these trajectories with the star at the end, that should look
  close to the screenshot above.. i wanted to randomize a bit the trajectories
  but playing with degree, radius, direction and angle of the burst all gave unwanted
  results.. I want the starting point of the trajectories to be almost similar but the path
  going in slightly different directions.

If you could help me understand the right way to go about doing this that would be AWESOME!

thanks alot.

from mojs.

Working on it.

from mojs.