Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chrysto

GSAP Demos / Snippets / Pens

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

Hi Guys,

 

A lot of times, when I see some cool effects on webpage, I try to recreate them for a couple of minutes with TweenMax, without digging the webpage code. I create these little "snippets", and later I play with them. I start this topic as a place to share such a snippets / little pieces of code :)

 

Here are two from this week:
 

See the Pen eIyrd by burnandbass (@burnandbass) on CodePen

 - header animates on scroll ( see fullscreen http://cdpn.io/eIyrd ) ;
 

See the Pen Eicla by burnandbass (@burnandbass) on CodePen

 - one page website concept ( see fullscreen http://cdpn.io/Eicla )

 

and an old one:

 

See the Pen cvdjG by burnandbass (@burnandbass) on CodePen

 - lava-lamp like menu concept ( see fullscreen http://cdpn.io/cvdjG )

 

All my code is released under WTFPL license, so free to modify/distribute it :)

 

It would be great if more people share such a snippets in this topic ;)

  • Like 6
Link to comment
Share on other sites

Great stuff Chrysto!!

 

My humble additions would be the 3D Preloader Spinner:

 

Editor:

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

 

Full screen:

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

 

And a circular images preloader using canvas to draw the circle. The preloading though is being done with David DeSandro's Images Loaded, that takes care of the heavy lifting and can be used with JQuery's deferred object. The rest (the simplest part 8-) of course) is of my authoring and uses GSAP:

 

Editor:

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

 

Full Screen:

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

 

Also I was working to port this hover effects to GSAP but other stuff came along the way, so as soon as I have time I'll get back with it.

 

Best,

Rodrigo.

  • Like 7
Link to comment
Share on other sites

  • 3 weeks later...

Nice job, Jamie!

Link to comment
Share on other sites

Hi guys, I haven't been very active recently, but for the last month ( and next two months ) are my final exams.. After 5 very hard years in university, at the age of 24, I'm going to graduate - major in Law, and no single loan taken ( paid myself all fees, books, semesters and rent ), all thanks to freelance work at nights, using GSAP since night one :) This wouldn't be possible without the great community behind Greensock and Jack itself. Thank you all one more time! 

 

I just stumbled upon an code I wrote for a friend, and I thought the effect would be useful to somebody, here it is:
 

See the Pen hCGEb by bassta (@bassta) on CodePen

 

 

And here is one more:

 

See the Pen aEkwL by bassta (@bassta) on CodePen

- fullscreen background image parallax idea

  • Like 5
Link to comment
Share on other sites

Hi Guys, here is a simple before/after image viewer with TweenLite + Draggable:

 

See the Pen Fypuw by bassta (@bassta) on CodePen

  • Like 3
Link to comment
Share on other sites

That's really cool, Chrysto. Nice work. 

Link to comment
Share on other sites

 

 

I just stumbled upon an code I wrote for a friend, and I thought the effect would be useful to somebody, here it is:

 

See the Pen hCGEb by bassta (@bassta) on CodePen

 

 

 

Nice one, might come handy as more and more html5 banners are being trafficked.

Thanks!

Link to comment
Share on other sites

  • 2 weeks later...

Here's a simple code that uses rotation and onUpdate to detect collision detection even with elements that are not "colliding" but simply align.

 

See the Pen BwKdo by netgfx (@netgfx) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Wow there are some cool examples! I'll try and start putting stuff on CodePen too.

 

Hi, I started to play around with GSAP when it was in beta. I made this animation, code on Github, after watching Lee Brimelow's video. I'm getting back to GSAP now and really looking forward to it and checking out and sharing some fun stuff in the community.

Link to comment
Share on other sites

Hi Kaplan,

 

Great to have you around. As you can probably tell we have a very active community around here. The more folks participating, sharing and helping the better.

 

Happy Tweening!

 

Carl

Link to comment
Share on other sites

  • 2 weeks later...

See the Pen iIskw by bassta (@bassta) on CodePen

