Jump to content
Search Community

call OverwriteManager.init() for Javascript?

DeltaFrog 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

There's no need in v12 - OverwriteManager is now baked into the platform. The default mode is "auto" because it seems the most intuitive for 98%+ of the situations. But you can define the overwrite modes as strings now, like:

 

TweenLite.to(element, 1, {css:{rotation:30}, overwrite:"all"});

 

Or to set the default for all tweens, use:

 

TweenLite.defaultOverwrite = "all"; //or "auto" or "none" or any of the other modes mentioned in the docs. 

 

The change is mentioned in more detail on the v12 release page: http://www.greensock.com/v12/

 

Does that clear things up?

Link to comment
Share on other sites

Thanks a lot Jack, I've made sure my plug ins are updated and I'm betting GS is all set up and working. I think the problem is my setup is fundamentally wrong. Any wisdom you can offer is greatly appreciated.

 

I have 5 buttons that use this code you provided to add or subtract from the obj variable. It works great but if I press a button before the tween finishes it adds/subtracts to the current number in mid tween resulting in incorrect values. Each button should add 100 or subtract 100 to the end tween value even if the tween is in progress. I'm not even sure this is an overwrite issue. Would I have to append the tween to the end of the other? My other idea is that I have to do the math before the tween starts so my button is just always tweening to the current value. Haven't quite wrapped my head this. :S Here is a link to what I have done so far. (Link Removed)

 

 

 

TweenMax.to(obj, .5, {value:obj.value-100, roundProps:"value", overwrite:"none", ease:Expo.easeOut,onUpdate:function() {
element.innerHTML = obj.value;
}});

}

if(y == 'master-btn-on.jpg'){
theImg.src='images/master-btn-off.jpg'
masterPower = "off";
TweenMax.to(masterDevice, .5, {css:{alpha:0}});
TweenMax.to(masterDevice, .5, {css:{scale: .2}, ease:Back.easeOut});

TweenMax.to(obj, .5, {value:obj.value+100, roundProps:"value", overwrite:"none", ease:Expo.easeOut,onUpdate:function() {
element.innerHTML = obj.value;
}});
} 

Edited by DeltaFrog
Link to comment
Share on other sites

in order to guarantee that the tweens land on certain intervals you can track a

countMultiplier each time you press a button.

 

For instance lets say each time you press a button you want your displayed value to increase by 100.

Each time a button is pressed increment a countMultiplier by 1. If the user clicks the button 6 times, well the countMultiplier will be equal to 6. Take that number and multiply it by the interval 100, and you get 600. 600 is going to be the new value you want to tween to. It will be impossible to get a number like 555 or 134.

 

Here is a jsfiddle to try: http://jsfiddle.net/...bassador/VKgxZ/

Try hitting the increase and decrease buttons as often and fast as you like. The tween will always end on a multiple of 100.

 

 

var output = $("#output"),
countIncrement=100,
countMultiplier=0,
obj = {
displayValue:0
};

function tweenValue(){
var newValue = countMultiplier * countIncrement;
TweenMax.to(obj, 1, {displayValue:newValue, onUpdate:updateUI});
}

function updateUI() {
output.html(obj.displayValue);
}

$("#increase").click(function(){
countMultiplier++;
tweenValue();
})

$("#decrease").click(function(){
countMultiplier--;
tweenValue();
})​

Link to comment
Share on other sites

Hi DeltaFrog,

 

We recently uncovered a slight bug in the RoundPropsPlugin. We are releasing an update later today. I have attached the updated TweenMax.min.js file for you to use.

 

The fiddle has been updated to show you how to use roundProps:

http://jsfiddle.net/...bassador/VKgxZ/

 

Also, I noticed that on your site you are loading more files than you need to. As long as you are loading TweenMax.min.js, you don't need the others:

 

 

<!-- this is all you need -->
<script src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<!--- the scripts below are included in TweenMax.min.js, no need to include them separately -->

<script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/TweenLite.min.js"></script>

 

Let us know if you have any trouble with the new file. You may have to clear your browser cache to see the results on your site and in the fiddle above.

TweenMax.min.js.zip

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