Rodrigo

April 17, 2013

Hi,

The problem was with calling the tweens targets the right way and honestly I have no idea why it was working on the first place, maybe someone with more knowledge could give us some light in that matter. Your code in test.html was this:

$("#scales").mouseenter(function(){
$("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.');
		TweenLite.to(tipLeft, 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut});
		TweenLite.to(tipLeft, 0.1,{autoAlpha:0.9});
		TweenLite.to(scales, 0.1, {scale:1.05}); 
                TweenLite.to(tipRight, 0,{autoAlpha:0}); 
}).mouseleave(function(){
		TweenLite.to(tipLeft, 0,{autoAlpha:0}); 
		TweenLite.to(scales, 0.1, {scale:1}); 
});

The main problem is that you have your tween pointing to scales, tipLeft and tipRight, but in the code of test.html and index.html their are never defined as variables, that's why I don't know how it was working on the first place.

If you change that code to this:

$("#scales").mouseenter(function(){
$("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.');
		TweenLite.to($("#tipLeft"), 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut});
		TweenLite.to($("#tipLeft"), 0.1,{autoAlpha:0.9});
		TweenLite.to($("#scales"), 0.1, {scale:1.05}); 
                TweenLite.to($("#tipRight"), 0,{autoAlpha:0}); 
}).mouseleave(function(){
		TweenLite.to($("#tipLeft"), 0,{autoAlpha:0}); 
		TweenLite.to($("#scales"), 0.1, {scale:1}); 
});

It works after loading the elements again in firefox 20 on win7.

I've changed the files so you can check it.

Hope this helps,

Cheers,

Rodrigo.

April 16, 2013

Hi,

Like I said in my first post you could use my function to get it working, because is based only in the scroll position to set the progress of a particular tween, so you don't need to set a specific duration in time (by default 1), which could be the problem here.

First you need to put this code in your site:

var getVert;

$(window).scroll(function()
{
    getVert = $(this).scrollTop();
    console.log(getVert);
}

With this you''re going to see the scroll position every time you scroll the page up and down, with that you'll figure where you have to put an end to the initial tween, maybe a couple of hundreds before the second tween triggers.

Lets assume that the amount is 1200 pixels when the tween ends and 100 pixels when the tween starts, then you have to declare your tween as a variable (highly recommended) and put the math in it and you're done:

var getVert,
    nightTween = new TweenMax.to( $('#night'), 1, {opacity: 0})),
    progressNumber;
 