- medium.com like header effect. When scrolling, I disable pointer events - get MUCH BETTER performance :) 

  • Like 2
Link to comment
Share on other sites

Hello.. I had posted these before but i guess since we are sharing snippets, i figured i put these browser checks here so they are in one place for easy access:

 

If you need to check Firefox, IE, Chrome, Opera 18+, and Touch Support.. without checking the user agent, which can be spoofed... Of course you could use Modernizr. But sometimes you just need less code to check for what browser is what..  :P

To target if the browser is Chromium based, use this:

// this targets Google Chrome and Opera 18+
var isChromium = window.chrome;
if(isChrome === true) {     
  // is chromium based browser
} else {      
  // not chromium based browser
}

To target if the browser is Google Chrome, use this:

var isChromium = window.chrome,    
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Google Inc.") {     
    // is Google chrome
} else {      
    // not Google chrome
}

To target if the browser is Opera 18 or above:

var isChromium = window.chrome,    
    vendorName = window.navigator.vendor;
if(isChromium === true && vendorName === "Opera Software ASA") {      
    // is Opera 18 or above
} else {      
    // not Opera 18 or above
}

Checking if Firefox:

// check if Firefox
var FF = !(window.mozInnerScreenX == null);
if(FF) {
     // is firefox
} else {
     // not firefox
}

Checking if IE and IE versions:

// check if IE8-11
var hasDocumentMode = (document.documentMode !== undefined),
    isIE8 = (isDocumentMode === 8),
    isIE9 = (isDocumentMode === 9),
    isIE10 = (isDocumentMode === 10),
    isIE11 = (isDocumentMode === 11);

if(hasDocumentMode) {
     if(isIE11){
           // browser is IE11
     } else if(isIE10){
           // browser is IE10
     } else if(isIE9){
           // browser is IE9
     } else if(isIE8){
           // browser is IE8
     }
}

If you really need to detect IE7, check for document.attachEvent:

// check if IE7
var isIE7 = (document.attachEvent !== undefined);
if(isIE7) {
     // browser is IE7
} else {
     // browser NOT IE7
}

Checking for Touch support:

// check if browser has touch support
var hasTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
if (hasTouch) {
     // has touch support
} else {
     // does NOT have touch support    
}

I hope these help! :)

  • Like 1
Link to comment
Share on other sites

I conjured a pen for replay/record canvas actions and the playback is managed with TimelineMax.

 

Currently it only supports canvas that is made with KineticJS (cause it is kinda awesome, and uses GSAP for its animations)

 

Check it out:

 

See the Pen DLrCy by netgfx (@netgfx) on CodePen

 

(Make sure to drag the box around after "record").

  • Like 3
Link to comment
Share on other sites

I was playing around with a pen that animates old school 8bit sprites.

Like your typical little italian guy's walk cycle.

 

See the Pen wdfEt by ccelestine (@ccelestine) on CodePen

  • Like 3
Link to comment
Share on other sites

Hi Cezaleo,

 

Very nice! Thanks for sharing.

Link to comment
Share on other sites

  • 3 weeks later...

@jamiejefferson Your swinging sign script is pretty awesome, I've forked it more than a few times playing with ideas.

 

You know that springy thing on the back of the door:

See the Pen dtKJA by ccelestine (@ccelestine) on CodePen

Link to comment
Share on other sites

Nice job Cyril!! and quite frantic may I say :wacko:

 

Had a lot of fun playing with the values and possibilities, this' definitely going to the bookmarks.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I hope you find this as interesting as i have.

 

It gives you an idea of what CSS properties within the current 24 hours which are animated. Data is ~24 hrs old and reflects usage across all channels and platforms, using Chrome's anonymous opt-in usage statistics. A property that is animated multiple times during a single page view is counted each time it animates.

 

CSS animated properties usage metrics - stack rank:

 

http://www.chromestatus.com/metrics/css/animated

 

:)

Link to comment
Share on other sites

  • 3 weeks later...

Nice job, Peleg. 

Love it.

 

-c

  • Like 1
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.
×