Build a Text Gradient Opacity on Scroll using Nextjs and Framer Motion

[@kryza-indie-dev]

My entire dev team has subbed your channel!

[@olivierlarose1]

Good to hear!

[@AnnikaLatz]

I love your videos! I solved the shadow problem not with a new span but with changing the starting opacity to 0.3.

[@olivierlarose1]

Absolutely, that’s much better than my implementation

[@Zyntax_x]

thankss

[@AyushSharma-e9p]

thanks brother

[@AyushSharma-e9p]

@@olivierlarose1 thank you man

[@by_huy]

Love the new video quality man, super crispy haha. Awesome video as always Olivier 😉

[@olivierlarose1]

Haha thanks bro

[@retsambew]

Looks like someone spent more money on production this time, Great video Olivier!

[@KristianTheDesigner]

There arent THAT many truly great KZbin channels tbh, but whenever i find them i really appreciate them. Yours is one of them and i really hope that you eventually get the success you deserve for creating high value content :) I have been subscribing to you for a little while, but i just wanted to give some praise 👏

[@olivierlarose1]

Thank you for your kind words my friend that means a lot to me!

[@swifttech7853]

You just saved me from hours of struggles bro, thanks!

[@mayowafalomo1399]

I liked the video even before watching it. You cooked hard yet again Olivier!!! 🔥🔥 You have a fan from Nigeria btw 🇳🇬

[@olivierlarose1]

Cheers from Canada bro

[@mazwrld]

new thumbnail and setup!? dope shit broski

[@olivierlarose1]

Hell yea thanks bro

[@Isticsek]

Great video, as always Oliver! I was really hoping that you'll make this one with framer-motion too! Indeed it's a popular animation on awwwards sites, so it was cool to see the implementation. Thanks!

[@olivierlarose1]

For sure!

[@williamcozzapereira8886]

God.. you really rock it man, congratulations for your channel, your content is really good and help me a lot.. don't stop man, very useful!!! 🙏

[@DMZT_dhruv]

listen bro, 1:44 your eyes here stole my heart, your eyes are so beautifulllll

[@AMDesignAndDev]

Such an amazing video! Props from another creator Oliver!

[@olivierlarose1]

Cheers!

[@syndg]

Your channel is godsend 💥💥💥

[@olivierlarose1]

Appreciate it!

[@SheikhAmeen]

Very cool solution. And instead of having a separate shadow, we can make the useTransform range to start from a higher value than 0. This was, we can also animate other properties like y (to make text appear slightly from below). With a shadow, we may also have to animate the shadow, which is cumbersome. Thank you for the video.

[@kkkotiqqq]

Thank you for framer and nextjs videos! :3

[@olivierlarose1]

My pleasure!

[@fightscene817]

great efforts! Thank you! Could you kindly produce a video tutorial demonstrating the process of building this web site react g g?

[@ruizxzx]

nice animation !

[@olivierlarose1]

Thanks!

[@taravisser4713]

Great efforts! Thank you .. Could you kindly produce a video tutorial demonstrating the process of building this web site react gg?

[@olivierlarose1]

It’s actually not that complicated. The path thing is made with a bunch of premade SVGs

[@taravisser4713]

@@olivierlarose1 Could you kindly provide a tutorial-style breakdown, if that's acceptable? Thank you

[@nellymotion]

Great video!

[@olivierlarose1]

Thanks!

[@NOTHING-en2ue]

great tutorial, thanks man 👍

[@eillioniscreating]

I really want you to make a course about framer motion and gsap for beginner(from scratch). Your contents are really awesome and helpful for me. Thanks Olivier!!!!

[@Omohagbon]

Great video! Really enjoyed the content. By the way, if you ever have a spare laptop lying around, I'd be happy to give it a new home. Keep up the awesome work!

[@olivierlarose1]

Thanks!

[@ricardocnn]

Awesome!

[@muhammadalfaris100]

Hei @Olivier Larose, thank for your awesome tutorial. I want to asking, what's meaning of `start 0.9` and `start 0.25`, I'm already to read documentations about it, but i don't get it until now. Hopefully i can understand from you. Thank Olivier

[@jannickpedersen4620]

EEEEY those 3x examples where really nice, i took the character for my portfolio page :D You got a sub and a like :) can u also do some framer motion and tailwindcss :D? luckily its easy to do sass n tailwind together. Use it with my NextJS14 :D

[@therealsharat]

Please do a tutorial on the new page transitions introduced by framer-motion!

[@ThugLifeModafocah]

and how to do it considering server components... please, thank you.

[@olivierlarose1]

Next video probably!

[@ThugLifeModafocah]

@@olivierlarose1 Hey Oliver, please, do not forget the carousel made in next with tailwind or sass but following the behavior of material design 3 carousel... this one will be huge success =P cheers

[@RiddleMaster2]

Hey Bro, really great video tutorial on your side. Impressed how Framer Motion works. An question from my side, is it possibly to give just 1 word another color? Just like green for example? Im struggling to make that happen xD. Btw u got an new follower, keep your work!

[@Deus-lo-Vuilt]