$(window).scroll(function()
{
    getVert = $(this).scrollTop();
    console.log(getVert);
    function scrollTween(startPoint, endPoint, tweenName);
    {
        progressNumber = (1 / (tn1End - tn1Start)) * (getVert - tn1Start);
    }
    if(progressNumber >= 0 && progressNumber <= 1)
    {
        tweenName.progress(progressNumber);
    }
    scrollTween(100, 1200, nightTween)
}

Like that when you scroll past 100 pixels the tween will start and it will end when you pass the 1200 pixels mark. One last thing remove the console.log() call before final deploy, just in case.

If you have any more questions just throw them here or in the blog address of my first post.

Hope this helps,

Cheers,

Rodrigo.

April 16, 2013

Hi,

This is pretty much the way things are right now. I remember like it was yesterday, almost one year ago I was really happy because I was getting my hands on AS3, I was learning to create oop, preloaders, working with sound & video, 3D stuff and on top of that i had GSAP on my hands, then I read about the devices flash plugin situation and how that was going change everything. I didn't knew much about JS and I didn't knew anything about JQuery or any other JS library, the only thing I knew was that I didn't had a lot of time to learn them and get myself going because, at least in Chile this year the sales of devices would be bigger than laptops.

I still hate the fact that I have to create even 3 different codes sometimes (firefox and webkit, IE8 and IE7 and sometimes special codes for devices) but that's the way things are now, we're in an adapt or get behind type of race. Canvas and SVG are great and there's been huge advances, but there's a lot to be done yet, edge animate is a great thing, but just taking it first steps, so basically the main tool developers still have is pure code and that brings the issue you mentioned, spend long time looking for the problems, even the smallest ones.

But the good news after all that ominous and in some way discouraging text is that you're in a position where a lot of us have been, it's like when you're putting together a desktop for the first time, you put the pieces together but it doesn't work, until you find that something is not plugged, learning goes from the most incredible to the most obvious mistakes but once you made them you got some sort of immediate check list, so I bet you that the next time something doesn't work you're going to look for variable declarations and naming on your functions :mrgreen:

All is part of the growing pains of this stuff and my best advice is to encourage you to keep going with a positive look on what you're doing and to the things that are coming in our future because is going to be better every day, it's just impossible that it could be worst. And while we have guys like Jack and Carl on our side making our lives a little easier with this tools and resources you just got to know that we're going in the right direction.

Cheers,

Rodrigo.

April 16, 2013

Hi,

I was assuming that you meant a div with and id "night", right?, that's the one that has the to tween:

controller.addTween('#night', TweenMax.to( $('#night'), 7, {css:{opacity: 0}}));

That's the only element that doesn't reverse on scroll up.

Cheers Rodrigo.

April 15, 2013

Hi,

Mhh it seems ok to me, but the first thing that comes out immediately is that you're using an old version of the engine (1.8) try updating to see what happens. Also the css wrapper is no longer mandatory, the engine detects the property and send the values to the css plugin.

Also you could try a fromTo tween and see what happens, like this:

controller.addTween('#fade-it1', TweenMax.fromTo( $('#fade-it1'), .5,{opacity:1}, {opacity: 0}));

By no means I'm an expert in scrollorama, perhaps other user that has more experience could help, but just in case you could use a function I created some time ago just for that particular tween, I haven't tested scrollorama performance with this function but it shouldn't be any conflict. You can see the code here:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

Hope this helps,

Cheers,

Rodrigo.

April 12, 2013

Yep, but his particular problem is that he's trying to do that with, I presume, semi-transparent pngs,

This works great until you try and use a image with transparency (you see that all the images are just fading on each other).

and the problem with staggerTo is that keeps the preceding images visible, so you can see them through the images placed above, that's why my proposal was to tween the current image's alpha to 0 and the next one to 1, so it can be used in that scenario.

My first try was in fact do a stagger with a 0 duration, but after viewing the result on firebug I realized the visibility problem if used with transparent files:

Cheers,

Rodrigo.

April 11, 2013

Hi,

I wouldn't recommend neither timelineMax and stagger in order to do that, it's far more simple to create a recursive function that tweens the images from autoAlpha:0 to autoAlpha:1. Also in order to achieve a no transition effect you can use TweenLite/Max.set, that method is the equivalent to using a tween that lasts 0 seconds:

TweenMax.to(element, 0 {autoAlpha:0});
//this is equal to the following
TweenMax.set(element, {autoAlpha:0})
//also can be used with TweenLite
TweenLite.set(element, {autoAlpha:0});

//And you can use it inside a timeline in the same way you use the convenience to method
var tl = new TimelineMax();

tl.set(element, {autoAlpha:0});

The code would be like this:

$(document).ready(function(){

var images = $('img'),
    count = images.length,
	transitions = 1,
    timeline = new TimelineMax({repeat:-1, repeatDelay:1.5});
	
TweenMax.set(images, {autoAlpha:0});
TweenMax.set($(".active"), {autoAlpha:1});

function fadeImage()
{
	console.log(transitions);
    var active = $(".active"),
		next = active.next();
	
	TweenMax.set(active, {autoAlpha:0, className:"-=active"});
	TweenMax.set(next, {autoAlpha:1, className:'+=active', onComplete:nextImage});
	
	transitions++;
	
	console.log(transitions);
}

setTimeout(fadeImage,1000);

function nextImage()
{
	if(transitions < count)
	{
		setTimeout(fadeImage,1000);
	}
	else
	{
		transitions = 0;
		TweenMax.set(images[0], {autoAlpha:1, className:'+=active'});
		setTimeout(fadeImage,1000);
	}
}

});

I set up a codepen with the same images (kindly provided by Carl, thanks Carl!!), so you can see it working:

See the Pen ydfBb by rhernando (@rhernando) on CodePen

Hope this helps,

Cheers,

Rodrigo.

April 11, 2013

Hi,

I wasn't clear enough in my first post, sorry about that :mrgreen:

The seek() and resume() functions might not be needed, because you can achieve the same with just play("label") and pause(). If you have a timeline that lasts 10 seconds with labels at 3, 6 and 9 seconds and you play that timeline during 5 seconds, then you click a button to send the timeline to the 3 seconds label and stay paused, then you click the button to go to the 9 seconds label and stay paused and finally you click a button that executes the play() function, the timeline will play from 9 seconds and forward. That is why the behavior happening in your code is odd and could be because of the seek, pause and resume functions in it, my idea was something more simpler in order to see if that is the problem or something else.

Also I noticed that you created some sort of plugin for the slider, maybe something inside that could be causing the trouble.

As for the tweenFromTo method I forgot to mention that you can use the same label in both the from and to parameters and also can add a callback, so is a very powerful and handy method, something like this:

var tl = new timelineMax({repeat:-1, repeatDelay:1});

//in the rest of the code you add the labels and particular tweens

tl.tweenFromTo('label1', 'label1', {callbacks, easing});

So like that you just jump to that point on the timeline.

You can see it working here:

See the Pen Bgjzw by rhernando (@rhernando) on CodePen

In a personal opinion my first choice for a image/content slider wouldn't be a timeline, maybe a setTimeout or setInterval function calling a TweenMax on an element based on a class name (active and inactive) and with a callback that triggers the function over and over, also user events to pause or suspend the timeout or interval, because if you get too many elements inside the slider the labels thing could get a little troubling.

Hope this helps and sorry for not answering and getting the pen ready before,

Cheers,

Rodrigo.

April 9, 2013

Hi,

Well a good way would be use pause (just like you're already using it) and play(), something like this:

tl.pause();//pauses the timeline
tl.play('labelName');//plays the timeline starting at that label

Another way could be to play the timeline starting at a specific label and going to the next one, keeping the timeline paused, using the tweenFromTo() method:

tl.pause();
tl.tweenFromTo('labelName1', 'labelName2');

For what I can see in your site the last one seems to be the best choice, since when the user selects the slide the timeline stops. I'll set up a codepen in order to illustrate this methods.

Also you can declare the repeat and delays in the timeline declaration, like this:

var tl = new TimelineMax({repeat:-1, repeatDelay:1});

Hope this helps,

Cheers,

Rodrigo.

April 6, 2013

Great job Michael,

Hi score: 56 (a lot of lost eggs :rolleyes: )

I liked the graphic design, simple yet very beautiful, my girlfriend loved the blue bird that shows in the final score.

I also noticed that some eggs have easeOut functions, very deceiving .

Cheers,

Rodrigo.

April 5, 2013

Hi Masq,

By looking at your code and watching the site a little closer I can tell you that this is a pure chrome bug issue, why is this happening? I have no idea at all.

If you google for chrome and animation issues you're going to find that chrome has problems with CSS3 transitions, jquery animate(), other js libraries, canvas and svg animations, besides the fact that the site runs quite smooth on safari indicates the fact that is just a chrome issue and not webkit in general.

In other aspect the cpu and memory consumption are quite normal, there are no jumps in either when you do a mouse over & out in the menu elements, and when you click the animations runs a little bit jittery but it doesn't chew up the resources in a relative new laptop. Therefore I presume that there's nothing wrong with the engine itself, considering that with 7 tabs opened in firefox the animation runs very well and also there's no abnormal resource consumption. That also indicates that there's nothing structurally wrong with your code, as far as I can see.

Also you haven't updated the engine version maybe that could help..

To sum it up unfortunately I can't help you further than I've already done without some serious debugging of your code which implies testing each part of it and find what's causing chrome to behave like this. One alternative to that grueling process could be to comment out some parts of the code in order to see if there's any improvement, for example leave the functions empty, so when they're called you won't get an error, that would help to isolate without any major disassemble of the site.

Anyway keep posting if you can in order to see if there's anything else we can do, or if other user can chip in.

Well I hope this helps a little,

Cheers,

Rodrigo.

April 4, 2013

Hi,

I've looked at your site and looks very slick, nice work!!. The only js I found were just some set tweens, so there's not much it can be done with that. I noticed that you're working with version 1.9.0, try updating it to 1.9.3. Also you're loading TweenMax and the css plugin, there's no need for that since TweenMax includes the css plugin.

Regarding the chrome issue, it has been reported previously in the forum the fact that chrome puts render quality over render performance which could be a factor here. My recommendation would be to isolate as much as you can in order to make specific trials of your code and then start putting it all together piece by piece until you find what piece of the code could be causing this problem.

It also would be great to take a look at the tweens code (if is not a problem for you) in order to figure what the problem could be.

Cheers,

Rodrigo.

April 4, 2013

Glad to hear that you solved the issue.

Cheers,

Rodrigo.

April 3, 2013

Hi Masq,

You're welcome.

You could test the fps meter included in chrome's developer tools. Open developer tools and in the bottom right corner you'll find a gear for the settings, click on it and in general settings - rendering select "show FPS meter". With that you'll see if the lag is related with that or some other thing creating problems.

Also you could select "show painting rectangles" to see what else maybe painting besides the elements controlled by GSAP, sometimes an event bubbling in the code can cause some problems in the long term.

Anyway I'll be waiting for the url to check.

Cheers,

Rodrigo.

April 3, 2013

Hi and welcome to the forums,

Jack addressed a similar behavior previously, it has to do more with erratic behavior but also in chrome. Check this post.

Also it would be great if you could set up a live example (fiddle or codepen) in order to take a look at it.

Hope this helps a little,

Cheers,

Rodrigo.

April 3, 2013

Hi,

I haven't been able to reproduce the subject of this post, please check that you're using an updated version of the engine (current version is 1.9.3, cdn links are updated too).

Anyway I've created a simple example that sets the z-index property of an element, then tweens top, left and z-index property of the element and the z-index doesn't change beyond the tween var. Something like this:

CSS

#div1{
	position:relative;
	width:150px;
	height:150px;
	background:#00f;
	margin-top:10px;
}

JS

$(document).ready(function(){

var div1 = $("div#div1"),
	log1 = $("div#log1"),
	log2 = $("div#log2"),
	log3 = $("div#log3"),
	btn1 = $("button#btn1"),
	tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360, zIndex:20, paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});

TweenMax.set(div1, {zIndex:50})

function tn1Start()
{
	log1.children().html(div1.css('z-index'));
}

function tn1Update()
{
	log2.children().html(div1.css('z-index'));
}

function tn1Complete()
{
	log3.children().html(div1.css('z-index'));
}

btn1.click(function()
{
	log1.children().html('');
	log2.children().html('');
	log3.children().html('');
	tn1.play(0);
});

});

