Jump to content
Search Community

Showcase website

BarryS 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,

 

I was looking at the showcase and came across this site: http://co3.lemouv.fr

 

I love it and can see where GSAP has been used amongst other cool things. I guess some of the animation is done with sprites, but can someone tell me how the glow on the hexagonal icons is done.

 

I've looked and can see that the icons are simply PNGs, but I can't work out how the glow is created. Is it possible to add a glow to a transparent PNG using GSAP?

 

Thanks in advance,

 

Barry

 

 

 

 

 

 

Link to comment
Share on other sites

that pulse effect is done with, css animations and keyframes...

 

if you inspect the hexagonal icon span tag... you will see that there is an animation property on it:

#main-content .layout .chips .chip.ready .ico-on {
       animation: 0.8s ease-out 0s normal none infinite halo;
}

and inspect further in their stylesheet you will see the animation property references halo, which is the name given to the keyframe:

@keyframes halo {
0% {
    opacity: 0;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

if you try changing the 0.8 to 0.1, you willl notice that the animation glow pulses faster

  • basically on that hexagonal it has 2 spans
  • one with a class of .on and .off
  • the .off always stays visible
  • and then the css animation property just animates the opacity of the .on span that has the the same image as .off, but with a glow on it
  • so when the .on span animates the opacity, you see the pulse effect

This same effect can be done with GSAP, which would be better since not all browsers support the css animation property and keyframe rule properly

 

you could have GSAP animate the opacity on and off of the hexagonal 2nd icon with a hover event, when hovered using yoyo:true (go back and forth) and repeat:-1 (infinite)

TweenMax.to($(".ico.ico-on"), 0.8, {css:{autoAlpha:1}, repeat:-1, yoyo:true});

you can see a similar pulse effect on a box-shadow css property in GSAP here, scroll down to boxShadow: http://www.greensock.com/css3/ ... In that GSAP is animating the box-shadow property.. but GSAP can animate opacity quite easy

 

i hope the above gives you a better idea how they did that hexagonal pulse effect on that website link from above?

 

you can see how GSAP can accomplish this very easy, and have it be cross browser, with less code... :)

Link to comment
Share on other sites

Hi Jonathan and Bassta,

 

Thank you for your explanations. I was looking at it thinking it was far more complicated than you have both explained. I must admit I haven't ventured into using CSS animation before due to the browser inconsistencies, so to be able to simply do it using GSAP is great.

 

I feel a bit dumb for not thinking of simply fading the PNG in and out as I use fading all the time. But I'm glad I asked.

 

Cheers :D

  • Like 1
Link to comment
Share on other sites

Cheers mate,

 

If you're not familiar with Chrome developer tools I suggest you reading http://www.html5rocks.com/en/tutorials/developertools/part1/ and start using them. You can observe element, change the DOM, see computed styles... One other catch - if you're used to digg into other people's code, use http://jsbeautifier.org/ to re-format obfusticated code. I love reading code written by smarter programmers than me ( this happens to be 90% of all the code I read ) so this two utilities comes very helpful :) 

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.
×
×
  • Create New...