Jump to content
Search Community

Convert anime.js

DjKarimi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

1 hour ago, mikel said:

hi @kkarimi91@yahoo.com;

 

do you want such an effect:

 

See the Pen eKQRKM by mikeK (@mikeK) on CodePen

Happy masking and tweening ... Mikel

 

Hi thank you for answer me.

 

But I did not approve.
I know the programming code.
But this "anime.js" class is quick and easy.
For example, the :
 

var morphing = anime({
  targets: '#morphing .polymorph',
  points: [
    { value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});

 

There are 12 lines of code, and it's effortless and fast.
I want the GSAP admin to create a new class that creates an animation like "anime.js".
Because this code function is so beautiful, it's easy, it's great.

If I type "gsap" like this "anime.js", I might have 100 lines of code.

 

I  am gsap fan.
I like gsap .
I love gsap.

And a person insulted to "GSAP".
And that person is rival.


????

 

https://github.com/juliangarnier/anime/issues/231

 

Link to comment
Share on other sites

in addition to Mikel's excellent advice we also have MorphSVG which is the most elegant solution for any svg morphing.

You can morph a circle into a hippo then into a star with only 3 lines of code.


 

See the Pen rOjeRq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

although the main use of MorphSVG is to morph between shapes that have been drawn in a program like Sketch or Illustrator, you could do some pretty crazy things by dynamically generating paths with random points and morphing between them.

 

You can learn more about MorphSVG here: https://greensock.com/morphSVG

 

 

 

 

  • Like 2
Link to comment
Share on other sites

@DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them :)

 

While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: 

 

 

 

Here's the helper function : 

 

function multiTo(target, duration, vars) {
  var tl = new TimelineMax(vars),
      copy = {},
      reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1},
      val, i, p, d, v;
  //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline
  for (p in vars) {
    if (!reserved[p]) {
      copy[p] = vars[p];
    }
  }
  for (p in copy) {
    val = copy[p];
    if (val.push && val.length) {
      d = duration / val.length;
      for (i = 0; i < val.length; i++) {
        v = {ease:copy.ease};
        v[p] = val[i];
        tl.to(target, d, v, d * i);
      }
      delete copy[p];
    }
  }
  tl.to(target, duration, copy, 0);
  return tl;
}

 

And here's how the GSAP call would look:

 

var morphing = multiTo('#morphing .polymorph', 2, {
  attr: [
    { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },
    { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  ease: Power1.easeOut,
  repeat:-1
});

 

Basically it just interprets an array of values as if you want them equally spaced inside the timeline.

 

Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: 

 

 

Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. 

 

Anyway, is this what you were looking for? 

  • Like 6
Link to comment
Share on other sites

44 minutes ago, DjKarimi said:

But we need to code this development function and more possibilities and more options.

 

 

I didn't quite understand what you meant. There's something else you want? Can you give more details? That function should work for almost any value - just pass in an array of values. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...