{"post":{"id":"67392678604f7080ae8fbef5","_id":"67392678604f7080ae8fbef5","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1731792832566/4882daa5-df83-45be-8f95-9e4be4d0da26.png","__typename":"PostCoverImage"},"slug":"easy-react-animation-with-gsap","readTime":8,"replyCount":2,"responseCount":3,"brief":"Introduction\nAre you tired of static web applications? Want to stand out from the v0.dev bot crowd with eye-catching animations? Popular websites like Awwwards, Dribbble, and Behance use GSAP to create engaging user interfaces.\nBy the end of this art...","subtitle":"Improve React User Interfaces with Simple GSAP Animations","isFeatured":true,"contributors":[{"_id":"653725c3a43f88e84f1b0ca5","name":"Hillary Ekpenyong","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1698112964134/eaf19834-bc41-456d-b331-9b96e9340284.png","username":"ChefEka","__typename":"User"},{"_id":"663a2c44628e513ea163d1df","name":"ProCoders","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1731319865126/d1217e83-334f-41f0-9a5d-f8338ef39282.png?w=500&h=500&fit=crop&crop=entropy&auto=compress,format&format=webp","username":"Valechna","__typename":"User"},{"_id":"66fd4ffdf4521d6c62ba85be","name":"Temilola Sadeju","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1727877117539/8e51df49-384f-4a8d-96f9-6025b4ddd0d5.png","username":"Temi-rosh","__typename":"User"}],"bookmarked":false,"views":159,"url":"https://greyboyle.hashnode.dev/easy-react-animation-with-gsap","totalReactions":76,"title":"Easy React Animation with GSAP","dateAdded":"2024-11-16T23:10:48.209Z","cuid":"cm3ks791t000409jr012x91sw","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","seo":{"title":"Easy React Animation with GSAP","description":"Improve React User Interfaces with Simple GSAP Animations","__typename":"SEO"},"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1731798555604/363ac675-a8dd-4abe-9485-eb08d8c12b43.png","__typename":"OpenGraphMetaData"},"author":{"_id":"649592595f97b37588b8c593","name":"Graham Boyle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1718123293344/pvjPr3QB-.jpg","isPro":false,"username":"GreyBoyle","__typename":"User","tagline":"I love learning how things work, I write about it sometimes."},"coAuthors":[],"series":null,"tags":[{"_id":"56a9022e9095f2cd1d3ee204","logo":null,"name":"GSAP","slug":"gsap","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744721958ef13879b94cad","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607082785538/EryuLRriM.png","name":"JavaScript","slug":"javascript","__typename":"Tag"},{"_id":"56744723958ef13879b955a9","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607083054200/qEk2BI11Dk.png","name":"Beginner Developers","slug":"beginners","__typename":"Tag"},{"_id":"5f4ebbb150b5c61ec6ef4ad2","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607093541067/JnBZUjK8b.png","name":"Tailwind CSS","slug":"tailwind-css","__typename":"Tag"}],"publication":{"_id":"652ee4db10ce1729cebad250","url":"https://greyboyle.hashnode.dev","canonicalURL":"https://greyboyle.hashnode.dev","title":"Graham Boyle's Blog","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"#f3f3f3","metaTags":null,"isTeam":false,"domainInfo":{"hashnodeSubdomain":"greyboyle","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"67395c5941247afe94a24156","author":{"_id":"653725c3a43f88e84f1b0ca5","name":"Hillary Ekpenyong","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1698112964134/eaf19834-bc41-456d-b331-9b96e9340284.png","isPro":false,"username":"ChefEka","__typename":"User"},"content":{"html":"

💝

\n","markdown":"💝","text":"💝\n","__typename":"Content"},"dateAdded":"2024-11-17T03:00:41.976Z","stamp":"cm3l0ewdz000609lbe465aqkc","totalReactions":2,"__typename":"Comment","replies":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"},{"node":{"id":"6739727d8869aa8d21df86a1","author":{"_id":"66fd4ffdf4521d6c62ba85be","name":"Temilola Sadeju","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1727877117539/8e51df49-384f-4a8d-96f9-6025b4ddd0d5.png","isPro":false,"username":"Temi-rosh","__typename":"User"},"content":{"html":"

This is amazing!

\n","markdown":"This is amazing!","text":"This is amazing!\n","__typename":"Content"},"dateAdded":"2024-11-17T04:35:09.030Z","stamp":"cm3l3sd46000209l6294ga2az","totalReactions":2,"__typename":"Comment","replies":{"edges":[{"node":{"id":"6739a015396394d51ad32e81","author":{"_id":"649592595f97b37588b8c593","name":"Graham Boyle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1718123293344/pvjPr3QB-.jpg","isPro":false,"username":"GreyBoyle","__typename":"User"},"content":{"html":"

thank you!

\n","markdown":"thank you!","text":"thank you!\n","__typename":"Content"},"dateAdded":"2024-11-17T07:49:41.078Z","stamp":"cm3laqjbp001k09jwc5qtb09e","totalReactions":0,"__typename":"Reply"},"__typename":"CommentReplyEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"},{"node":{"id":"673ca4cfcab1bd8821f5dcba","author":{"_id":"663a2c44628e513ea163d1df","name":"ProCoders","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1731319865126/d1217e83-334f-41f0-9a5d-f8338ef39282.png?w=500&h=500&fit=crop&crop=entropy&auto=compress,format&format=webp","isPro":false,"username":"Valechna","__typename":"User"},"content":{"html":"

Thank you!

\n","markdown":"Thank you!","text":"Thank you!\n","__typename":"Content"},"dateAdded":"2024-11-19T14:46:39.795Z","stamp":"cm3okih83000x09l1cvus3exf","totalReactions":2,"__typename":"Comment","replies":{"edges":[{"node":{"id":"673cc30e2b76f4670f2a3ebf","author":{"_id":"649592595f97b37588b8c593","name":"Graham Boyle","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1718123293344/pvjPr3QB-.jpg","isPro":false,"username":"GreyBoyle","__typename":"User"},"content":{"html":"

My pleasure 😁

\n","markdown":"My pleasure 😁","text":"My pleasure 😁\n","__typename":"Content"},"dateAdded":"2024-11-19T16:55:42.575Z","stamp":"cm3op4flb000d0amf7vjbbuwb","totalReactions":0,"__typename":"Reply"},"__typename":"CommentReplyEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"CommentReplyConnection"}},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"Mw==","__typename":"PageInfo"},"__typename":"PostCommentConnection"},"commenters":{"edges":[{"node":{"_id":"653725c3a43f88e84f1b0ca5","name":"Hillary Ekpenyong","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1698112964134/eaf19834-bc41-456d-b331-9b96e9340284.png","isPro":false,"username":"ChefEka","__typename":"User"},"__typename":"PostCommenterEdge"},{"node":{"_id":"663a2c44628e513ea163d1df","name":"ProCoders","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1731319865126/d1217e83-334f-41f0-9a5d-f8338ef39282.png?w=500&h=500&fit=crop&crop=entropy&auto=compress,format&format=webp","isPro":false,"username":"Valechna","__typename":"User"},"__typename":"PostCommenterEdge"},{"node":{"_id":"66fd4ffdf4521d6c62ba85be","name":"Temilola Sadeju","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1727877117539/8e51df49-384f-4a8d-96f9-6025b4ddd0d5.png","isPro":false,"username":"Temi-rosh","__typename":"User"},"__typename":"PostCommenterEdge"}],"__typename":"PostCommenterConnection"}}}

Easy React Animation with GSAP

5 comments