Jump to content

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

TweenMax and pulsing of moved object?

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

I've got an animation where the user clicks a button, which causes a shape object to move to a specific position. Like this:


// move pointer object


TweenMax.to (myobject, .75, {x:43, y:18, ease:Bounce.easeOut});


So, now myobject is in a new position.


If I try to add an effect, such as a repeating pulse/box shadow like this:


TweenMax.fromTo(myobject, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" },

{boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)",
repeat: -1,
yoyo: true,
ease: Linear.easeNone


What I get is a pulsing object (it's just a circle with a fill) in it's current position, AND a pulsing square box shadowed area offset from the new position. I just want the moved object to pulse after it reaches its new position. I've attached a small screen shot.


I think this is pretty simple, but I can't seem to get it...

Link to comment
Share on other sites

Hi flash08 :)


you just need onComplete , like this :

TweenLite.to(myobject, 1, {x:200,y:100,onComplete:function(){
   TweenMax.to(myobject,0.5,{boxShadow:"0px 0px 20px 5px rgba(255,255,255)",repeat:-1,yoyo:true})
Link to comment
Share on other sites

Thanks - but this results in the same behavior - a pulsing box, and a pulsing object.


I guess the thinking is:

1.) Wait for the object to complete it's tween to move to the new position;

2.) After that's done, fire off the box shadow effect


Possibly I need a different way to refer to the object once it has moved?

Link to comment
Share on other sites

Yes, I have to echo Diaco's concerns. I don't understand what you mean by the pulsing shadow being offset from the object.

Perhaps you can fork Diaco's excellent demo, add your code, and show is exactly what is happening.

  • Like 1
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.