Scrolltrigger for Wordpress

[AlexanderPohl]

Hello,

 

i successfully installed gsap too my wordpress website. Now i wanted to implement scrolltrigger into it as well.

This is my functions.php:

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
/**
 * Child theme functions
 */
if ( !function_exists( 'rewon_child_theme_css' ) ):
    function rewon_child_theme_css() {
        wp_enqueue_style( 'rewon_child_theme_CSS', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css');
    }
endif;
add_action( 'wp_enqueue_scripts', 'rewon_child_theme_css', 99 );


function enqueue_my_custom_script() {
    wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', false );
	wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js', array('gsap-js'), false, true );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

and this is my code on the page i wanted to testing the plugin:

<div class="boxtest2"></div>
<script>gsap.registerPlugin(ScrollTrigger);gsap.to(".boxtest2", { scrollTrigger: ".boxtest2", x: 500, rotation: 360, duration: 5 });</script>

If i take out "gsap.registerPlugin(ScrollTrigger);" then the animation is working but not with scrolltrigger.

 

Is the code in the functions.php right?

[mvaneijgen]

Can you right after the code `gsap.registerPlugin(ScrollTrigger);` add `ScrollTrigger.defaults({markers: true});` and if you do that will there be red and green markers on the page? If that is the case these are the markers that control you're ScrollTrigger, the default values are probably not what you want, so you will have to convert your ScrollTrigger to an object and provide all the necessary settings that will work for the effect you're going for.  

 

Here is a pen with your settings, but with makers enabled 

 

See the Pen RwvpVJB by mvaneijgen (@mvaneijgen) on CodePen

[AlexanderPohl]

34 minutes ago, mvaneijgen said:

Can you right after the code `gsap.registerPlugin(ScrollTrigger);` add `ScrollTrigger.defaults({markers: true});` and if you do that will there be red and green markers on the page? If that is the case these are the markers that control you're ScrollTrigger, the default values are probably not what you want, so you will have to convert your ScrollTrigger to an object and provide all the necessary settings that will work for the effect you're going for.  

 

Here is a pen with your settings, but with makers enabled 

 

 

See the Pen by pen?template=mdGZqwr (

See the Pen by pen?template=mdGZqwr (@pen?template=mdGZqwr) on CodePen

) on CodePen

 

<div class="boxtest2"></div>
<script>
ScrollTrigger.defaults({
  markers: true
});
gsap.registerPlugin(ScrollTrigger);
gsap.to(".boxtest2", {
  scrollTrigger: ".boxtest2",
  x: 500,
  rotation: 360,
  duration: 5
});
</script>

I typed it in like this but there is no markers showing up.

I feel like ScrollTrigger isnt installed on my website since the markers wont even show up but i dont know what else to type into the functions.php other than the code i already have.

[AlexanderPohl]

Over the source code i found out that the normal gsap-plugin loads at line 147 and the scrolltrigger-plugin loads at line 1435.

So i removed ", array('gsap-js')" from the code in the functions.php so that it looked like this:

function enqueue_my_custom_script() {
    wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', false );
	wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js', false, true );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

and now its working fine!