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

A web animation tutorial featuring a gradient text scroll opacity effect using Nextjs and Framer Motion. In this tutorial I animate a paragraph work by word modifying the opacity on scroll. Inspired by many awwwards websites.

0:00 Intro
1:42 Paragraph on Scroll
5:32 Word by Word
12:58 Character by Character
17:00 Outro

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #svg #morph

[kryza-indie-dev]

My entire dev team has subbed your channel!

[AnnikaLatz]

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

[by_huy]

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

[williamcozzapereira]

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!!! 🙏

[mayowafalomo]

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

[swifttech]

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

[KristianTheDesigner]

There arent THAT many truly great Youtube 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 👏

[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!

[kkkotiqqq]

Thank you for framer and nextjs videos! :3

[AMDesignAndDev]

Such an amazing video! Props from another creator Oliver!

[retsambew]

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

[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.

[mazwrld]

new thumbnail and setup!? dope shit broski

[fightscene]

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

[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!!!!

[jannickpedersen]

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

[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!

[DMZT_dhruv]

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

[taravisser]

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

[therealsharat]

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