Jump to content
Search Community

GSAP Demos / Snippets / Pens

Chrysto 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

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

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

  • 2 weeks later...
  • 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

  • 2 weeks later...

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

  • 3 weeks later...
  • 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...

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