Trigger animation only once

[ghost]

Hi,

How do I make sure the animation is not triggered every time I scroll up and down?

I want to show only once when in view. I am using the example provided.

I checked you resume on github, it doesn't have any explicit code to achieve this, but still the timeline elements animations are triggered only once.

[ghost]

@stephane-monnot Hey, please provide a solution. Is this is an expected behaviour?

[payapula]

Hi @crushy26

I too checked on the code to achieve what you are expecting. Sadly, haven't yet landed on one.

However as you mentioned, resume on github does this, because it is using old version of react-vertical-timeline (v2.2.0 if I remember correctly).

In that version, this package was dependent on react-visibility-sensor and they migrated to react-intersection-observer lately.

Hope it helps!

[ghost]

Hi @payapula,

Thank you for your reply.

Is there any issue with the previous implementation using visibility sensor? Why was the migration done exactly?

Should I be downgrading and using it then?

[payapula]

Hi @crushy26

I am not sure if it caused any issues, however the reason for change is mentioned in this issue - #63 and corresponding PR - #67

Sure you can downgrade and give it a shot. I guess there should not be any problem.

[ghost]

Hi @payapula

So far everything is working as expected. Thank you.

[parvathirajan]

So is that solved with 2.2.0? @crushy26

[ghost]

Yes it was solved with downgrade

On Sun, Oct 17, 2021, 12:12 AM Parvathirajan Natarajan < @.***> wrote:

So is that solved with 2.2.0? @crushy26 https://github.com/crushy26

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/stephane-monnot/react-vertical-timeline/issues/107#issuecomment-944979837, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI36LMK2DOSYCQRNNXKQVLTUHHBPXANCNFSM43D7EQIQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[parvathirajan]

Yes it was solved with downgrade

On Sun, Oct 17, 2021, 12:12 AM Parvathirajan Natarajan < @.***> wrote:

So is that solved with 2.2.0? @crushy26 https://github.com/crushy26

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/stephane-monnot/react-vertical-timeline/issues/107#issuecomment-944979837, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI36LMK2DOSYCQRNNXKQVLTUHHBPXANCNFSM43D7EQIQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

I've one more issue, when I'm using in the screen in mobile it's shaking. I saw the same in issue #24 but none of them worked for me.

Thnks in Advance.

[stephane-monnot]

Can you send an example please ?

[parvathirajan]

@stephane-monnot thanks for your reply.

Here I've attached the small portion of the screen.

Please don't mind with the content (dummy) and your footer replica. 😀 I'm new to react so I'm learning.

https://user-images.githubusercontent.com/39371408/138794317-7083e695-b89f-42e7-8df3-2da7c2c89002.mp4

[stephane-monnot]

Can you try to wrap the VerticalTimeline component with a div with

  overflow: hidden;
  and max-width: 100vw;

or something like this ?

Ahah, no problem, just don't copy my name :joy:

[parvathirajan]

Hi.. Thank you so much Stephane. 🎉 That's really perfect fix. 😀 Sorry for the delayed response.

Sure I'll keep that in mind. Will replace my name everywhere 😹