Scrolling through timeline is jumping when using Bulma

[dbudwin]

To start, I believe this is a different Bulma issue than the one highlighted in issue #56 (which doesn't seem to be a problem for me).

Issue

While scrolling through the timeline, when I get to the start of a new VerticalTimelineElement, it will force the page to scroll further to fully accommodate showing the next VerticalTimelineElement, making the scrolling jump. I believe my use of Bulma is interfering with the timeline since removing my Bulma import resolves the issue.

I verified this issue occurs in both Firefox and Chrome.

Reproduce

1. Pull down https://github.com/dbudwin/BudwinWebsite/tree/TimelineJumpiness
2. Run npm install
3. Run npm run dev
4. Open the dist/index.html file
5. Scroll towards the bottom and notice the jumpiness
6. Comment out @import "bulma"; in index.scss, then reload page, notice how it scrolls smoothly

Expected Behavior

I would like to be able to use Bulma, and have smooth scrolling when scrolling through my timeline.

Notes

I changed my installed version of Bulma from 0.9.1 down to 0.8.0 and then to 0.7.5 to see if that would resolve the issue, but no luck.

P.S., this is a really cool package, and it's been fun to use so far 👍

[stephane-monnot]

Thank you for your report.

I think I will change the classname is-hidden because is too common name.

I created a PR. I just added :

.vertical-timeline--animate .vertical-timeline-element-icon.is-hidden,
.vertical-timeline--animate .vertical-timeline-element-content.is-hidden {
    display: block !important;
}

[dbudwin]

Thank you @stephane-monnot. I can confirm that does resolve my issue! Should I anticipate a change like this making it into this project's codebase in the future?

[stephane-monnot]

I think we need to rename the class is-hidden to vertical-timeline-is-hidden. If I have time, I will publish a fix in the next release.