start: 'manual' not working for 'scenario' type

[sbastias]

Thanks for the library!

I've got a cool animation going with scenario, but if i try to change start to 'manual' and then call .play(), the callback is called immediately, and the animation doesn't start.

vivusLogo = new Vivus('logo', {start: 'manual', type: 'scenario', file: 'logo-wordmark3.svg?'+Math.random()})

vivusLogo.play(0.5, function(){ console.log('logo completed') })

The timing directives are explicit in my svg file, and it works with inViewport and autostart.

[maxwellito]

Hi there,
Can you please provide me your SVG, I would like to have a look to have a better understanding. Thanks :)

[sbastias]

Sure, it's attached

…

On Mar 5, 2017 3:41 AM, "maxwellito" ***@***.***> wrote: Hi there, Can you please provide me your SVG, I would like to have a look to have a better understanding. Thanks :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9ei6YWGaxkmBPeoarp8jbNGRbNQ4Olks5rinVUgaJpZM4MTSJs> .

[sbastias]

I just realized that's the original SVG without the timing options. You can find the edited SVG here: http://remed.io/remedio/logo-wordmark3.svg THANK YOU! On Mar 5, 2017 1:41 PM, "Sergio Bastias" <sergio@dishproductions.com> wrote: Sure, it's attached

…

On Mar 5, 2017 3:41 AM, "maxwellito" ***@***.***> wrote: Hi there, Can you please provide me your SVG, I would like to have a look to have a better understanding. Thanks :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9ei6YWGaxkmBPeoarp8jbNGRbNQ4Olks5rinVUgaJpZM4MTSJs> .

[maxwellito]

You're welcome! :-)
That was an easy one ;-)

[sbastias]

Sorry - what was the solution? On Mar 5, 2017 2:16 PM, "maxwellito" <notifications@github.com> wrote: You're welcome! :-) That was an easy one ;-) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9eiwMGJpUPvUkTXa5LWe54mhJuYliuks5riwnsgaJpZM4MTSJs> .

[maxwellito]

Sorry I thought you were saying you were using the wrong file in your code. My bad :-S
I'm looking at it, I'll be back soon

[maxwellito]

I didn't realise you don't wait for the SVG to be loaded to start to play it. When the dynamic load is used (via the property file), the callback onReady must be used.

vivusLogo = new Vivus('logo', {
	start: 'manual',
	type: 'scenario',
	file: 'logo-wordmark3.svg?'+Math.random(),
	onReady: function () {
		// Now I'm ready :) Let's play!
		vivusLogo.play(0.5, function(){ console.log('logo completed') })
	}
})

// Do not trigger it here, the SVG is not ready
// vivusLogo.play(0.5, function(){ console.log('logo completed') })

http://maxwellito.github.io/drafts/vivus-issue-148/

[sbastias]

Sweet. I'll try that now and confirm....

…

On Mar 5, 2017 2:34 PM, "maxwellito" ***@***.***> wrote: I didn't realise you don't wait for the SVG to be loaded to start to play it. When the dynamic load is used (via the property file), the callback onReady must be used. vivusLogo = new Vivus('logo', { start: 'manual', type: 'scenario', file: 'logo-wordmark3.svg?'+Math.random(), onReady: function () { // Now I'm ready :) Let's play! vivusLogo.play(0.5, function(){ console.log('logo completed') }) } }) // Do not trigger it here, the SVG is not ready// vivusLogo.play(0.5, function(){ console.log('logo completed') }) http://maxwellito.github.io/drafts/vivus-issue-148/ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9ei09PGg50az7RB5lxd7UmzjxFoHySks5riw4pgaJpZM4MTSJs> .

[sbastias]

Ok, it seems to work.... but how can I start 'manual-'ly outside of the onReady function? If I .play() in the onReady, its essentially like autostart.... On Sun, Mar 5, 2017 at 2:35 PM, Sergio Bastias <sergio@dishproductions.com> wrote:

…

Sweet. I'll try that now and confirm.... On Mar 5, 2017 2:34 PM, "maxwellito" ***@***.***> wrote: > I didn't realise you don't wait for the SVG to be loaded to start to play > it. When the dynamic load is used (via the property file), the callback > onReady must be used. > > vivusLogo = new Vivus('logo', { > start: 'manual', > type: 'scenario', > file: 'logo-wordmark3.svg?'+Math.random(), > onReady: function () { > // Now I'm ready :) Let's play! > vivusLogo.play(0.5, function(){ console.log('logo completed') }) > } > }) > // Do not trigger it here, the SVG is not ready// vivusLogo.play(0.5, function(){ console.log('logo completed') }) > > http://maxwellito.github.io/drafts/vivus-issue-148/ > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#148 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AA9ei09PGg50az7RB5lxd7UmzjxFoHySks5riw4pgaJpZM4MTSJs> > . >

[maxwellito]

Yup :)
Depends what would be for you the trigger of the animation?

[sbastias]

Ok, here's my use case.

On loading my SPA, I call:

window.vivusLogo = new Vivus('logo', {start: 'manual', type: 'scenario', file: 'logo-wordmark3.svg?'+Math.random(), onReady: function(){
        vivusLogo.reset().stop()
      }})

...and then later in my application logic:

window.vivusLogo.play(function(){ console.log('logo completed') })

But when i call .play(), the callback runs immediately and animation doesn't start. (Same problem when i don't include the .reset().stop())

