Dear All,
I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox:
ReferenceError: TweenMax is not defined
In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work:
wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true );
//LAURAN BEGIN////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//wp_deregister_script( 'TweenMaxMin' );
wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'TweenMaxMin' );
//wp_deregister_script( 'ScrollMagic' );
wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'ScrollMagic' );
//wp_deregister_script( 'animationGsap' );
wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'animationGsap' );
//wp_deregister_script( 'debugAddIndicators' );
wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'debugAddIndicators' );
//wp_deregister_script( 'lauranScrollMagic' );
wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true );
wp_enqueue_script( 'lauranScrollMagic' );
//LAURAN EINDE/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
And this is my script:
//jQuery(document).ready(function($){
jQuery(document).ready(function(){
// place custom JS here
console.log("DOM ready");
// window, links, and other assets loaded
jQuery(window).on("load", function(){
// or place custom JS here to make sure DOM is ready and the window is loaded
console.log("window, links, and other assets loaded");
var images = [
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png",
"http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png"
];
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};
// init controller
// create tween
var tween = TweenMax.to(obj, 0.5,
{
curImg: images.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
repeat: 3, // repeat 3 times
immediateRender: true, // load first image automatically
ease: Linear.easeNone, // show every image the same ammount of time
onUpdate: function () {
$("#myimg").attr("src", images[obj.curImg]); // set the image source
}
}
);
var controller = new ScrollMagic.Controller({loglevel: 3});
// build scene
var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220})
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"})
.setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween
.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
.addTo(controller);
var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300})
.setPin('#blockLauran')
.addIndicators()
.addTo(controller);
var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200})
.setPin('#blockLauran2')
.addIndicators()
.addTo(controller);
});
});
All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme.
Can someone help me out? It looks like if I am almost there...
Thanks!
Lauran