Hello again!

Does the the Beans loads page content affect the way scrollspy works? I have elements animating in but the uk-scrollspy-init-inview and uk-scrollspy-inview don't seem to be working...all elements animate in on page load and not when they first appear in the viewport.

Any help much appreciated πŸ™‚

Hey Mike,

The way the HTML is loaded is exactly the same as if it was static HTML so it wouldn't have any effect on that. It is difficult to say what could be incorrect on your page without seeing the code but the first thing which comes to my mind would be to add repeat: true to your data-uk-scrollspy attribute.

If that doesn't work, I would advise to share your code used to add the scrollspy.


Ok cool I wasn't sure if there was an issue with my beans code or UIKit code and didn't want to bother you with a UIKit issue...but here is the element anyways:

<h1 class="uk-animation-slide-left uk-scrollspy-init-inview uk-scrollspy-inview" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:200, repeat: true}">
<?php echo esc_html( beans_get_post_meta( "cta_block_heading", "Heading" ) ) ?>

so it works but just doesn't repeat or activate when in viewport.


You shouldn't add these classes in your HTML, they are added/removed by UIkit based on what is in the view.

Hey Mike,

Just wanted to follow up and make sure removing the classes uk-scrollspy-init-inview uk-scrollspy-inview from you HTML worked?


Hey Thierry sorry for no reply my side, i put the animation effects on the backburner while building out the rest of the site. While typing out the explanation of my problem now i realised my mistake...i was enqueing the scrollspy incorreclty:

beans_uikit_enqueue_components( array( 'scrollspy' ), 'add-ons' );

instead of...

beans_uikit_enqueue_components( array( 'scrollspy' ) );

so yeah i fixed this issue thanks!

Hope all is well yourside. I got 2 Beans sites in developement at the moment and going well. Will send you links as soon as they are live



Great stuff, looking forward to seeing your Beans production πŸ˜‰

Write a reply

Login or register to write a reply, it's free!