How do you execute external javascript within builder and preview?

How To
1

I use waypoints.js to achieve greater control on entry and exit custom css animations. However, the builder and preview don’t allow these to be seen in real time. Is there a way to execute an external js library or other custom js from within the builder? I can only see the results if I load the page in another tab and manually refresh. Currently I’m enqueueing both Waypoints and my own custom js via the functions file.

For example: I have an image set to transition from 0 to 1 as the image enters the viewport. The builder will not execute the js and css to transition the image to opacity:1. It remains 0 and unseen in the builder.

Thanks for any help or insight!

2

Hi Franklin,

Try wrapping your enqueue code in this if conditional:

if ( ! bricks_is_builder_main() ) {
}
3

Thanks for the reply. I forgot the default check is in there. I moved the wp_enqueue_script out of the default if statement. The external JS code now shows in the inspector, but it’s still not firing.

I also converted everything to vanilla JS and am using the no framework version of waypoints.js.

It’s as if the builder prevents the custom JS to fire. I’m receiving no console errors.