If you remove the set tween, add the z-index value in the inline style and remove the zIndex in the tween, the element's z-index doesn't change neither:

CSS

#div1{
	position:relative;
	width:150px;
	height:150px;
	background:#00f;
	margin-top:10px;
	z-index:50;
}

tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360,/* zIndex:20,*/ paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});

//TweenMax.set(div1, {zIndex:50})

Even if you change the position to absolute there's no difference.

You can see it working here, and you can make the changes in there to see the behavior:

See the Pen whDdj by rhernando (@rhernando) on CodePen

Also it would be great if you could set up a working example of your problem in order to check what could be causing the problem.

Hope this helps,

Cheers,

Rodrigo.

April 2, 2013

Hi,

No problemo, glad that it worked.

Now regarding the tween keep going even when the timeline is paused, that's an odd behavior, if you check the fiddle you'll see that the background color change from blue to red stop at a purple shade meaning that the timeline is paused stopping all the tweens nested inside it, and if you comment the timeline.pause() line and put inside a console log you'll see the element color changing to red after 10 seconds and the console log triggering at 2.5 seconds, once the short tween has completed, something like this:

mc2.updateTo({css:{ width: "50%"}, onComplete: function()
                                                        {
                                                            /*timeline.pause();*/
                                                            console.log("foo bar");
                                                        }
             }, false);

