Jump to content
Search Community

Flip Clock Effect

Linho 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 GSAP Experts! :)

 

I'm struggling to create a Flip Clock Effect like this in GSAP: 

 

 

Is somehow possible to realize this "flip down" effect in GSAP?

 

I'm looking forward to your ideas! :)

 

Cheers

Linho

 

 

Link to comment
Share on other sites

The actual animation in a flip clock is probably one or 2 lines of GSAP code that is going to animate something in 3D around the x axis like:

 

TweenLite.to(cardBottom, 1, {rotationX:90});

 

and about 50 to 100 lines of JavaScript to figure out the proper timing, which cards to flip, how to visually update the numbers that are shown, etc. In addition there are dozens of ways to set up the HTML and CSS to make it work as well.

 

Below is JavaScript Flip-Clock that uses CSS for the animation. The actual "animation" is handled by one of line of code that adds a single css class (again the animation is a super small part of the clock). 

 

See the Pen gLdRYd?editors=0010 by brucekean (@brucekean) on CodePen

 

A search of "flip clock" on CodePen yields nearly 300 results

https://codepen.io/search/pens/?depth=everything&limit=all&order=popularity&page=1&q=flip+clock&show_forks=false

Kind of interesting to see all the different approaches. I'd say study a few and use the one that is the easiest to conform to your needs / design. No point in re-inventing the wheel.

 

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Thank you a lot!

 

I don't want to build a flip clock itself, I rather want to build this effect for some kind of a fake countdown timer. I want to have "10 days left", where it browses down really quick from 20 to 10 each page load.

 

My main problem is that it seems impossible to only animate the top part of the number. I'm quite sure I have to double add each number to my DOM?

  • Like 1
Link to comment
Share on other sites

Yeah, you will most likely need quite a few DOM Elements. A top and bottom for the current number and a top and bottom for the next number.

In the example I provided this is the HTML for just 1 digit

 

 <div class="card js-hour-first">
      <div class="panel panel-top panel-in--shadow">
        <span class="number">0</span>
      </div> 
      <div class="panel panel-btm panel-in">
        <span class="number number--btm">0</span>
      </div>  
      <div class="panel panel-top panel-out">
        <span class="number">0</span>
      </div>   
      <div class="panel panel-btm panel-out--shadow">
        <span class="number number--btm">0</span>
      </div>    
    </div>

 

Everywhere you see a 0 he is using JavaScript to update value with appropriate number for the current and next number:

 

/* Updates number element with current time digit */
function updateNumber( numberElementArray, digitArray, arrayPosOne, arrayPosTwo, arrayPosThree ) {
  numberElementArray[arrayPosOne].innerHTML = digitArray[arrayPosThree];
  numberElementArray[arrayPosTwo].innerHTML = digitArray[arrayPosThree];
}

 

Here's another example from the search results I provided

 

See the Pen vokci by Gerwinnz (@Gerwinnz) on CodePen

 

This person is dynamically creating a new top for the number being revealed each time the current top flips down:


 

// make el to sit behind the top digit
            var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'})
            var $newMinFront = $newMinTop.getElement('div.front');
            var $newMinBack = $newMinTop.getElement('div.back');
            $newMinFront.set('text', minText);
            $minWrap.adopt($newMinTop);
            // start the animation
            $minFront.setTransform('rotateX(180deg)');
            $minBack.setTransform('rotateX(0deg)');
            $minBack.setStyle('zIndex', 40);

 

There is no getting around the fact that regardless of which approach you take, its a fairly complicated effect, and not the type of thing we can just create for you from scratch. We really have to keep our support focused on the GSAP API and can't go too far down the path of getting into all the setup, logic and DOM manipulation needed to build a flip-clock effect. I understand you don't need a clock necessarily but getting any digits to change in this fashion is a bit of work. 

 

If you have a simple demo and need some help with a question relating to GSAP, please post it and we will do our best to help. Unfortunately, I couldn't find any existing examples that already use GSAP.

 

 

 

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

@Carl Can you post simple demo of just flip effect with GSAP? I tried using your snippet and tweaked perspective but I couldn't get it work either. And none of the pens you are suggesting use GSAP. I don't know if OP has same confusion, but just letting you know.

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