Text animation with TweenMax

In this quick tip I’will show you how you can easily animate text with TweenMax.

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 1 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index2.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 2 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index3.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 3 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index4.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 4 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index5.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 5 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index6.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 6 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index7.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 7 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index8.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 8 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index9.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 9 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index10.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 10 [/button]

[button url=”http://bassta.bg/downloads/tweenmax-text-animations.zip” style=”blue” size=”small” type=”square” icon=”download” target=”_blank”] DOWNLOAD ALL DEMOS [/button]

Continue reading “Text animation with TweenMax”

Get page scrolling percentage

For some scrolling effects, you may need to know how much percent the page is scrolled. All we need is to know for that is the window height, window top position and document height.

[button url=”http://bassta.bg/demos/scroll-percent/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/scroll-percent.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]

Continue reading “Get page scrolling percentage”

Simple fade in/fade out slideshow with TweenLite

In this tutorial I will show you how to create simple slideshow using TweenLite.

[button url=”http://bassta.bg/demos/tweenlite-slideshow/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/tweenlite-slideshow.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]

Continue reading “Simple fade in/fade out slideshow with TweenLite”

rangeToPercent() and percentToRange()

These are two very helpful JavaScript functions if you need to work with ranges and percents.

rangeToPercent

function rangeToPercent(number, min, max){
   return ((number - min) / (max - min));
}

This function returns percentage of a number in a given range. For example rangeToPercent(40,20,60) will return 0.5 (50%). rangeToPercent(34,0,100) will return 0.34 (34%)

percentToRange

function percentToRange(percent, min, max) {
   return((max - min) * percent + min);
}

This function returns number that corresponds to the percentage in a given range. For example percentToRange(0.34,0,100) will return 34.

 

Credits:

Original functions are part of  MathUtils Class by Bruno Imbrizi written in ActionScript3.

Restrict a number to a range

This is JS syntax of the AS3 bound() function I use for my flash projects.

function bound(_number, _min, _max){
	return Math.max(Math.min(_number, _max), _min);
}

The function takes 3 parametes:

_number is the number you want to restrict.

_min is the minimal value.

_max is the maximum value.

If the _number is less than _min, the function returns the _min value. If the _number is greater than _max, the function returns _max value. This is a way to ensure you number will be within this minimum and maximum bounds.

Example:

console.log(boundrary(10,5,15));   // returns 10
console.log(boundrary(2,5,15));    // returns 5
console.log(boundrary(100,5,15));  // returns 15

[highlight]Update: 14 aug 2013 [/highlight]

The snippet is can be found at javascriptcookbook website:   http://www.javascriptcookbook.com/article/Restrict-a-number-to-a-range

Smooth page scrolling with TweenMax

On this tutorial I will show you how to create a smooth scrolling for your website. We’ll be using TweenMax and the ScrollToPlugin.

[button url=”http://bassta.bg/demos/smooth-page-scroll/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/smooth-page-scroll.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]

Continue reading “Smooth page scrolling with TweenMax”

Get mousewheel event delta

If you need to get the scroll of the mouse wheel ( mouse event delta ) you can use this script:

$(window).on("mousewheel DOMMouseScroll", function(event){

	var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
	console.log(delta);

	event.preventDefault();

});

You can also check the jQuery Mousewheel Plugin by Brandon Aaron

Override default jQuery animate() method with GSAP

When it comes to animation, Greensock Animation Platform (GSAP) is one of the most popular platforms around. It is available in both JavaScript and ActionScript with similar syntax and is amazingly fast. Actually, it performs up to 20 times faster than than jQuery’s native animate() method! It is very easy to use it in your project, thanks to greensock’s awesome plugin that overrides default jQuery animate() method and use TweenLight/TweenMax under the hood. All you have to do is to include TweenMax and the plugin and you’re done.



Once you’ve included the plugin you’re able to use the full power ot TweenMax – it is possible to tween CSS properties such as color, box-shadow, text-shadow, 2D and 3D transforms, background position and many more. GSAP use the same syntax as jQuery and takes care of browser specific code, such as vendor prefixes.