You can see it here:

http://jsfiddle.net/rhernando/Zx4Vr/3/

Can you provide a simple example of your code?, in order to see what could be the problem.

Cheers,

Rodrigo.

April 1, 2013

Hi,

Your site is looking good, keep up the good work. A suggestion will be to keep using backgrounds, the New York background you're using is quite nice, maybe you could create a separated tween for the background and the content, so they can get into position at different speeds.

Regarding some of the sites you posted the batman one has a js file:

http://www.thedarkknightrises.com/dvd/js/site.js

but you're talking over 4000 lines of code so you'll need some patience.

You could look at this site for more ideas, hey've done a pretty good job too:

http://www.theartofraw.g-star.com/

Here is the main js it's "only" 1300 lines so it's a little more simpler than the batman one :mrgreen:

http://theartofraw.g-star.com/js/main.js

In order to access the js files from a site you need to use developer tools (for webkit based browsers) or firebug (for firefox), those are very useful tools when it comes to see the structure of a site or app. Now in terms of that I wouldn't recommend you to spend a lot of time reading other developers code, but to check the pages and see what is happening and think how could that be done with GSAP, it could take more time but you'll learn quite more in that way. Also there are quite a few forums and sites with tutorials to learn how to do a specific task, then you put them all together (here is where the timeline is your best friend and ally) and voila!! you got your site.

