Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to create sequence enter div animation one by one #84

Closed
myomyintaung1411 opened this issue Sep 27, 2022 · 1 comment
Closed

How to create sequence enter div animation one by one #84

myomyintaung1411 opened this issue Sep 27, 2022 · 1 comment
Labels
question Further information is requested

Comments

@myomyintaung1411
Copy link

No description provided.

@BobbieGoede BobbieGoede added the question Further information is requested label May 30, 2024
@BobbieGoede
Copy link
Collaborator

You can create a staggered div animation by adding delays to each div, here's an example:

<div>
    <img
      v-for="index in 5"
      :key="index"
      v-motion
      :initial="{ scale: 0, opacity: 0 }"
      :visible-once="{ scale: 1, opacity: 1 }"
      :delay="index * 200"
    />
</div>

Note the :delay="index * 200" which adds a longer delay for each following div, I've also created a demonstration here.

Closing this, let me know if you have any questions!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants