Jump to content
Search Community

Repeating boxShadow mousedown animation

Gabriel 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

This hardly seems like the most efficient or even correct way to do something simple like this, but it's the only way I've been able to get to actually work. Just a simple color change boxShadow animation whenever you click anywhere in the window. I haven't changed the autowrite method, so it should default to auto. Yet whenever I try to overwrite these tweens, the boxShadow gets a halo of the other color. Also I have to pause and seek back to the begining or I also see a halo. It has these problems whether I'm using a single tween or two. It doesn't seem right that I should have to create two tweens, pause one, then to change it I have to pause the active, seek it, then resume the other. What's going on here?

 

Here's the only working example I've found, testing in Firefox:

var status = $('#tablet-status')
var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, yoyo:true, repeat:-1})
var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1})

$(window).mousedown(function(){ 
    status.css('background-color','green')
    unclickStatus.pause()
        .seek(0)
    clickStatus.resume()
})
$(window).mouseup(function(){ 
    status.css('background-color','blue')
    clickStatus.pause()
        .seek(0)
    unclickStatus.resume()
}) 

 

 

Link to comment
Share on other sites

Hi Gabriel,

 

It seems that you have some unnecessary code here that it's causing your trouble.

 

For example if you indicate in the tween vars repeat:-1 the tween will repeat endlessly so you're going to get that blue or green halo pulsating around your element all the time.

 

If what you're looking for is for the background to change and the box shadow having just one pulse (fade in and then fade out), you have to repeat the tween just once with yoyo: true, like this:

var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, yoyo:true, repeat:1});
var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:1})

You can see it working here:

http://jsfiddle.net/rhernando/vUYH3/1/

 

Another chance could be to not repeat the tween and reverse it on each mouse event, like this:

var status = $('#tablet-status')
var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', backgroundColor:'green', paused:true});

var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', backgroundColor:'blue', paused:true});

$(window).mousedown(function(){ 
   clickStatus.play(0);
   unclickStatus.reverse();
})

$(window).mouseup(function(){ 
   clickStatus.reverse();
   unclickStatus.play(0); 
})

You can see it working here:

http://jsfiddle.net/rhernando/vUYH3/2/

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Just beware that you shouldn't have two tweens going at the same time that affect the same property of the same object, otherwise you'll have conflicts (actually, by default GSAP will have the earlier tween overwritten by the later one). So in your example, you could pause() one before you play() the other so that they don't overwrite or cross-contaminate. 

Link to comment
Share on other sites

OK, I guess the intention of my question was lost. That is not "unneccessary code". Like I said before, it's currently behaving correctly. I don't want to just replace the shadow, I want it to continually animate the glow.

 

I'd really like to "NOT" have two tweens on the same object. I'm looking for the "most efficient" way to do what my example does. I only posted my code to show the effect I'm looking for, and to explain whenever I condense it to a single tween object, it doesn't seem to overwrite the boxShadow glow correctly and I get a colored halo effect, which is not what I want.

 

My example is working though (it just seems a bad way to do it). @rhernando, that code is the same as mine, although without doing seek(0), the pre-existing boxShadow from the other tween will still be visible if the code is triggered while the shadow is fully expanded, also creating the halo.

 

If I'm already doing it the most efficient way, then so be it. It just seems that with such a robust platform, that I should be able to just create a single repeating tween, and then just modify the color property with a single line, right?

Link to comment
Share on other sites

TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1})

$(window).mousedown(function(){
    TweenMax.fromTo(status,1,{backgroundColor:'green', boxShadow:'none'},{boxShadow:'0px 0px 1px 1px green', yoyo:true, repeat:-1})
})

$(window).mouseup(function(){ 
    TweenMax.fromTo(status,1,{backgroundColor:'blue', boxShadow:'none'},{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1})
})

This works. A lot less code and more logical, and probably what I was looking form. When trying to use .fromTo() before, I should have set boxShadow to 'none', I didn't realize it would create overlapping shadows. This doesn't require keeping extra tweens in memory either, which should be more efficient. Thanks for responding guys

Link to comment
Share on other sites

Hi Gabriel,

 

Sorry for not getting it from the start :P

 

As far as getting just one tween the best way would be to create a function and bind that to the particular events, something like this:

$(document).ready(function(){

var status = $('#tablet-status');

//Initial tween, pulsating blue halo
TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1});

function pulseHalo(e)
{
    TweenMax.fromTo(e.data.element, e.data.time, {backgroundColor:e.data.Color, boxShadow:'none'},{boxShadow:'0px 0px 1px 1px' + e.data.Color, yoyo:true, repeat:-1});
}

$(window).on('mousedown', {element:status, time:1, Color:'green'},pulseHalo);

$(window).on('mouseup', {element:status, time:1, Color:'blue'},pulseHalo);

});

You can see it working here:

http://jsfiddle.net/rhernando/vUYH3/4/

 

Hope this time I got it :mrgreen: and that it helps,

Cheers,

Rodrigo.

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...