New Pen: Header scroll effect

Recently I had to develop one-pager, that had complicated animation in the header, that should progress forward/backward on page scroll. Because the page had to be very light, I decided to drop jQuery and TimelineMax and include only TweenLite and CSSPlugin. Here is the result:

See the Pen Page Header animation by Chrysto (@bassta) on CodePen.

The script is very compact, easy to use and modify, cross-browser ( Actually DOMContentLoaded is supported IE9+ ).

Have fun forking and modifying it.

Onepage scrolling concept

Staggering animations with TweenLite


Wait, wasn’t there TweenMax staggerTo method? Yes, there is. I use staggered animations in a lot of my projects, but I also like to keep my javascript files as light as possible. So, for one my latest projects I needed to stagger animations, and also to have proper event handling system, but keep all as light as possible ( without including TweenMax ). So I end up digging into TweenMax code, and created this little snippet ( basically, just took the TweenMax code and modified it a bit, so it can be used standalone ) ;

var TM = {};

 TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
 stagger = stagger || 0;
 var delay = vars.delay || 0,
 a = [],
 finalComplete = function() {
 if (vars.onComplete) {
 vars.onComplete.apply(vars.onCompleteScope || this, arguments);
 onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || []);
 l, copy, i, p;
 if (!$.isArray(targets)) {
 if (typeof(targets) === "string") {
 targets = TweenLite.selector(targets) || targets;
 if (TweenLite._internals.isSelector(targets)) {
 targets = [], 0);
 l = targets.length;
 for (i = 0; i < l; i++) {
 copy = {};
 for (p in vars) {
 copy[p] = vars[p];
 copy.delay = delay;
 if (i === l - 1 && onCompleteAll) {
 copy.onComplete = finalComplete;
 a[i] = new TweenLite(targets[i], duration, copy);
 delay += stagger;
 return a;

It can be perfect solution for banners, where the size of the javascript files is so important. Use it just like you would use TweenMax staggerTo() method.

TM.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

Here is a codepen

See the Pen TweenLite staggerTo by Chrysto (@bassta) on CodePen.

Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin

Snippet: how to create neat fullscreen slides effect. It can be perfect for landing and portfolio single-page websites.

Edit: it was featured on the first page of Codepen. Thank you all! blurred header effect

Before/After effect with TweenLite and Draggable

Hi guys, here is a new effect – how to create before/after image viewer with TweenLite and Draggable. You can drag it, click it, or have external navigation. It works on touch devices, also!

View demo

Update: It was featured on the front page of codepen

Single page website effect

Detect click event outside element

In a recent project, I had to deal with this task – writing and event handler to detect click events outside an element.  The first thing that came to mind was listening for click events somewhere higher in the DOM hierarchy ( can be parent element, or the window object for example ). Then, I can determine the element that triggered the event and all the elements, through the event bubble .

Here is the final result:

See the Pen Click outside element by Chrysto (@burnandbass) on CodePen

Continue Reading

Bulgarian translation to Pulse CMS v 2.5.5


Pulse CMS have always been my choice when it comes to small projects and one-page websites. It is easy to set up ( no database ) and has everything your clients need – easy way to edit content, gallery, contact form, blog and stats. If you haven’t heard about it, check the demo. You can include it into your own, static html/php template, or use it with the responsive front-end template that comes with it. The admin area is easy to translate – you just need to edit the pulsepro/includes/lang.php file. Today’s freebie is bulgarian translation to the admin area. You can download it from here. If you’ve purchased Pulse CMS, you can just drop the lang.php file into pulsepro/includes folder and override default language file.

Continue Reading