Skip to content

feat: add text slide animation for quotes #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rishabh8870 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add text slide animation for quotes #364

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions frontend/src/util/animation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@ const animations = {
}
}`,
},

text_slide: {
animation: `animation:text-slide 2s linear infinite alternate;`,

@coderabbitai coderabbitai Bot Dec 31, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, find the animation file and inspect its content
echo "=== Animation index.js content (lines 1-30) ==="
find . -path ./node_modules -prune -o -name "index.js" -path "*/animation/*" -type f -print | head -5

Repository: zhravan/github-readme-quotes

Length of output: 158

🏁 Script executed:

# Check the specific file
cat -n frontend/src/util/animation/index.js | head -30

Repository: zhravan/github-readme-quotes

Length of output: 1161

🏁 Script executed:

# Find imports and usages of the animations module
echo "=== Imports of animation module ==="
rg -n "from ['\"].*animation['\"]|import.*animation" --type js --type jsx --type ts --type tsx

echo -e "\n=== Usage of animations object ==="
rg -n -C3 "animations\.(text_slide|grow_out_in|default|[a-z_]+)" --type js --type jsx --type ts --type tsx | head -50

Repository: zhravan/github-readme-quotes

Length of output: 216

🏁 Script executed:

# Check how the animation strings are used - are they inline CSS or something else
echo "=== Where animation values are applied ==="
rg -n "animation:" -C2 --type js --type jsx --type ts --type tsx | head -80

Repository: zhravan/github-readme-quotes

Length of output: 159

🏁 Script executed:

# Search for where animations might be imported or used, using broader patterns
echo "=== Search for 'animations' references ==="
rg -n "animations" --type js | head -50

echo -e "\n=== Look for jsx/tsx files ==="
find . -path ./node_modules -prune -o \( -name "*.jsx" -o -name "*.tsx" \) -type f -print

echo -e "\n=== Search in all text files for animations usage ==="
rg -n "animations\." | head -50

Repository: zhravan/github-readme-quotes

Length of output: 1196

🏁 Script executed:

# Check if there's a style tag or style application in the codebase
echo "=== Search for where keyframes or animations are applied ==="
rg -n "keyframes|style.*animation" --max-count 30

echo -e "\n=== Check main component files ==="
find . -path ./node_modules -prune -o -name "App.*" -o -name "main.*" -o -name "index.*" -type f -print | grep -E "(frontend|src)" | head -20

Repository: zhravan/github-readme-quotes

Length of output: 1825

🏁 Script executed:

# Check how the animation properties are used in layouts
echo "=== Layout file usage (around keyframes injection) ==="
cat -n frontend/src/util/layouts/index.js | sed -n '15,25p'

echo -e "\n=== Search for where template.animation.animation is used ==="
rg -n "template\.animation\.animation|animation\.animation" --max-count 20

echo -e "\n=== Look at complete layout template context ==="
cat -n frontend/src/util/layouts/index.js | sed -n '1,50p'

Repository: zhravan/github-readme-quotes

Length of output: 3711

🏁 Script executed:

# Check the backend layout as well for comparison
echo "=== Backend layout usage ==="
cat -n src/layouts/layout.js | sed -n '1,50p'

Repository: zhravan/github-readme-quotes

Length of output: 2164

Remove the "animation:" prefix from animation property values—they're redundantly injected into CSS selectors.

The animation value at line 22 (and line 8) includes animation: as a prefix: animation:text-slide 2s linear infinite alternate;. When injected via ${template.animation.animation}; in the layout template (frontend/src/util/layouts/index.js:16), this produces invalid CSS with double semicolons and a redundant property name.

Change to:

animation: `text-slide 2s linear infinite alternate;`,

This same issue exists in both the frontend (frontend/src/util/animation/index.js) and backend (src/animations/animation.js) versions.

🤖 Prompt for AI Agents 
In frontend/src/util/animation/index.js (lines 8 and 22) and also mirror the
same change in backend src/animations/animation.js, the animation values include
a redundant "animation:" prefix which causes invalid CSS when injected; remove
the literal "animation:" prefix so the values are just e.g. "text-slide 2s
linear infinite alternate;" (no leading property name), keeping the trailing
semicolon if desired, and update any other entries in these files that follow
the same pattern so injections like ${template.animation.animation} produce
valid CSS.

keyframes: `@keyframes text-slide{
0% {
transform: translateX(0);
}
100% {
transform: translateX(10px);
}
}`,
},
};

export default animations;