vanwoods

February 6, 2018

Yes it is an animate CC project, so not animating DOM elements. I'll have a look at the Easel plugin.

Thnx!

February 6, 2018

Hi Jack,

Oeps... yes i see what you mean! I changed the code, you can see it here:

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .2, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.2, scaleX:1, scaleY:1, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.4, scaleX:1.15, scaleY:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .2, {delay:.6, scaleX:1, scaleY:1, ease: Back.easeOut});
}

Somehow the scale shortcut did't seem to work so i changed it back to the first code preview.

So it works fine now, the button pops up and down on mousover.

Thanks for your assistance!

February 6, 2018

Hi Jack,

Thanks for your input, I cleaned up the code. ;-)

Unfortunately my instance of cta_mc still isn't playing the tweenmax on a mouseover. When i punt in an alert it works as supposed.

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
	alert("Moused over");
}

But it won't play when i insert the TweenMax code.

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .3, {scale:1.15, ease: Back.easeOut});
	TweenMax.to(this.cta_mc, .3, {scale:1, ease: Back.easeOut});
}

Any change to see what's going wrong?

February 6, 2018

Hi!

I'm having some trouble with a mouseover event, the code I use isn't responding. I just want my cta_mc to popup when I mouseover.

var frequency = 3;
stage.enableMouseOver(frequency);
this.cta_mc.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()
{
	TweenMax.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut}, "+=.3");
	TweenMax.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut});
}

var tl = new TimelineMax({repeat:0, repeatDelay:3})

TweenLite.defaultEase = Power2.easeOut;

tl.to(this.bg_mc, 1, {delay:.5, alpha:.5})
	.from(this.txt1_mc, 1.5, {y:"+=20", alpha:0}, "-=.5")
	.to(this.txt1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt2_mc, 1, {y:"+=20", alpha:0}, "-=.3")
	.from(this.txt2_1_mc, 1, {y:"+=10", alpha:0}, "-=.5")
	.to(this.txt2_1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt3_1_mc, 1, {delay:.5, y:"+=10", alpha:0}, "-=.5")
	.to(this.txt3_1_mc, .5, {delay:1, y:"+=10", alpha:0})
	
	.from(this.txt4_1_mc, 1, {delay:.5, y:"+=10", alpha:0}, "-=.5")
	.to(this.txt2_mc, .5, {delay:1, y:"-=25"})
	.to(this.txt4_1_mc, .5, {y:"-=25"}, "-=.5")	
	
	.from(this.cta_mc, 1, {y:"+=25", alpha:0}, "-=.25")
	.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut}, "+=.3")
	.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut})
	.to(this.cta_mc, .3, {scaleX:1.15, scaleY:1.15, ease: Back.easeOut})
	.to(this.cta_mc, .3, {scaleX:1, scaleY:1, ease: Back.easeOut})

GSDevTools.create();

I also tried this code but i guess it is outdated?

//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.cta_mc.on("mouseover", function(){
		TweenMax.to(this, 1.25, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut});
	});
root.cta_mc.on("mouseout", function(){
		TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
	});

Any change somebody seeing what's incorrect?

Hope you can help me out.

Thanks in advance.

January 3, 2018

Thank so far!

I'll try to explain my problem more clearly the next time...

Hope you have the solution for this problem.

January 3, 2018

Thanks for your quick reply!

I can see it in your link too. I'm working on OS 10.13.2, checked it in chrome and safari.

if you hit command+r (refresh) than you can see the end of the timeline in just a blink (0.2 seconds or less) after that the animation starts. It goes real fast but you can see it before the animation starts.

It's just one blink, to make it more clear. (the blue rectangle is very striking)

January 3, 2018

Thanx Carl,

Attached the fla. Hope you can see whats wrong.

HT_banner_test_400x400px.zip

January 3, 2018

I changed the GSAP version but the problem still exists.

Is there an other solution for this?

January 3, 2018

Yes that would be handy. Is a normal link also good?

http://visiblemotion.nl/test/

January 3, 2018

Hi,

