Jump to content
Search Community

Lauran999

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by Lauran999

    ReferenceError: TweenMax is not defined

    in GSAP

    Posted

    I simply cannot figure it out, I tried adding/removing different dependencies in the functions.php file. But it seems like it only wants to work when the script is added in the header.php...

     

    Could you give it a check: http://www.bakkershuysje.nl/blog/ ?

     

    Does it have to do with this: "Probably the biggest update in ScrollMagic 2.0 is the new file structure and the removal of all dependencies (GSAP or jQuery)." (Link: https://ihatetomatoes.net/whats-new-scrollmagic-2-0/ )

     

    Thanks Lauran

    ReferenceError: TweenMax is not defined

    in GSAP

    Posted

    Hi Rodrigo,

     

    Thanks again for your quick reply:)

     

    1. I tried the HTML <script> option: IT WORKED:D  Again a step closer to the solution:) Now I am really certain that the script is not being loaded through enqueueing/registering in the functions.php.. I added this to the header.php fyi:

    <!DOCTYPE html>
<?php global $smof_data, $woocommerce; ?>
<html class="<?php echo ( ! $smof_data['smooth_scrolling'] ) ? 'no-overflow-y' : ''; ?>" xmlns="http<?php echo (is_ssl())? 's' : ''; ?>://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
	
	<!--START LAURAN-->
		<script type='text/javascript' src='http://bakkershuysje.nl/blog/wp-content/themes/Avada/assets/js/1lauran/TweenMax.min.js?ver=3.8.4'></script>
	<!--END LAURAN-->

    2. I checked the route to the js asset: That looks completely fine..

     

    3. I set up a test website, (it is working now because I left the HTML <script> tag in the header.php. You can take a look if you like;)

     

    http://www.bakkershuysje.nl/blog/

     

    Tomorrow I will do some more testing and then I will get back here!

     

    Lauran

    ReferenceError: TweenMax is not defined

    in GSAP

    Posted

    Dear Rodrigo,

     

    First of all thank you for your quick reply. I highly appreciate it!

     

    I tried several things:

     

    1. Typing

    window.TweenMax

    in the firebug console resulted in the following message:

    window.TweenMax
undefined

    But if I look at the html source code, I can see all scripts being listed in the footer in the right order (as enqueued in the functions.php file). So that looks strange.

     

    2. Indeed in can have to do with dependencies. I am trying out several things with that atm.

     

    3. I was reading here: https://codex.wordpress.org/Function_Reference/wp_enqueue_script about $depts, it says the following which I do not completely understand:

     

    This parameter is only required when the script with the given $handle has not been already registered using wp_register_script().

     

    Do you know if this has to do with it? So that it might have to do with not registering when you are writing it as a dependency of another script?!

     

    Do you have a suggestion?

     

    Thanks!

     

    Lauran

    ReferenceError: TweenMax is not defined

    in GSAP

    Posted

    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

     

     

×
×
  • Create New...