Like other MooTools functions we have seen, these methods are very simple to use, but they are all very powerful. Tween allows you to add those extremely "blazing" effects - it can smoothly change animations, thereby improving your user experience.
Tween's quick way
We usually start with the basics, but MooTools 1.2 only provides such an excellent quick way to tween, and they are so simple to use that I can't help but start here.
.tween();
A tween is a smooth change between two style attribute values. For example, by tween you can smoothly change the width of the div from 100 pixels to 300 pixels.
Reference code:
// Create a new function
var tweenerFunction = function() {
// Select the element you want to use gradient
// Then add .tween
// Finally declare the attributes and values you want to change
$('tweener').tween('width', '300px');
}
('domready', function() {
// Add an event to a button here
// Initialize this gradient when clicked
// and call our gradient function
$('tween_button').addEvent('click', tweenerFunction);
});
Corresponding to the above code, our HTML code should look like this:
Reference code:
<div ></div>
<button >300 width</button>
.fade();
This method allows you to smoothly adjust the opacity of an element. This is almost exactly the same as the example above:
Reference code:
// Create a new function
var tweenFadeFifty = function() {
// Create your selector here
// Then add .fade
// Finally declare a value between 0 and 1 (0 means invisible, 1 means fully visible)
$('tweener').fade('.5');
}
('domready', function() {
// Add an event to the button here
// Initialize this gradient when clicked
// and call our gradient function
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
Reference code:
<div >
<button >Fade to fifty percept opacity</button>
.highlight();
Highlight is a very clear (and extremely useful) gradient shortcut method, which provides two functions:
Use it to smoothly change to a different background color
Set a different background color directly, and then smoothly change to another background color
These are very useful when creating user feedback. For example, you could have an element flash when something is selected, or you change the color and then flash again when it is saved or closed. This has a lot of options and is very simple and easy to use. In this example, let's create two divs and add two types of highlight methods:
Reference code:
// Create a function
var tweenHighlight = function(event) {
// We used it here, this is the parameter passed from this function
// This means "the target (source) of the trigger event"
// Because this effect is applied to the element that triggers the event
// So we don't need to create a selector
// Note: addEvent will automatically pass the event object as a parameter into this calling function
// ... Very convenient
('#eaea16');
}
// Create a function
// You need to pass in a parameter
// Since this function is called in an event (event)
// This function will be automatically passed into the event object
// Then you can reference this element through .target
// (Target element of event)
var tweenHighlightChange = function(item) {
// Here we don't use a color, but add a comma to separate the second one
// This will set the first color and then change to the second color
('#eaea16', '#333333');
}
('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
Reference code:
<div ></div>
<div ></div>
Shortcut method example
Here are some quick ways to get the effect online. You can click these buttons in different orders and notice their changes:
Reference code:
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
// .fade can also accept 'out' and 'in' as parameters, equivalent to 0 and 1
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
('#eaea16');
}
('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
Reference code:
<div ></div><br />
<button >300 width</button>
<button >100 width</button>
<button >Fade Out</button>
<button >Fade to 50% opacity</button>
<button >Fade In</button>
Reference code:
#tweener {
height: 100px
width: 100px
background-color: #3399CC
}
Move the mouse up to see the first type of eye-catching effect.
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
More Gradients (Tween)
Create a new gradient
If you want to be more flexible and more control over your changes, you may want to create a new shape change animation to replace those shortcuts. Note that using "new" is used to create a new instance:
Reference code:
('domready', function() {
// First we assign the element to change to a variable
var newTweenElement = $('newTween');
// Now we create an animation event and pass this element into
var newTween = new (newTweenElement);
});
Reference code:
<!-- This is the element we want to apply the gradient effect -->
<div ></div>
<!-- This is the button to start the gradient effect -->
<button >Set</div>
Set styles through gradient
Once you create a new gradient from an element, you can easily set a style property via the .set() method. This is the same as the .setStyle() method.
Reference code:
var newTweenSet = function() {
// Pay attention to the use of "this"
// Learn how to use "this"
('width', '300px');
}
As we learned before, we want to separate our function from the domready event, but in this example we want to create a gradient in the domready event and then reference it externally. We have mastered a way to pass parameters outside of domready (by creating an anonymous function and passing one), and today we are going to learn a better way to pass gradient objects in Moo (this is not to say that anonymous functions are no longer suitable at any time).
.bind();
Through .bind();, we can make the "this" in a function equal to the parameter:
Reference code:
// First we add a click event to the button we saw above
// Then, not just call this function
// We call this function and add ".bind()"
// Then we replace whatever we want to pass to the function
// Now, inside this "newTweenSet" function, "this" will point to "newTween"
$('netTween_set').addEvent('click', (newTween));
Therefore, now let’s look at the function above, “this” is now equivalent to “newTween” (which is our tween object).
Now let's put these things together and look at them:
Reference code:
// Here is our function
var newTweenSet = function() {
// Since we used bind, now "this" points to "newTween"
// Therefore, the equivalent here is:
// ('width', '300px')
('width', '300px');
}
('domready', function() {
// First assign our element to a variable
var newTweenElement = $('newTween');
// Then we new one and assign a value to a variable
var newTween = new (newTweenElement);
// Now add our event and bind newTween and newTweenSet
$('netTween_set').addEvent('click', (newTween));
});
Start a gradient effect
Now that we have set up all our gradient objects, our function is outside the domready event, we have also learned how to set a stylesheet property through the .set(); method, let's take a look at the actual gradient. Starting a gradient is very simple, very similar to .fade();. There are two ways to use .start(); method:
Make an attribute value change from the current value to another value
Set an attribute value first, and then change to another value
Reference code:
// This will change the width from the current existing value to 300px
('width', '300px');
// This will first set the width (width) to 100px and then change to 300px
('width', '100px', '300px');
Now you can start this gradient inside a function by using the .start(); method. If you use the .bind(); method bound to the function, you can use "this".
The above are all the gradients so far...
Nevertheless, there is still much to say about the gradient effect. For example, if you want to "gradient" multiple stylesheet properties at once, you can use the .morph(); method. You can also use transition libraries to change them for transitions. But this tutorial is long enough, so let's leave these to you later.
Tween's quick way
We usually start with the basics, but MooTools 1.2 only provides such an excellent quick way to tween, and they are so simple to use that I can't help but start here.
.tween();
A tween is a smooth change between two style attribute values. For example, by tween you can smoothly change the width of the div from 100 pixels to 300 pixels.
Reference code:
Copy the codeThe code is as follows:
// Create a new function
var tweenerFunction = function() {
// Select the element you want to use gradient
// Then add .tween
// Finally declare the attributes and values you want to change
$('tweener').tween('width', '300px');
}
('domready', function() {
// Add an event to a button here
// Initialize this gradient when clicked
// and call our gradient function
$('tween_button').addEvent('click', tweenerFunction);
});
Corresponding to the above code, our HTML code should look like this:
Reference code:
Copy the codeThe code is as follows:
<div ></div>
<button >300 width</button>
.fade();
This method allows you to smoothly adjust the opacity of an element. This is almost exactly the same as the example above:
Reference code:
Copy the codeThe code is as follows:
// Create a new function
var tweenFadeFifty = function() {
// Create your selector here
// Then add .fade
// Finally declare a value between 0 and 1 (0 means invisible, 1 means fully visible)
$('tweener').fade('.5');
}
('domready', function() {
// Add an event to the button here
// Initialize this gradient when clicked
// and call our gradient function
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});
Reference code:
Copy the codeThe code is as follows:
<div >
<button >Fade to fifty percept opacity</button>
.highlight();
Highlight is a very clear (and extremely useful) gradient shortcut method, which provides two functions:
Use it to smoothly change to a different background color
Set a different background color directly, and then smoothly change to another background color
These are very useful when creating user feedback. For example, you could have an element flash when something is selected, or you change the color and then flash again when it is saved or closed. This has a lot of options and is very simple and easy to use. In this example, let's create two divs and add two types of highlight methods:
Reference code:
Copy the codeThe code is as follows:
// Create a function
var tweenHighlight = function(event) {
// We used it here, this is the parameter passed from this function
// This means "the target (source) of the trigger event"
// Because this effect is applied to the element that triggers the event
// So we don't need to create a selector
// Note: addEvent will automatically pass the event object as a parameter into this calling function
// ... Very convenient
('#eaea16');
}
// Create a function
// You need to pass in a parameter
// Since this function is called in an event (event)
// This function will be automatically passed into the event object
// Then you can reference this element through .target
// (Target element of event)
var tweenHighlightChange = function(item) {
// Here we don't use a color, but add a comma to separate the second one
// This will set the first color and then change to the second color
('#eaea16', '#333333');
}
('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});
Reference code:
Copy the codeThe code is as follows:
<div ></div>
<div ></div>
Shortcut method example
Here are some quick ways to get the effect online. You can click these buttons in different orders and notice their changes:
Reference code:
Copy the codeThe code is as follows:
var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function() {
$('tweener').tween('width', '100px');
}
// .fade can also accept 'out' and 'in' as parameters, equivalent to 0 and 1
var tweenFadeOut = function() {
$('tweener').fade('out');
}
var tweenFadeFifty = function() {
$('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in');
}
var tweenHighlight = function(event) {
('#eaea16');
}
('domready', function() {
$('tween_button').addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover',tweenHighlight);
});
Reference code:
Copy the codeThe code is as follows:
<div ></div><br />
<button >300 width</button>
<button >100 width</button>
<button >Fade Out</button>
<button >Fade to 50% opacity</button>
<button >Fade In</button>
Reference code:
Copy the codeThe code is as follows:
#tweener {
height: 100px
width: 100px
background-color: #3399CC
}
Move the mouse up to see the first type of eye-catching effect.
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
More Gradients (Tween)
Create a new gradient
If you want to be more flexible and more control over your changes, you may want to create a new shape change animation to replace those shortcuts. Note that using "new" is used to create a new instance:
Reference code:
Copy the codeThe code is as follows:
('domready', function() {
// First we assign the element to change to a variable
var newTweenElement = $('newTween');
// Now we create an animation event and pass this element into
var newTween = new (newTweenElement);
});
Reference code:
Copy the codeThe code is as follows:
<!-- This is the element we want to apply the gradient effect -->
<div ></div>
<!-- This is the button to start the gradient effect -->
<button >Set</div>
Set styles through gradient
Once you create a new gradient from an element, you can easily set a style property via the .set() method. This is the same as the .setStyle() method.
Reference code:
Copy the codeThe code is as follows:
var newTweenSet = function() {
// Pay attention to the use of "this"
// Learn how to use "this"
('width', '300px');
}
As we learned before, we want to separate our function from the domready event, but in this example we want to create a gradient in the domready event and then reference it externally. We have mastered a way to pass parameters outside of domready (by creating an anonymous function and passing one), and today we are going to learn a better way to pass gradient objects in Moo (this is not to say that anonymous functions are no longer suitable at any time).
.bind();
Through .bind();, we can make the "this" in a function equal to the parameter:
Reference code:
Copy the codeThe code is as follows:
// First we add a click event to the button we saw above
// Then, not just call this function
// We call this function and add ".bind()"
// Then we replace whatever we want to pass to the function
// Now, inside this "newTweenSet" function, "this" will point to "newTween"
$('netTween_set').addEvent('click', (newTween));
Therefore, now let’s look at the function above, “this” is now equivalent to “newTween” (which is our tween object).
Now let's put these things together and look at them:
Reference code:
Copy the codeThe code is as follows:
// Here is our function
var newTweenSet = function() {
// Since we used bind, now "this" points to "newTween"
// Therefore, the equivalent here is:
// ('width', '300px')
('width', '300px');
}
('domready', function() {
// First assign our element to a variable
var newTweenElement = $('newTween');
// Then we new one and assign a value to a variable
var newTween = new (newTweenElement);
// Now add our event and bind newTween and newTweenSet
$('netTween_set').addEvent('click', (newTween));
});
Start a gradient effect
Now that we have set up all our gradient objects, our function is outside the domready event, we have also learned how to set a stylesheet property through the .set(); method, let's take a look at the actual gradient. Starting a gradient is very simple, very similar to .fade();. There are two ways to use .start(); method:
Make an attribute value change from the current value to another value
Set an attribute value first, and then change to another value
Reference code:
Copy the codeThe code is as follows:
// This will change the width from the current existing value to 300px
('width', '300px');
// This will first set the width (width) to 100px and then change to 300px
('width', '100px', '300px');
Now you can start this gradient inside a function by using the .start(); method. If you use the .bind(); method bound to the function, you can use "this".
The above are all the gradients so far...
Nevertheless, there is still much to say about the gradient effect. For example, if you want to "gradient" multiple stylesheet properties at once, you can use the .morph(); method. You can also use transition libraries to change them for transitions. But this tutorial is long enough, so let's leave these to you later.
Learn more...
Download a zip package with what you need to start
Contains a library of MooTools 1.2, the example above, an external JavaScript file, a simple HTML file, and a CSS file.
As before, your best resource is the documentation for MooTools 1.2.
- about.tween();Method information
- Also, browse.morph();Methods andtransitionsLibrary