Jump to content
Search Community

Animate cc and gsap

tmgale test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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.
×
×
  • Create New...