How To Code a Slider in React.js with Greensock (GSAP) | Part 1 Tutorial

Hey guys this is part 1 to my GSAP slider tutorial. To grab the starter or final project files open the description!
Code:
Starter Code: github.com/wrongakram/gsap-sl...
Final Code: github.com/wrongakram/gsap-sl...
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 :)

[@liu-river]

Hey man, just wanted to thank you for all the tutorials you put out. I learned everything about GSAP in React from you.

[@faisalbokhari2500]

just realized you posted these a few days ago(realtive to now). So clutch I just started into animations and saw gsap was popular and this is just great. please do more cool concepts!

[@WrongAkram]

Will work on more GSAP projects for sure, thank you for your support!

[@jeromegee]

Another excellent demonstration of react and gsap by the great Akram. Again, I am very grateful to you, for sharing your kung-fu.

[@WrongAkram]

Glad you enjoyed it

[@calebolojo5246]

Hey Akram! Big thanks for these tutorials. I LOVE LOVE your tutorials!
Just wanted to share a tip you might already know this but - @5:25 when making a copy of a single line, using Shift+Alt+downarrow automatically copies and paste the code into the next line.

[@WrongAkram]

Thats awesome to hear :) Thanks for the tip!

[@TrictoYT]

You are goated wrong !

[@simpleprogramming4671]

Awesome. thank you for your amazing videos

[@WrongAkram]

Glad you enjoyed it!

[@elissitdesign]

You should produce a payed React GSAP course. Cover many real world examples. ScrollTrigger too!
Wonderful presentation.

[@emmanuelakogwu720]

You're wonderful, thank you so very much.

[@saikrishnabanda6493]

Love from India . Thank you

[@aotech3592]

Nice work

[@WrongAkram]

Thanks ya much! 🙏🏽

[@MrAstorre1]

Hey, your tutorials are looking very well, but could you consider changing the font size of your IDE to a bigger one. Keep up the good work!

[@WrongAkram]

Thank you so much! I will make sure to increase the font size some more. :)

[@jinukurian7]

Hey man, thank you for the cool video. Really appreaciate it. Quick note from my side, rather than writing the testimonial images and contents one by one, you could add a loop like this
{
testimonials.map(testimonial =>

)
}
This will enable users to add new testimonials without hard coding.

[@abhayvgg]

when you referred to the height of testimonial-section not to be used as 'vh' in production what did you mean and what will you change for it to be for production?

[@jameshagood2373]

You should make a video about creating SVG backgrounds and animating SVGs with GSAP with React or working with SVGs in Gatsby. Like the modern wavy or shaped SVG divs that you see everywhere.

[@maguilecutty]

You can do that in css...

[@filmologyaz4729]

thank you

[@kaka0117]

Excellent tutorial bro! How do you do the nested CSS structure on one click in 10:36" ?
Also, is there any a good way to make this into a RWD slider easily?

[@WrongAkram]

I cut that part out from the video because it would take a while to nest everything. Behind the scenes operation ;)

[@dorianvey6675]

So all of the tutorials I have seen on using Greensock in React have involved using a .js file that does NOT use state (Blank extends Component{constructor()... etc.} , followed by the render() just above the return. Because of this, none of your code is working for me. I really really want to use greensock on my project, but every .js file in it uses state. Is there a different way of doing this to fit that need?

[@johnyepthomi892]

This only works for those images and testimonials. Can you do one for images and testimonials from a database

[@maguilecutty]

Dumb question but...when I put display: flex on my UI the images don't overlap...? Cant find any solutions in the google machine...remove it and it works fine so far *Shrug* help?

[@shahriarsohan2458]

how i can make it responsive? btw awesome tutorial

[@mrigankabora4835]

use media queries

[@seyii]

Amazing tutorial, Akram. You're literally my React and animations plug. I don't know how big of an ask this is, but would it be possible to know how to build a slider like the one in this link: www.united-athle.jp/lookbook/. Or perhaps some tips? Thank you!!

[@WrongAkram]

Glad you liked it! That would be really neat to build in the future :)

[@deepshah1358]

Tutorial was good but screen should be zoomed out or font size should be bigger🙏

[@amongdoomers9464]

Font size is too small . Please increase.

[@manaspaul]

Fonts are too small to watch the video in mobile.

[@WrongAkram]

Fixed in future videos :)