[maxwellito]

var autostart = false,
    vivusLogo = new Vivus('logo', {
      start: 'manual',
      type: 'scenario',
      file: 'logo-wordmark3.svg?'+Math.random(),
      onReady: function () {
        // Now I'm ready :) Let's play!
        if (autostart) startAnimation()
      }
    })

function startAnimation () {
  if (vivusLogo.isReady) {
    vivusLogo.play(0.5, function(){ console.log('logo completed') })
  }
  else {
    autostart = true;
  }
}

Then call startAnimation() when you need.

[sbastias]

Perfect! It's working.

I'm not sure I understand the logic? When I call startAnimation, autostart is set to TRUE... how does the onReady function get called again? Just out of curiousity.

[maxwellito]

Hehe :)
Sorry for not leaving more details, here is the story.

1. The vivus object is set up. This one start to load the SVG

1st scenario:

2. The SVG is loaded, then vivus trigger the onReady callback. But because autostart variable is not true.. nothing happens.
3. [At some point] your code trigger startAnimation(), this one will check if the vivus instance is ready (which is the case) so it starts playing it.

2nd scenario:

2. Your code trigger startAnimation(), this one will check if the vivus instance is ready (which is NOT the case) so it only switch the autostart variable to true (as a marker).
3. The SVG is loaded, then vivus trigger the onReady callback. This time, the autostart variable is true, so it trigger startAnimation(). And this time, the vivus instance is ready so it play the animation.

The reason I use the same function (on the onReady and manually) is because it will avoid redefining the setting of the play. It's at only one place.

I hope this explanation helps :-)

[sbastias]

I think so. I didn't know that the SVG triggered onReady as well as the .play() function. Amazing, thanks!

…

On Sun, Mar 5, 2017 at 3:07 PM, maxwellito ***@***.***> wrote: Hehe :) Sorry for not leaving more details, here is the story. 1. The vivus object is set up. This one start to load the SVG *1st scenario*: 1. The SVG is loaded, then vivus trigger the onReady callback. But because autostart variable is not true.. nothing happens. 2. [At some point] your code trigger startAnimation(), this one will check if the vivus instance is ready (which is the case) so it starts playing it. *2nd scenario*: 1. Your code trigger startAnimation(), this one will check if the vivus instance is ready (which is NOT the case) so it only switch the autostart variable to true (as a marker). 2. The SVG is loaded, then vivus trigger the onReady callback. This time, the autostart variable is true, so it trigger startAnimation(). And this time, the vivus instance is ready so it play the animation. The reason I use the same function (on the onReady and manually) is because it will avoid redefining the setting of the play. It's at only one place. I hope this explanation helps :-) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#148 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9ei7Glc-sBOxpTxlYAygocfdCR7Xreks5rixYGgaJpZM4MTSJs> .

[maxwellito]

Uhmmm... onReady and play are separate. It's only in our case that we manage to call play in the onReady if we need to.