layer5 Animation vanishes on scrolling

Description

In this page, when we scroll through the page, the animation shows up for a second and then vanishes away.

Expected Behavior

We want the animation to load properly and not vanish away, when we scroll down the page.

Screenshots

https://github.com/user-attachments/assets/ef567bd3-e7a0-414a-91d7-e83f4e1e638c

Environment:

Host OS: MacOs
Browser: Google Chrome, Safari

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

📚 See contributing instructions.
🎨 Wireframes and designs for Layer5 site in Figma (open invite)
🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

Oct 07 '24 14:10 hargunkaur286

@hargunkaur286 let's make a call for Volunteers on today's call.

Oct 14 '24 08:10 vishalvivekm

can you please assign to me

Oct 14 '24 12:10 Aryam2121

@deepikaa0402 @Aryam2121 Thank you for sounding off. Do you mind telling if you have the repository setup?

Oct 14 '24 12:10 hargunkaur286

yes i have repository Setup and you assign to me please

Oct 14 '24 13:10 Aryam2121

Go ahead @Aryam2121 :)

Oct 14 '24 13:10 hargunkaur286

@Aryam2121 Please note that all issue-related discussions should be kept public and within this GitHub issue thread. You can also discuss them in:

#websites channel in Layer5's Slack community at https://slack.layer5.io.
Our discussion forum https://discuss.layer5.io/
Weekly website meetings on Mondays at meet.layer5.io

Before proceeding further, please:

Fork the repository and set up the project locally (it looks like you haven't forked the project yet)
Review our contributor handbook for guidelines on contributing and code of conduct.

Oct 22 '24 16:10 vishalvivekm

Hey @hargunkaur286, I would like to check this out.

Oct 22 '24 18:10 Anand-Theertha

why you unassign me

Oct 23 '24 15:10 Aryam2121

@Anand-Theertha any updates?

Nov 03 '24 09:11 sudhanshutech

I'm currently working on this issue, so I haven't been able to make much progress on this one. @sudhanshutech https://github.com/layer5io/layer5/issues/5908

Nov 03 '24 11:11 Anand-Theertha

oh okay. @MaryannGitonga would you like to give it a shot?

Nov 08 '24 21:11 sudhanshutech

@hargunkaur286, @sudhanshutech I came across this issue. here animation shows up for a second and then vanishes because the minimum value set for >= 2. {activeExampleIndex >= 2 ? "show " : "render "} due to this condition animation is not visible for 0 and 1. also when user scroll it up it won't visible but animation works.

Dec 15 '24 09:12 balagowda

@balagowda If you can fix this go on and raise a PR as I think nobody is working on this right now.

Dec 18 '24 18:12 Ajay-singh1

Thank you, @Ajay-singh1 👍

Dec 18 '24 19:12 leecalcote

@hargunkaur286 , @Ajay-singh1 this might look good?

https://github.com/user-attachments/assets/43a9a85f-d54a-40cd-aa4c-aeb93b56b399

Dec 21 '24 11:12 balagowda

@hargunkaur286 , @Ajay-singh1 this might look good?

Untitled.mov

Nice I loved it! Wait for others feedack.Kindly attach this movie with your PR.

Dec 21 '24 12:12 Ajay-singh1