As far as structuring a site with GSAP I'm more of the idea of using GSAP to present your site to the visitor and let them use the site in a fun way but always keeping in mind why that person landed on the site, so it's not all about the animations, it's also about the content, a good balance between both is the winning formula, and the beauty of GSAP is that the possibilities are almost infinite in order to create a amazing way to present the content.

It's really a one step at a time type of thing so my best advice would be to be patience and just create single samples (there are tons of those in the forum) and then you'll be able to enhance their complexity, and keep in mind that there's always someone here in the forums willing to help you.

Cheers,

Rodrigo.

March 31, 2013

Hi,

No problemo.

I've updated the fiddle to work based on the position of a theoretical scroll bar at the bottom of the page. If you click so the bar goes to the left the timeline will loop forward, if you click so the bar goes right the timeline will loop backwards:

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

Now keep in mind that this is not based on any type of user interface event like clicks, keys, mouse or scroll pad, just the position of that element, so in your case you should look for an element that changes some css property value and associate that change to the direction of the timeline.

Also would be helpful to see some reduced sample of what you're trying to do.

Hope this helps,

Cheers,

Rodrigo.

March 30, 2013

Hi Spiv,

The best way could be to check the variations of the window scrollLeft position (JQuery API) and using conditional logic you can set your tween forward or backwards, something like this:

