Giter Site home page Giter Site logo

endless about vivus HOT 4 CLOSED

Spica2 avatar Spica2 commented on September 6, 2024
endless

from vivus.

Comments (4)

Spica2 avatar Spica2 commented on September 6, 2024

put after line 282 the callback this.callback(this);

then the callback is also fired at the end of rewind

from vivus.

maxwellito avatar maxwellito commented on September 6, 2024

Sorry about that, but you're right.
There's no callback when the animation is rewinded, only when it's drawn. I thought the callback would be useful only for when the SVG is drawn. But your point make sense.
I'll try to implement it for the next version, but I want to add a property on the object to check if the SVG is drawn or not (to help the callback). I'm also hesitating to add the callback as property in the option object.

Something like

new Vivus('logo', {}, function (myVivus) {
  myVivus.play(myVivus.isDrawn ? -1 : 1);
})

from vivus.

Spica2 avatar Spica2 commented on September 6, 2024

This would give you more controll. But depends on where you wanto go with vivus and how complex it should get.
Btw.: An option for rewinding from start to end instead from end to start could also be nice.
line 322

path.el.style.strokeDashoffset = Math.floor(path.length * (0 - progress)); 

vs

path.el.style.strokeDashoffset = Math.floor(path.length * (1 - progress));

from vivus.

maxwellito avatar maxwellito commented on September 6, 2024

Now the callback function is called at the end of each animation. And to know if the instance is at the start or end, just check the property currentFrame (Equal to 0: start, else: end).

from vivus.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.