hold space bar locking

[ashura]

I have a problem in locking a hold space bar. Basically what I want to happen is that. Let say...If I have to hold space (in first initial state) to fill up the circle black color to white color, and then when it fills up it will lock up before 3s and that is around 2.5secs or 2.3secs. When I mean lock up the animation must fill up all the black colors to white by releasing the hold space. The same with vice versa as it fill down the white color so it will go back to black color again. 

 

The animation in fill up seems fine but in the fills down it seems something wrong about it. It waits for me to release hold space in fill down so it can animate to fill down...anyone care to explain how to change it? Also it affects with the text... Thanks anyone for the help 😆

The code is in below but here is the codesandbox. 
https://codesandbox.io/s/polished-moon-ylpoty?file=/src/CircleAnimation.jsx
 

This is the SCSS
 

.circle { 
  visibility: visible;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 135px;
  height: 135px;
  background: black;
  border-radius: 50%;
  position: fixed;
  overflow: hidden;
  border: 1px solid white;
  right: 5%;
  bottom: 5%;
  z-index: 301;

  .after {
    width: 100%;
    height: 0%;
    position: absolute;
    z-index: -1;
    background: white;
    bottom: 0;
    left: 0;
  }
}

And this is the handleKeyUp 

 

        const handleKeyUp = (event) => {
            if (event.key === ' ') {
                spacebarHeld = false;
                if (fillTween) {
                    if (fillTween.progress() < 2.5 / 3) {
                        fillTween.pause();
                        textRef.current.innerText = 'Hold to Still';
                        dropTween = gsap.to(afterRef.current, {
                            height: '0%',
                            duration: fillTween.progress() * 3,
                            onComplete: () => {
                                textRef.current.innerText = 'Hold to Live';
                                dropTween = null;
                            },
                        });
                        fillTween = null;
                    } else {
                        if (fillTween.progress() >= 1) {
                            fillTween.pause();
                            fillTween = null;
                        } else {
                            fillTween.eventCallback('onUpdate', () => {
                                if (!spacebarHeld && fillTween && fillTween.progress() < (2.5 / 3)) {
                                fillTween.pause();
                                const remainingDropDuration = (1 - fillTween.progress()) * 3;
                                dropTween = gsap.to(afterRef.current, {
                                    height: '0%',
                                    duration: remainingDropDuration,
                                    onComplete: () => {
                                        textRef.current.innerText = 'Hold to Live';
                                        dropTween = null;
                                    },
                                });
                                fillTween = null;
                                }
                            });
                        }
                    }
                } else if (!fillTween && !dropTween) {
                    textRef.current.innerText = 'Hold to Still';
                    dropTween = gsap.to(afterRef.current, {
                        height: '0%',
                        duration: 3,
                        onComplete: () => {
                            textRef.current.innerText = 'Hold to Live';
                            dropTween = null;
                            if (spacebarHeld) {
                                fillTween = gsap.to(afterRef.current, {
                                    height: '100%',
                                    duration: 3,
                                    onComplete: () => {
                                        textRef.current.innerText = 'Hold to Still';
                                        fillTween = null;
                                    },
                                });
                            }
                        },
                    });
                }
            }
        };

 

[ashura]

Adding these another one, which works the same but more different. Because this one does not stop the animation when you release in fill up at around 2.5s. 

 

import React, { useRef, useEffect } from 'react';
import { gsap } from 'gsap';

const Circle = () => {
  const circleRef = useRef(null);
  const afterRef = useRef(null);
  const textRef = useRef(null);
  let fillTween = null;
  let dropTween = null;
  let spacebarHeld = false;

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === ' ' && !dropTween) {
        spacebarHeld = true;
        textRef.current.innerText = 'Hold to Live';
        if (!fillTween) {
          fillTween = gsap.to(afterRef.current, {
            height: '100%',
            duration: 3,
            onComplete: () => {
              textRef.current.innerText = 'Hold to Still';
              fillTween = null;
            },
          });
        }
      }
    };

    const handleKeyUp = (event) => {
      if (event.key === ' ' && fillTween && fillTween.progress() < 2.5 / 3) {
        spacebarHeld = false;
        fillTween.pause();
        textRef.current.innerText = 'Hold to Still';
        dropTween = gsap.to(afterRef.current, {
          height: '0%',
          duration: fillTween.progress() * 3,
          onComplete: () => {
            textRef.current.innerText = 'Hold to Live';
            dropTween = null;
          },
        });
        fillTween = null;
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

  return (
    <div className="circle" ref={circleRef}>
      <div className="circle-text" ref={textRef}>
        Hold to Live
      </div>
      <div className="after" ref={afterRef}></div>
    </div>
  );
};

export default Circle;

 

[Rodrigo]

Hi,

 

I read this a few times and I'm not sure I totally get what you're trying to do here. 

 

I forked your example and removed everything that I considered unnecessary:

https://codesandbox.io/s/laughing-wind-txhhbm?file=/src/CircleAnimation.jsx

 

I don't know if this is closer to what you're looking for, but as I mentioned I'm not sure of what you're trying to do. If not please be more specific about what you're trying to achieve and instead of pasting code snippets, just add the link to a live demo as you also did.

 

Hopefully this helps.

Happy Tweening!

[ashura]

Oh thanks for the reply. I'm looking for to lock it up the fill animation upward (meaning it will stay white after it maximize all the black colors to white colors) 2.5seconds even if it release the hold spacebar because you must hold it in 3secs but you can release the space once it reach 2.5seconds. 

Now for the second part the fill-down color animation. It is to hold spacebar to fill down the color white to black meaning it will go down as the initial state...but it doesn't work that way because it is waiting for me to release the hold spacebar before it filled down the white color. That's my problem. And also I wanna get rid of bugs in the text as well but I can't...I feel its not right to use the proper change of "Hold to Still" and "Hold to Live" as I think its not way smooth as I space it. Or I think it is already fine. 

[ashura]

Hope you can help me here thank you sir @Rodrigo

[Rodrigo]

Hi,

 

We don't have the time resources to create custom solutions for our users, especially in cases like this where the problem lays in JS logic and not a GSAP problem.

 

What I was able to do is kind of solve the logic issue with the key down/up stuff mostly. I removed everything related to the text and everything else for that matter. It seems to be working the way you need:

https://codesandbox.io/s/nostalgic-ptolemy-dyczch?file=/src/CircleAnimation.jsx

 

Hopefully this is enough to get you on the right direction.

Happy Tweening!