$(document).ready(function(){

var div1 = $("div#div1"),
    tl1 = new TimelineMax({paused:true, repeat:-1, onReverseComplete:reverseLoop}),
    isForward = false,
    isBackward = false,
    previousPos = $(window).scrollLeft();//original position of the scroll bar, 0 when the page loads

tl1
	.to(div1, 2, {left:300, top:300})
	.to(div1, 2, {rotationZ:360});

function reverseLoop()
{
    //you get the total time of the timeline to set the correct point
    //for the reverse method, like this you can change your timeline 
    //dynamically. If some tween has a repeat or repeat delay you should
    //use total duration
    var tl1Time = tl1.duration();	
    tl1.reverse(tl1Time);
}

$(window).scroll(function()
{
	newPos = $(this).scrollLeft();//we get the current position
	deltaPos = newPos - previousPos;//how the position has varied
	previousPos = newPos;
	if(deltaPos > 0 && !isForward)
	{
		tl1.play();
		isForward = true;
		isBackward = false;
	}
	if(deltaPos < 0 && !isBackward)
	{
		tl1.reverse();
		isBackward = true;
		isForward = false;
	}
});

});

You can see it working here:

http://jsfiddle.net/rhernando/PZB4y/

Now this is the common ground for scroll bars and this is not your case, I'm going to presume that you're using some custom scroll system or plugin, in that case you could replicate the code above considering what's in this post, all you have to do is use the logic of the $(window).scroll() function into the first setInterval function (getTop) of this fiddle. Unfortunately i couldn't set up a live example now, I'll get one during the afternoon, in the mean time I hope this helps you a little.

Cheers,

Rodrigo.

March 28, 2013

Hi and welcome to the forums,

I'm by no means an EA expert but I do know two things, first it works with JQuery plugins and you can do amazing things with GSAP (check Chris Gannon's blog), but beyond that I'm not going to be able to help you.

you should try the Adobe Edge forums I've read some posts about working with JQuery plugins, and maybe you could try what Chris did in this post of his blog.

I hope you can solve your question, it would be nice if you could drop by to tell us how you did it, and sorry for not being of more assistance.

Cheers,

Rodrigo.

March 28, 2013

Hi,

You also have some syntax issues here too.

First once you have defined your tweens as variables in the add method you only put each variable name in the array, the DOM element and the variables to be tweened must go in the variable declaration, not in the add method array.

Wrong syntax:

var w = 25;

var mc1 = new TweenMax();
var mc2 = new TweenMax();

timeline.add( [   
mc1.to($('#selector'), 10, {backgroundColor:'red'}), 
mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }})
],0,0);

Wright syntax:

var w = 25;

var timeline = new TimelineMax();

var mc1 = new TweenMax.to($('#selector'), 10, {backgroundColor:'red'});
var mc2 = new TweenMax.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }});

timeline.add([mc1, mc2],0,0);

Second, in the update method you don't need to indicate the element and the time, only the vars to be changed. Also is not necessary to append, add or insert the update to the timeline, updateTo works as a function so you just use it on the variable you're updating.

Wrong:

timeline.append( 
    mc2.updateTo($('#selector'), 5,  { width: "50%", onComplete: function(){ timeline.pause()} }, false) 
);

Wright:

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

And finally from the api reference:

updateTo() is only meant for non-plugin values. It's much more complicated to dynamically update values that are being handled inside plugins - that is not what this method is intended to do.

That is why in the code above you'll see this:

mc2.updateTo({css:{ width: "50%"}, onComplete: function(){ timeline.pause()} }, false);

Because since those values will be handled by the css plugin, and the tween has already started the tween element already has changed to that so the updateTo function it's going to look for width and is not going to find anything, but if you indicate that is a css plugin value the function will look for css.width and will update the corresponding tween.

You can see the code working here:

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

Hope this helps,

Cheers,

Rodrigo.

March 27, 2013

Hi Gabriel,

Sorry for not getting it from the start

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.

March 26, 2013

Thanks for pointing that out Jack, I've corrected the code to this:

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

The updated fiddle is here:

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

Cheers,

Rodrigo.

March 26, 2013

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.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Rodrigo