Docs

[smartsimulation]

Hi,

I would like to add a script for scroll-controlled animations such as seen here: https://ihatetomatoes.net/demos/one-page-scroll-animations/

Would just like to have some pointers on whether this type of script is possible to integrate within X theme. It is composed of multiple js scripts with their own folder structure.

And then the on-page integration, I am in doubt whether this is done via code snippet or raw content?

Would appreciate some pointers.

Many thanks,

[Rue Nel]

Hello There,

Thanks for writing in! Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file so that you can add a custom JS to the site.

// Add custom JS scripts
// =============================================================================

function load_custom_js() {
  wp_enqueue_style( 'custom-js', 'get_template_directory_uri() . '/custom-js.css', array(), );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
// =============================================================================

To know more how you properly load custom js, please check the codex: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Hope this helps.

[smartsimulation]

thank you! will check it out.

[Jade]

You’re most welcome.

[smartsimulation]

actually, the above code causes an error. the whole site goes blank…

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Add custom JS scripts
// =============================================================================

function load_custom_js() {
  wp_enqueue_style( 'custom-js', 'get_template_directory_uri() . '/custom-js.css', array(), );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
// =============================================================================

[Christopher]

Hi there,

Please add JS file URL instead of /custom-js.css.

e.g: custom-js-folder/custom-js-file.js

Hope it helps.

[smartsimulation]

Yes, I see that now (I was taking your example code too literally). Thanks.

[Christopher]

You’re welcome.

[smartsimulation]

hmmm. still having problems. maybe I’m not understanding the relative URL scoping from the child theme’s functions php.

I have a js script at child theme’s root level (where functions.php is) and then:

function load_custom_js() {
  wp_enqueue_style( 'custom-js', 'get_template_directory_uri() . '/scrollissimo.js', array(), );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
// =============================================================================

This causes an error.

[Thai]

Hi There,

Please try with this code instead:

function load_custom_js() {
  wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/scrollissimo.js' );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

Hope it helps 🙂

[smartsimulation]

that cleared the error! thanks! Am I right in thinking that if I use external js scripts like greensock tweening js which are on another server, I will need to copy them locally and use the same method as above? And do I use a load_custom_js() function for each and every one of them?

[Thai]

Hi There,

And do I use a load_custom_js() function for each and every one of them?

You don’t need to repeat adding the function load_custom_js(), please try with this code:

function load_custom_js() {
	wp_enqueue_script( 'TweenMax', '//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js' );
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/scrollissimo.js' );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

Hope it helps 🙂

[smartsimulation]

beautiful, thanks.

[Thai]

Glad we were able to help 🙂

If you need anything else, please let us know.

[Author]

Posts