Skip to content

✨ feat(decrypted-text): add 'click' animationOn mode & rename "both" mode to "InViewHover" mode#895

Open
angelarreolagg wants to merge 1 commit intoDavidHDev:mainfrom
angelarreolagg:feat/decrypted-text-on-click
Open

✨ feat(decrypted-text): add 'click' animationOn mode & rename "both" mode to "InViewHover" mode#895
angelarreolagg wants to merge 1 commit intoDavidHDev:mainfrom
angelarreolagg:feat/decrypted-text-on-click

Conversation

@angelarreolagg
Copy link

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. Since we now have a third animation mode, the both option has been renamed to inViewHover.

Changes

  • Click mode added: handled re-rendering using a dedicated useEffect hook for that mode,
    avoiding ghost state update issues.
  • both renamed to inViewHover: with a third mode now available, the rename better reflects
    the actual behavior.

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

Component Demo — animateOn prop updated

  • click mode added.
  • both renamed to View & Hover with value changed to inViewHover.

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-02-25.at.2.51.56.mov

Verification

  • npm run build: passed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant