Elements doesn't appear after route transition about vue-scroll-reveal

[tserkov]

Glad to hear!

[tserkov]

I created a test project (tserkov/sr-test) to try to reproduce, but I couldn't; navigating between routes triggers the scroll-reveal animation. Could you provide me with some code where the elements aren't appearing as expected?

[tserkov]

I just re-read your issue, and it actually sounds like the animation is triggering, but it's triggering simultaneously with vue-router's <transition>. If that's the case, you could try adding a delay, like this: v-scroll-reveal="{ delay: 250 }" or however long your router transition is in ms.

[cdmoro]

Yeah, it is exactly what I try to say... I'm not sure if the reveal is triggering along the vue-router transition, because the elements doesn't show up.
I thought the same solution, set a delay. But it's a liitle tricky. First of all, if I have a few transitions, with different delay, I have to add 250ms to every transition. And even more tricky, if I set "reset" to these transition, when I scroll up the transition will excecute 250ms later every time, when I only need that delay when the page loads...
It would be better, if it's possible, that the animations start after any parent transition, especially when there are a route-view transition...
Hope you can understand, i'm not english speaker...

[jlmakes]

I only need that delay when the page loads

@cdmoro that is possible with options.useDelay set to 'onload'

[cdmoro]

@jlmakes thanks but I need to use delays, what I don't want to do is have to add 250ms in every transition because of a parent transition.
Par example, I have a parent transition (router-view transition), witch finish in 250ms and, in the other hand, I have a few sequenced animations with v-scroll-reveal, each one with differents delay (first: 50, second: 100, third: 150...). If I use the @tserkov solution, I'm forced to add a delay of 250 in all of my animations, so, the first animation will be 250 + 50, the second 100 + 250, and the third 150 + 250... witch is a lot of time in my opinion...
And if I want to combine with the "reset" property, every time I scroll up, the first transition will appear in 300ms (250 + 50) instead 50ms...
I think that a better solution is that the directive knows when a parent transition finish... I have no idea if it's possible or not

[tserkov]

I've just pushed an update (1.0.5) that makes the options reactive.

So, once you've updated, you should be able to do something like the following:

<template>
  <section v-scroll-reveal.reset="scrollRevealOptions">
    ...
  </section>
</template>
<script>
  export default {
    data() {
      return {
        scrollRevealOptions: {
          delay: 250,
        },
      };
    },
    mounted() {
      setTimeout(() => {
        this.scrollRevealOptions.delay = 0;
      }, 250);
    },
  };
</script>

This has a component default of 250ms delay (change to match your router transition duration), then after that same amount of time sets the delay to 0, so further scrolling won't have that delay. mounted() will re-fire after each router transition. (I updated tserkov/sr-test to demonstrate this.

If you want tiered delays, you can do this:

<template>
  <section v-scroll-reveal.reset="{ delay: scrollRevealBaseDelay }">
    ...
  </section>
  <section v-scroll-reveal.reset="{ delay: scrollRevealBaseDelay * 2 }">
    ...
  </section>
</template>
<script>
  export default {
    data() {
      return {
        scrollRevealBaseDelay: 250,
      };
    },
    mounted() {
      setTimeout(() => {
        this.scrollRevealBaseDelay = 0;
      }, 250);
    },
  };
</script>

[cdmoro]

I thought that the options was already reactive, in fact, I use it like your first example. BTW, your second example is a nice workaround for what I need to do. Thanks! I think the ticket is closed 😃