Thanks to visit codestin.com
Credit goes to github.com

Skip to content

✨ feat(decrypted-text): add click/toggle mode & fix inViewHover re-trigger bug#895

Open
angelarreolagg wants to merge 5 commits intoDavidHDev:mainfrom
angelarreolagg:feat/decrypted-text-on-click
Open

✨ feat(decrypted-text): add click/toggle mode & fix inViewHover re-trigger bug#895
angelarreolagg wants to merge 5 commits intoDavidHDev:mainfrom
angelarreolagg:feat/decrypted-text-on-click

Conversation

@angelarreolagg
Copy link

@angelarreolagg angelarreolagg commented Feb 25, 2026 •
edited
Loading

Fixes #891

Summary

This PR adds a click mode to the DecryptedText component (part of the TextAnimations collection), allowing the animation to trigger when the user clicks on the element. A clickMode prop is also introduced, supporting once (decrypt on first click, stays decrypted) and toggle (alternates between encrypted/decrypted on each click). Since we now have a third animation mode, the both option has been renamed to inViewHover.

Important

A pre-existing bug was also fixed in this pass: when using animateOn="both", the hover animation would silently fail after the in-view animation completed. The root cause was both triggers sharing the same isHovering boolean — once the view animation set it to true, subsequent hover events produced no state change and the effect never re-fired. This was resolved by splitting animation control into dedicated, independent functions (triggerDecrypt, triggerReverse) backed by more granular state (isAnimating, isDecrypted, direction).

Important

Screen.Recording.2026-03-01.at.19.03.09.mov

Changes

  • Click mode added: animateOn="click" starts the text in an encrypted state and decrypts on click.
  • clickMode prop added: once (default) decrypts once and stays; toggle re-encrypts on the next click.
  • both renamed to inViewHover: with a third mode now available, the rename better reflects the actual behavior.
  • Bug fix: hover animation no longer silently fails after the in-view animation has already run.
  • Code example updated: src/constants/code/TextAnimations/decryptedTextCode.js now includes an example using animateOn="click" with clickMode="toggle".

Applied changes in:

  • src/content/TextAnimations/DecryptedText/DecryptedText.jsx
  • src/tailwind/TextAnimations/DecryptedText/DecryptedText.jsx
  • src/ts-default/TextAnimations/DecryptedText/DecryptedText.tsx
  • src/ts-tailwind/TextAnimations/DecryptedText/DecryptedText.tsx
  • src/constants/code/TextAnimations/decryptedTextCode.js

Component Demo — animateOn prop updated and clickMode control added

  • click mode added.
  • both renamed to View & Hover with value changed to inViewHover.
  • new clickMode preview control added

Applied changes in:
src/demo/TextAnimations/DecryptedText.jsx

Registry artifacts regenerated

  • public/r/DecryptedText-JS-CSS.json
  • public/r/DecryptedText-JS-TW.json
  • public/r/DecryptedText-TS-CSS.json
  • public/r/DecryptedText-TS-TW.json

Demo

Screen.Recording.2026-03-01.at.19.27.13.mov

Verification

  • npm run build: passed

@angelarreolagg angelarreolagg mentioned this pull request Feb 25, 2026
Open
1 task
@DavidHDev
Copy link
Owner

DavidHDev commented Mar 1, 2026

That's good, but your code does not do what the issue requested.

The click mode should have the text start out as encrypted, and only decrypted after the first click.

Please read the issue again and update your implementation.

@angelarreolagg angelarreolagg changed the title ✨ feat(decrypted-text): add 'click' animationOn mode & rename "both" mode to "InViewHover" mode ✨ feat(decrypted-text): add click/toggle mode & fix inViewHover re-trigger bug Mar 2, 2026
@angelarreolagg
Copy link
Author

angelarreolagg commented Mar 2, 2026

Hey David, thanks for the feedback! English isn't my first language so I just saw "click" and assumed that was the solution — my bad 😅. I re-read the issue and worked on a proper implementation.

While doing so, I noticed that inViewHover (formerly both) had a bug present since the original version, so I fixed that as well — it was actually solved indirectly by the refactor needed to handle the new click mode correctly.

This new version addresses the issue as requested and also ships a clickMode prop with once and toggle support as a small bonus. The PR description has been updated to reflect all the changes. Second time's the charm! 🤞

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEAT]: text-animations/decrypted-text: Decrypt text on click

2 participants

@angelarreolagg @DavidHDev