Bar Animation effect calculation

[franticape]

Hi guys,

I’m having a hard time calculating the offset used for the “bar” element effect and i was wondering if you could help me out.

1. I’m not sure how is the offset calculated. is it from the parent container, the entire browser (including toolbars) or in any other way?

2. What method can i use to sync it so they start at the same exact offset but with just a bit of delay so it looks like the first bar is faster than the second which at the same time is faster than the third?

What i want to achieve is that as soon as a section of a page is visible, the animation would start and all 4 bars in it would start but with just a small delay between them.

I hope you can point me in the right direction.

[ruenel]

Hello @FranticApe,

Thanks for posting in!

1.) It is calculating based on the parent container. In my example below, it is the column width.

2.) To add some delay to a particular Statbar element, you can actually adjust the Transition delay in the Effects module which be found in the element settings. Please check out my video demonstration below:

Add effects to the Statbar element

Best Regards.

[franticape]

Ok, so the offset would be the same in all the bars since they are all in the same cointainer and what would change is the duration, correct?

[ruenel]

Hello @franticape,

Yes, that is correct. You will have to change the duration in each element settings.

Cheers.

[franticape]

Hm, i tried everything but i’m still not sure i’m doing it right.

You mention the bars will calculate based on the container, so in theory if i have 5 stacked bars, and the container gets to, say, 50% offset, ALL the bars would trigger (that’s what i understood from the statement) and by adding some duration, they would trigger at the same time BUT arrive at the end in different moments.

however that’s not the case, at least not on my end as you can see here: https://www.loom.com/share/c1edce84fc8045f4bede868c8112d03b

What am i doing wrong?

[ruenel]

Hello @franticape,

It seems that you are using the Scroll interaction effect which is not what I was showing you in my video. You only need to change the transition delay of the Effects module and not with the Scroll Interaction.

If you use the Scroll Interaction effect then the Statbar only gets triggered once you scroll the page which I think is happening on your site. Please update your WP credentials so that we can log in again and check your settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Cheers.