I noticed that GSDevTools causes an blink of the end of the timeline on the start of the animation.

Is there a possibillity to get change this?

Thanks.

December 21, 2017

Thanks @OSUblake

Sounds clear i'll try to figure this out with my animation.

December 21, 2017

Yes i increased the duration already.

  .to(this.star_mc, 2, {delay:0.5, x: -490, y:-170}) 
  .to(this.star_mc, 2, { x: -400, y:-490})
  .to(this.star_mc, 2, {x: -105, y:-485})
  .to(this.star_mc, 1.5, {x: 20, y:-285})
  .to(this.star_mc, 2.5, {x: -320 , y:70})

If it is stil not ok then i think i have to make a path with rounded corners of the star. So it can smoothly follow this. But it would be nice to keep this in Animate.

Quote

@OSUblake might have some tricks for this.

Is this within animate?

Thanks so far!

December 21, 2017

Thanx Sahil, it looks much better now.

TweenLite.defaultEase = Linear.easeNone;

Does this mean there is always an ease in a tween even when not specified?

Hope the client likes it better this way. Otherwise i still have to switch probably to follow bezier path option.

December 21, 2017

Hi!

Is there a way to make this animation more fluid?

  .to(this.star_mc, .8, {delay:0.5, x: -490, y:-170}) 
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -400, y:-490})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -105, y:-485})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: 20, y:-285})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -320 , y:70})

It now goes hard from one point to the other? Or is this only possible when the star_mc follows a bezier path?

I'm working in animateCC right now but i'm not sure if this is possible within animate?

I'd prefer animate because i'm using the banner ad templates.

Thanks in advance.

April 19, 2017

I will try to figure that out!

Thanks for pointing me to this direction.

April 19, 2017

Thanks Oliver16Years!

It seems to work now, by adding the stagger number.

Does Animate CC accepts one instance name for multiple objects? Makes it easier to target multiple elements. Just like adding one class for multiple elements in a DOM environment?

Like this:

tl = new TimelineMax();
tl.staggerTo([root.elements], 1, {alpha: 1, ease: Back.easeOut}, .2 );

It now only triggers the element on the top layer.

April 19, 2017

Hi,

I'm trying to figure out why my stagger isn't working in Animate CC.

.staggerTo is possible from within Animate CC is it?!

var root = this, tl;

tl = new TimelineMax();
tl.staggerTo([root.headline, root.tagline, root.logo, root.cta], 1, {alpha: 1, ease: Back.easeOut});

Tried it with all the elements have the same instance name, but that doesn't work also.

Somebody knows if there is an overview what can and can't be used from GSAP within Animate CC?

Thanks in advance!

Regards,

vanWoods

October 18, 2010

You're right, it had to fade in.

Not every mc has to show up imediately at the beginning of the swf, some of them have to show up later. So that was my question, it works now.

thnx greensock!

October 18, 2010

Hi all,

I'm trying to figure this out:

I'm want an mc to show up later in the timeline but it's already visible when my movie starts playing. Is there a way to make the mc "sint" invisible when the movie starts and then let it fade in later after the first 2 mc are finished?


var timeline:TimelineLite = new TimelineLite();
timeline.append(new TweenLite(moon, 2, {y:"145"}));
timeline.append(new TweenLite(textField, 3, {typewriter:"Hij komt..."}));
timeline.append(new TweenLite(sint, 2, {y:"0", alpha: 0 }));

Greetings vanWoods

Notifications

Messages

vanwoods

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by vanwoods

Mouseover event not reacting

Mouseover event not reacting

Mouseover event not reacting

Mouseover event not reacting

GSDevTools blinks end of timeline on start

GSDevTools blinks end of timeline on start

GSDevTools blinks end of timeline on start

GSDevTools blinks end of timeline on start

GSDevTools blinks end of timeline on start

GSDevTools blinks end of timeline on start

Fluid movement

Fluid movement

Fluid movement

Fluid movement

staggerTo within Animate CC

staggerTo within Animate CC

staggerTo within Animate CC

Start mc invisible

Start mc invisible