Thanks , I liked

[@olivierlarose1]

Cheers!

[@АнтонКамаргин-ъ6ъ]

awesome! thanks!

[@abhijitroy1958]

great content

[@Diego_Cabrera]

Bro you camera quality is so good. I’ve been looking into getting the Sony zv-e1, what camera do you have?

[@olivierlarose1]

Iphone 15 for this video

[@WanderingBall]

Awesome

[@olivierlarose1]

Thanks!

[@okanbayulgen]

did you buy a new camera?? you are loking great wtf also great video thanks.

[@olivierlarose1]

Yes I got a new camera haha thank you

[@TCLKanxi]

Hi Newbie here, I wonder how to apply this to one paragraph in the hero section of my index.html? Thank you!

[@rubenzafratraver6819]

What you think its best to learn, framer motion or gsap?? Your videos are amazing and I get tons of inspiration, thanks!!

[@rubenzafratraver6819]

Also would be cool to have animation between sections. Like for instance a full vh section that zooms into the next section on scroll or something like that. How would you approach this?

[@olivierlarose1]

Framer motion fits better with the React ecosystem but gsap is good too. I would learn a bit if both if I were you

[@olivierlarose1]

You have an example?

[@lxrdk4261]

Good content. But can you make a front end course? thanks

[@olivierlarose1]

Currently building it! blog.olivierlarose.com/courses/web-animation-course

[@alinasir4605]

please do a tutorial on animated live gradient background

[@olivierlarose1]

Sounds good I’ll see what I can do

[@shridharIyer]

Hey buddy I am facing issue as callstack rc. how can i fix it?

[@vaibhavbhardwaj48]

Hey, I love your videos, they are very useful. But Can you make a full video tutorial of a website explaining from scratch. I didn't find any tutorial who are explaining or building site with Next.js using Locomotive, framer motion, gsap and other. And If you have those videos please tell me. I have one more question like if we use Next js, then we need to make every component "Client" component, it will effect server side rendering and whole point of using Next.js. Can you make a video explaining best practices and approach with this? Thank you, Your work is awesome.

[@olivierlarose1]

Hi, yes using animations force the components to be “Client components” but that does not affect the SEO. Client components will still be pre rendered on the server. there’s a lot of confusion right now and I completely understand. Your page won’t be pre-rendered only if you have data fetching inside a use effect which will make your component “client side” (not to be confused with “Client components”).

[@24pratikbhagwat68]

Hey bro can you make a video on framer motion and next js from beginer to advance please teach how to use framer motion effectively?

[@olivierlarose1]

Noted!

[@fiha_khair_yt]

❤

[@udayverma6120]

can you make a course on how do you think while building such websites. i will be the first one to purchase!

[@olivierlarose1]

I'm currently building my course you can subscribe here: blog.olivierlarose.com/courses/web-animation-course

[@alishbasiddique3729]

can you give the GSAP Text Gradient Opacity on Scroll video link, I'm unable to find it

[@olivierlarose1]

There you go: blog.olivierlarose.com/tutorials/text-gradient-opacity-on-scroll

[@alishbasiddique3729]

@@olivierlarose1 Thank you ✨✨

[@hishamch9036]

can you make the inversion effect.

[@olivierlarose1]

You have an example?

[@rafamartins92]

Awesome! Is it possible to create a website preloader with framer motion? I know that's possible with gsap

[@olivierlarose1]

Of course everything you can do with gsap you can probably do with framer motion as well

[@shahjahansarfraz9598]

isn't the shadow is just an extra step? I mean like you can start the opacity array from 0.2 to 1 instead of 0 to 1 as it would do the same thing

[@olivierlarose1]

You might be right about that! Didn’t think about it that way but it’s a good point!

[@shahjahansarfraz9598]

@@olivierlarose1 sometimes doing complex things makes us made simple things complex too. XD

[@maisoncastro]

Sti man ta deadddd! Merci pour ca! I'm not trying to be a dick but wouldn't this cause some like accessibility issues if a legally blind person were to hear this from text-to-speech (I know almost everyone neglects that shit)

[@olivierlarose1]

Haha merci bro. Indeed it’s not accessible for text to speech. However you gotta think about your target audience when making creative animations

[@bahaaaldein5723]

😍😍😍😍😍😍😍

[@olivierlarose1]

Cheers

[@kylenoome4482]

link not working

[@linkcell]

He mentions an old video with gsap. What video is that?

[@olivierlarose1]

Oh the video is gone now, but I have the written tutorial here: blog.olivierlarose.com/tutorials/text-gradient-opacity-on-scroll

[@linkcell]

@@olivierlarose1 thank you oliveir. I appreciate your attention! :)

[@AtomicPixels]

One thing you might want to do is explain something….ever. To anyone at all. Unless you’re trying to flex coding skills or auditioning for a human screen reader that must be skilled at not having any thought of their own or opinion, in which case you’re doing fantastic. Tip: just saying you’re doing something or saying you have to do something is the same as not saying anything at all. Identical to simply sharing a repo. And yes in this big of an ahole to my developers, so be at ease solider