Scrollmagic: Not working in Wordpress

[jsl15c]

Hey,
I am trying to integrate Scroll Magic into my Wordpress site. Below is my code to load the script, and the function animating my page. This is for the Section Wipe animation - it works outside of Wordpress.
function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), false, true ); wp_enqueue_script( 'scroll-magic', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js', array(), false, true ); wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

<script` type="text/javascript">
        console.clear();
console.log("ScrollMagic v%s loaded", ScrollMagic.version);


// init
var controller = new ScrollMagic.Controller();


// define movement of panels
var wipeAnimation = new TimelineMax()
  .fromTo("section.panel.blue", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from left
  .to("section.panel .additionalContent", 1, {
    y: "-100%",
    ease: Linear.easeNone
  })
  .fromTo("section.panel.turqoise", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from left
  .fromTo("section.panel.green", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from right
  .fromTo("section.panel.bordeaux", 1, {
    y: "0"
  }, {
    y: "0",
    ease: Linear.easeNone
  }); // in from top


// create scene to pin and link animation
new ScrollMagic.Scene({
    triggerElement: "#pinContainer",
    triggerHook: "onLeave",
    duration: "400%"
  })
  .setPin("#pinContainer")
  .setTween(wipeAnimation)
  .addTo(controller)
    </script>

Thanks,
Jarrod

[mattjbrent]

Hi Jarrod,

I'm sure you've got this fixed by now but I just wanted to post as there isn't a lot of information on WordPress and ScrollMagic. all you need to do is go ahead and download ScrollMagic and it's dependencies, upload them then in functions.php go ahead and add the following...make sure the directory matches where you place the files.

wp_register_script('tweenmax_script', '/wp-content/themes/your_active_theme/js/scrollmagic/TweenMax.min.js', array('jquery'),'1.1', true);
wp_enqueue_script('tweenmax_script');

wp_register_script('scrollmagic_script', '/wp-content/themes/your_active_theme/js/scrollmagic/ScrollMagic.min.js', array('jquery'),'1.1', true);
wp_enqueue_script('scrollmagic_script');

wp_register_script('animation_script', '/wp-content/themes/your_active_theme/js/scrollmagic/animation.gsap.min.js', array('jquery'),'1.1', true);
wp_enqueue_script('animation_script');

all the above code does is use the standard wordpress function to register and queue up to load the specified scripts when requested. it's no different than calling it in your head.

oh and a tiny tid bit of advice... if you're asking for help from the author of such an awesome (and free) plugin it's generally polite to say thanks for the awesome plugin. A LOT of work was put in to this by quite a few people and i'm sure they appreciate it 👍

[mariaferraro]

Hey Matt! Where should I put the others files? I'm not quite familiar with normal plugins on wordpress :(