GSAP and Split Type in Wordpress

[creativo]

I am not sure what I am missing.

 

i think i have added all the required elements but the SplitText does not work. i don't know where to go from here.

 

in my  functions.php - I have added the following:

 

function theme_gsap_script() {
wp_enqueue_script( 'gsap-js', '/wp-content/plugins/gsap/gsap.min.js', array(), false, true );
wp_enqueue_script( 'SplitText', '/wp-content/plugins/gsap/SplitText.min.js', array(), false, true );
wp_enqueue_script( 'gsap-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

 

in my gsap-scripts.js- I have added the following:
 

const myText = new SplitType('#my-text')

        gsap.to('.char', {
            y: 0,
            stagger: 0.05,
            delay: 0.2,
            duration: .1
        })

 

 

on my page I added:

<h1 id="my-text">St. Elizabeths West Campus</h1>

 

 

[Trapti]

hey, 
The code is not correct. 

In gsap.to tween the target is ".char" class which is not being defined anywhere. If you want to define it, do this and use a class name. This class name will get applied to each character. 

 

const myText = new SplitType('#my-text', {type: "chars, words",charsClass: "yourCharClass"})

gsap.to(".yourCharClass", {
....
})

Or simply access each character by doing this. 

const myText = new SplitType('#my-text', {type: "chars, words"})
gsap.to(myText.chars, {
....
})

Please check documentation and code examples here. 

 

[creativo]

thank you so much

 

[GreenSock]

By the way, your code seems to be referencing SplitType instead of SplitText. SplitType is NOT a GreenSock product.