Animate cc and gsap

[tmgale]

Hi All,

 

I am trying to play around with the demo file provided in the 'Quick Start: GSAP and Adobe Animate CC' article;

 

https://greensock.com/animatecc-quickstart

 

All I am trying to do is successfully add an additional symbol into the timeline and apply any animation to it in the js file.

 

Here's what I am doing:

 

1. Create new layer - 'Layer 1'

2. Create new symbol (a red rectangle) - 'test'

3. Select symbol ('test') and drag onto stage with 'Layer 1' selected.

4. Duplicate existing .from in tl and change symbol name to be 'test'

5. Watch in despair as ad display blank

 

I cannot for the life of me get this to work without receiving the error 'Uncaught Cannot tween a null target.' along with a blank ad. It seems that the symbol isn't being referenced in the js file.

 

Here is the original js he uses;

//set scope activation object 
var root = this,
	tl;

//prevent children of mc from dispatching mouse events 
root.cta_mc.mouseChildren = false;
root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);});
root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);});
root.logo_mc.on("mouseover", function(){
		TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut});
	});
root.logo_mc.on("mouseout", function(){
		TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
	});

//gsap timeline
tl = new TimelineMax();
tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut});
tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5");
tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25");
tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut});

I am just adding a tl.from above the first tl.from (See below);

//set scope activation object 
var root = this,
	tl;

//prevent children of mc from dispatching mouse events 
root.cta_mc.mouseChildren = false;
root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);});
root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);});
root.logo_mc.on("mouseover", function(){
		TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut});
	});
root.logo_mc.on("mouseout", function(){
		TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
	});

//gsap timeline
tl = new TimelineMax();
//Added new symbol ref in line below	
tl.from(root.test, 1, {y:"500", ease:Back.easeOut});
tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut});
tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5");
tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25");
tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut});

Can anyone point me in the right direction, or point out to me what I am doing wrong?

 

Thanks!! 

 

Tom

[Jonathan]

That error 'Uncaught Cannot tween a null target' is usually a sign that your custom code is running before the DOM is ready. Meaning your trying to find your the element you want to animate. But the browser hasnt loaded it yet, and your asking GSAP to get that element, but it isnt ready yet. What does your whole HTML page look like. Make sure your custom code script tag is at the bottom of the HTML page, right before the ending </body> tag.

 

[tmgale]

Thanks Jonathan,

 

Turns out the issue was that I needed to assign the name in the properties panel for it to be picked up.

 

All working now!!