How To Code Animations in React.js with Greensock (GSAP) | Hero Section | Part 2
HTML-код
- Опубликовано: 8 ноя 2019
- Here is where we code the animations using GSAP.
Code:
github.com/wrongakram/GSAP-He...
Image source:
github.com/wrongakram/GSAP-He...
Photographers:
unsplash.com/photos/d8D6-ZQmqdw
unsplash.com/photos/yOdbO1zb4KA
Social Links:
dribbble.com/Wrongakram
/ wrongakram
/ wrongakram
github.com/wrongakram
New to the channel?
Hey there my name is Akram, I am a Front end developer and UI Designer. I'm here to hopefully educated people on how to code projects that actually look good. My stack mainly consist of react.js and node.js. For UI design I like to use adobe XD as my go to. If you have any suggestions on tutorials you would like to see feel free to DM me :)
Great tutorial, didnt have any errors or bugs (had some issue with some of your earlier GSAP/reactjs tutorials), awesome job.
Please do more GSAP/reactjs tutorials in the future!
I really appreciate the work you're doing bro. Thank you so much.
Awesome tutorial dude! I enjoy the series you post, helps me out a lot on my projects.
Love to hear that! Thanks 🙏🏽
This channel is gold!!, this could easily rise up to become one of the best channels on RUclips, your content is amazing! And I’m so excited that your stack is React And Node.js, looking forward to see more great tutorials. Have a super productive day!
Thanks for the kind words!
your channel is a gem!
Best content on RUclips, you're a genius!
Appreciate that man!
teacher supper easy . nice tutorial
Amazing! Thanks so much!!
Glad you enjoyed!
B E A UTIFUL!!! Thanks Akram
This looks easier than Framer Motion. Sounds like a good video idea. React: GSAP vs Framer Motion in different scenarios. Page transitions, normal animations, scroll animations, smooth scrolling, parallax etc.
So helpfull 💕 Thank you !
Thank you so much!
more creative gsaps with nice layout! thanks!
Glad you like them! Will do :)
const wa = () => alert('Thank You for the lesson')
wa();
Appreciate you!
You're amazing thanks !
Happy to help!
Cool!
Thank you!!
thanks man,
Thanks Man
Hey Wrong, great tutorial as always. If I may ask, is there a way to wait till a user scrolls to the page with this specific content to start the animation? I am asking because I am considering using this in a project but it won't be on the landing page. How do I go about handling that please.
If you watch in 2021 import useState, gsap and correct string #15: const [tl] = useState(gsap.timeline({ delay: 0.8 }))
Thank you so much! was really interested in react animation.... though do you think there are a better solution than gsap for react or just plain old css?
You can take a look at React Spring too.
you explain everything so clearly, can't wait to learn more with you!! :)
I just followed this tutorial and I have a glitch - upon loading all the elements move a bit to the right. Do you have an idea of why this could be? Thanks in advance!
Thanks 🙏🏽,
Could you send me a video link or gif to see what you are referring to?
@@WrongAkram here it is: vimeo.com/383312053. Can you see it? It's just a slight movement to the right.
I enjoyed the tutorial. I decided to create something similar. But I encountered a problem. I have this animation on a page called About. When I refresh the page using the refresh button, the image get stuck and doesn't come up.
Could you possibly explain why it happens?
How to activate animation when the content scrolls into view. if i use this section in middle of my website the animation is already excute when page loading . so we can not see. how to solve the problem
great video akram ,
i m react js developer , but i love uix/ux design and animations for web and mobile, any advice on how/where to learn
RUclips is your best friend and it’s free. I recommend reading medium articles about basic UI/UX design. As a beginner you want to focus on working with negative space, typography, colors (etc). Keep things simple and clean. Grab a design tool like Adobe XD and just replicate your favorite designs, It’s okay to copy when you are learning but don’t copy and publish other people’s work.
Amazing video!!! I want to locate `hero section` in the middle of the page, then run the animation once scroll to the hero section. I'm appreciate if you give me some advise :D
You can do this by a few option. Create a custom hook or function using the scrollTop method or use the intersection observer api. You can also use scrollMagic for react.
Thanks a lot man! I tried following along, while changing it to GSAP 3 using the migration guide. I could get the whole effect using multiple gsap.from(...), but I couldn't get it to work by referencing let tl = gsap.timeline(). when using the timeline [tl.from(...).from(...).from(...)], each animation run one after the other, and not overlapping. I'm pretty sure my question is stupid because it's juste following "the timeline", but I'm still stumped.
No it's not stupid. I'm currently experiencing the same issue.
What will the benefit when I subscribe to join?
Hi, I have tried following your video on the content animation, it does not show that reappearing animation, it just shows moving from bottom to top while visible
These methods are outdated, I had to drop these methods while using scrollTrigger ( which needs newer version )
Hey! im getting a weird error, still flashing and flickering..
really cool animations. love the effect only doenst work consistent
Really enjoying these React animation with gsap videos. First ones that I've found that explain it so clearly and helped me understand how to get these extra animations in the web page. I've been wanting to learn this for awhile now and I'm beginning to understand because of these videos. I am getting a small hiccup on my animation between the first and second image animations firing. I'm using jpegs not webp like you are, so I'm wondering if file size of the jpeg is causing it to have a hiccup in the animation?
Wow thank you for the kind words. Let’s fix the issue.
In terms of the hiccup, is it that the first animation is firing and then the second one comes in after the first animation is done?
File size shouldn’t be the issue unless we are talking images being larger than 1mb. And the effect they will output would look as if the animation is firing while the image is loading from top to bottom. It will look laggy/sloppy.
Let me know which case it is and I’ll get back to you with more possible solutions.
@@WrongAkram It's more of a laggy/sloppy animation. The girl image gets about halfway up the page when it lags which I'm assuming is in correspondence of the boy image animation firing. I didn't reduce my image file size when I downloaded them from Unsplash. They are 1.7mb for the girl and 2.6 for the boy. So if I drop the size to below 1mb you're figuring the animation will smooth out?
I'm following your tutorials to learn about gsap with React for a work project I'm about to embark on and some of our image/video file sizes are pretty large. Do you have a suggestion on how to handle those with the animations if we're not able to reduce their file size below ~1mb?
@Michael Lee I really recommend reducing file size, especially if you are working on a production project. The best options in my opinion are to use something like Gatsby’s gatsby-image, or use .webp files with fallbacks. Both still result in really high quality images. When I get a chance sometime today, I will change the image files to the large jpg format and see if I can recreate the issue.
@@WrongAkram I converted my jpgs to webp and are using those now with 141kb for the girl and 479kb for the boy and it is still lagging in the same area. So I don't know what's up.
I would really benefit personally from a tutorial on route animated transitions combined with this hero image animations firing once the route has transitioned and the component has been loaded. I know others are looking for this type of information as well. Most the other guides I see do a simple fade in from route to route or a slide on/off from route to route. I like how you show and explain more complicated looking animations that are seen out on the web but make it very clear what's happening. An example of what I'm talking about would be ueno.com. From what I read the best route transition tool for React and GSAP is react-transition-group. I'm just struggling to combine that with additional page loading animations like we did on this tutorial and like what you see on ueno.com. Anyways, I appreciate you helping me trouble shoot this and look forward to whatever future tutorials you decide to do. Thanks!
@@michaellee509 Can you commit your code to a repo and send it over so I can see what is causing it to lag?
Also great news for you then! I am currently rendering out the React and GSAP page transition tutorial right now. It uses react router and react-transition-group. I will have it uploaded today. I am going to continue working on creating more complex animation for my future videos.
Bhayankaramaana aaalu !!!!
Hey mate! Great stuff this...
🐧🐧🐧🐧🐧🐧🐧🐧 [eye-catching penguins]
I applaud your awesome work, and I have a little question for you... Would you be interested in making a video going through your thoughts on the various animation libraries out there? You have experience with GSAP, Framer Motion and surely React Spring as well, and I think it could be awesome to have sort of a comparison, where they each have their strengths, and then from your POV, which you prefer for which task and why.. GSAP seems very powerful, though watching your video with Next.js using Framer Motion made a lot sense to me - so would be great to hear your professional/personal opinion.
Cheers!
🐧🐧🐧🐧🐧🐧🐧🐧 [more eye-catching penguins]
Thank you for great video. But i couldnt understand why are we using many divs inside of each other. Can you tell me why :( thank you
Because we create illusions lol. So we are using parent divs a lot because we are required to mimic a mask effect. Can also be called a clipping mask.
I used this animations one of my personal project, animations are working in development, but gsap animation are not working on production version, like when you deploy to Netlify, not working.
I searched a bit, and found a solution in stack overflow:
stackoverflow.com/questions/59373830/gsap-animations-not-loading-in-production
Solution is :
const [tl] = useState(gsap.timeline({ delay: 0.8 }))
My headlineSecond is null and im still trying to figure it out. I don't know why it's null but it's causing an error so I can't move forward
Are you assigning the variable to a ref?
hi, how can I get that cool animated cursor...in hyper?
I think it’s called hyper power. You can find it as a plug-in @ the hyper site
@@WrongAkram I had no idea! how fun
Do you like css-in-js ? Will you use it with GSAP?
I don’t enjoy using css in js. I always prefer using sass or styled components.
Hi, when i'm starting declare first vars like
"useEffect(() => {
TweenMax.to(app, 0, {css: {visibility: 'visible'}})
i'm getting this error :
TypeError: Cannot add property _gsap, object is not extensible
Also, i still have gsap dependencies in my node-modules folder.
I tried with your code too, but i still have an error when i do "npm start"
What ever, npm start working on my project but not on yours.
Someone can help me ?
Now it's ok when i run "npm start" on your project, but the page has an error and it says :
Line 13:16: 'TimelineLite' is not defined no-undef
Line 28:5: 'TweenMax' is not defined no-undef
Line 31:45: 'Power3' is not defined no-undef
Line 32:62: 'Power3' is not defined no-undef
Line 33:42: 'Power3' is not defined no-undef
Line 34:61: 'Power3' is not defined no-undef
Line 39:12: 'Power3' is not defined no-undef
Line 42:50: 'Power3' is not defined no-undef
Line 43:55: 'Power3' is not defined no-undef
I don't know what is it but it looks like it's a gsap dependencies issue
Make sure you are importing those GSAP methods in order to use them.
@@WrongAkram I'm trying to start another project from 0, I keep you posted !
by the way, thanks a lot for your work !
@@WrongAkram Thanks it's working nice now ! i had some eslint depencies issues ! All resolved :D
hey Akram it's look so fine your web app. but i don't really understand the meaning of your sentence : "relieving the burden ..."
No love for styled components?