Gsap timeline control between two JS files

[niiku23]

Hi,

 

It's my first question here. I've searched for an answer and not found one. I do not have experience of linking code between multiple javascript files which i guess is fundamental here. Thanks for any replies! 

 

I have projects with GSAP timelines in. I would like to create a separate javascript file that can control those timelines that can be added or removed without adjusting the individual project's code. My simple test of referencing the name of the timeline (and trying to control it) from one javascript file to another is not working. I need a very simple solution with no additional code libraries if possible? I am able to simply adjust and read variables between the two .js files.

 

HTML:

<script type="text/javascript" src="main.js"></script>

<script type="text/javascript" src="navigator.js"></script>

 

main.js:

var tl = new TimelineMax({});

tl.set(["#main_content"], {autoAlpha: 1});

 

navigator.js

tl.to(["#headline3"], 0.2 , {autoAlpha:.5}) ;

 

error: navigator.js:6 Uncaught TypeError: Cannot read property 'to' of undefined

 

Thanks for any help!

 

Nick

[Sahil]

You will be able to access any global level variables of first file(file that is included first in your project) into the second file. But you can't access variables of second file into first. It's like the way you use any libraries like jQuery or GSAP, and use their methods/objects in your project. Now in your case it depends on where you are creating these variables and how you are including files in project and in what order.

[niiku23]

Thanks for the answer Sahil.