Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tmgale

Animate cc and gsap

Recommended Posts

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

Link to post
Share on other sites

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.

 

:)

Link to post
Share on other sites

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!! :)

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×