If you are facing issues running this code override, I have made a better version of the text reveal animation with more flexibility: ruclips.net/video/Oi7pLhW-fpg/видео.html
Appreciate your comment. Although my channel is focused on design, I will think about that in the future. How do I get the code? I write, take help from the internet, just like what others do.
Sorry, I missed your comment. Seems like Framer handles packages differently in the web app and in the desktop app. As @robinbroekhuis suggested, please try using their desktop app.
@@DesignwithAsif Actually I was using the desktop app only but it's fixed now, I copy pasted the text from your file and pasted on my file which surprisingly made that previous code file to work, while the text that I copied from your file was still overidden be the external code i.e. yours, all I have to say it's working miraculously
@@DesignwithAsif Do you know how i'd be able to use the override if i wanted to add spacing in between sentences? I want to add this to a section but i cant use sticky because it drags down into the other sections. i am trying to make it work on the phone as well. ex would be like this adsfa dafadsfdf dfdaf dfdfa. dafdfadsfdsafdfasdf adsfadsf asdf asdfadsf adf adsf fd dfa dsfadsf adf df da. adsfadsfdsf dsfadsf df adf adsf ad sf adsf df asdf a dsf adsf f df f f das . adsfadfadff f daf df dfa dsf. adsfasdfadsfadsfdasf fda f df df ads a dsfadsfadsf asdf asdf ads f asd fasd f dsaf adsf asd f adsf adsf f dfadf.
I see, you need paragraph spacing. Now if you give a space in this code, the reveal animation will not work. You need a different solution. Let me work on that, I will get back to you. Can you please join the discord? It will be easy to share then.
Hi Asif, I was trying to send you an email regarding my problem with the provided code, but I ended up with "Outbox". May I know if you have an alternative email address? A brief of my problem is here: With your code, I want to make a phrase to be “highlighted,” but I am facing an issue. The phrase is already highlighted before start scrolling. Thanks in advance!
As we discussed in the email chat, please give me this weekend to have a look at your problem. You can work on other designs of your website. If it is super urgent please download Pieces and ask it in the Copilot Chat.
Okay, as per the error I am assuming you have imported React multiple times. You need to import it once. Feel free to share your file, I will take a look. Thanks.
On the left bar in the code i have 2 codes. NewText.tsx and TextReveal_GSAP.tsx. But in your video there is only one text. I tried to delete NewText.tsx but i can't because it's used.
Thanks a lot!!! please could make a tutorial starting from scratch. I mean a blank page and all the steps in live. I'm really a beginner. For example, i don't understand why the code override is already there. In many tutorials, people start with all the elements and the page all ready and i don't understand how they get there. thanks for the file i'll try it.
Well, the code wwas already there because I wrote it earlier before making the video. If I would write in the video then the video would become lengthy. Also, most of my audiences are designers, that's why I focused on how to copy paste and use the component. If you found any error after copy pasting the component let me know. I am happy to help.
@@DesignwithAsif Hi, Importing split-type is throwing an error. Error: Module split-type is not a valid npm package. The same goes for gsap/ScrollTrigger. Can you help?
@@oyemadeoluwatomisin6750 did you import these? import * as React from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" import { Override } from "framer" import SplitType from "split-type" if yes, I might need to see your file. If possible share your file with asifkabir008@gmail.com
If you are facing issues running this code override, I have made a better version of the text reveal animation with more flexibility: ruclips.net/video/Oi7pLhW-fpg/видео.html
Fantastic video. I particularly liked the walkthrough so I managed to adapt the code to my project despite not knowing how to code. Thanks so much!
Glad it helped!
Good video thx
Super cool stuff ❤
Good Luck! Performace!!
How do I make the animation go fade in per word instead of a wipe animation/karaoke style?
Good stuff!
Thanks for the visit
How can you get this code? kindly make a video to generate the GSAP code.
Appreciate your comment. Although my channel is focused on design, I will think about that in the future. How do I get the code? I write, take help from the internet, just like what others do.
Im getting a problem with saving the code file it show a toast that "Unabel to resolve package split-type"
When i copy/paste the code in the Framer app on Mac instead of the online app, the problem doesn't occur. 😀
Sorry, I missed your comment. Seems like Framer handles packages differently in the web app and in the desktop app. As @robinbroekhuis suggested, please try using their desktop app.
@@DesignwithAsif Actually I was using the desktop app only but it's fixed now, I copy pasted the text from your file and pasted on my file which surprisingly made that previous code file to work, while the text that I copied from your file was still overidden be the external code i.e. yours, all I have to say it's working miraculously
i keep getting errors, unable to resolve package/split type, unable to resolve gsap/scroll trigger.
ya, it's because of I used GSAP. I should have used framer motion. So to solve this please close your framer and reopen it. It will do the job.
@@DesignwithAsif Do you know how i'd be able to use the override if i wanted to add spacing in between sentences? I want to add this to a section but i cant use sticky because it drags down into the other sections. i am trying to make it work on the phone as well. ex would be like this
adsfa dafadsfdf dfdaf dfdfa.
dafdfadsfdsafdfasdf adsfadsf asdf asdfadsf adf adsf fd dfa dsfadsf adf df da.
adsfadsfdsf dsfadsf df adf adsf ad sf adsf df asdf a dsf adsf f df f f das .
adsfadfadff f daf df dfa dsf.
adsfasdfadsfadsfdasf fda f df df ads a dsfadsfadsf asdf asdf ads f asd fasd f dsaf adsf asd f adsf adsf f dfadf.
I see, you need paragraph spacing. Now if you give a space in this code, the reveal animation will not work. You need a different solution. Let me work on that, I will get back to you. Can you please join the discord? It will be easy to share then.
@@DesignwithAsif will do, thank you!
Please check the recently uploaded video.
When I copy the code override into framer there is an error. Having trouble importing some of the GSAP stuff. Any ideas?
Close Framer and reopen. That should work. Let me know if it doesn't work.
Hi Asif,
I was trying to send you an email regarding my problem with the provided code, but I ended up with "Outbox". May I know if you have an alternative email address?
A brief of my problem is here:
With your code, I want to make a phrase to be “highlighted,” but I am facing an issue. The phrase is already highlighted before start scrolling.
Thanks in advance!
As we discussed in the email chat, please give me this weekend to have a look at your problem. You can work on other designs of your website. If it is super urgent please download Pieces and ask it in the Copilot Chat.
Thanks for your kind support, Asif. Let me try Pieces.
Big fan bro
Thanks for the support bro ❤️
I have this error when i click play "Error in augiA20Il Identifier 'React' has already been declared"
Okay, as per the error I am assuming you have imported React multiple times. You need to import it once. Feel free to share your file, I will take a look. Thanks.
i just clicked on your remix file to import and then i tried the play button@@DesignwithAsif
I archive the project and i clicked again on your link. I have the error from the start without doing anything.@@DesignwithAsif
On the left bar in the code i have 2 codes. NewText.tsx and TextReveal_GSAP.tsx. But in your video there is only one text. I tried to delete NewText.tsx but i can't because it's used.
I tried ro rebuilt the page from scratch but i'm stuck with the component. When i create a component i don't have the same result. Any tips?
Thanks a lot!!! please could make a tutorial starting from scratch. I mean a blank page and all the steps in live. I'm really a beginner. For example, i don't understand why the code override is already there. In many tutorials, people start with all the elements and the page all ready and i don't understand how they get there. thanks for the file i'll try it.
Well, the code wwas already there because I wrote it earlier before making the video. If I would write in the video then the video would become lengthy. Also, most of my audiences are designers, that's why I focused on how to copy paste and use the component. If you found any error after copy pasting the component let me know. I am happy to help.
thks for your reply. i'm ok if you copy/paste because this is what i want to do. just need to see from the beginning @@DesignwithAsif
well, I meant I made the video and shared the file so that you can copy and paste.
@@ekoflexofficial3903
@@DesignwithAsif Hi, Importing split-type is throwing an error.
Error: Module split-type is not a valid npm package.
The same goes for gsap/ScrollTrigger.
Can you help?
@@oyemadeoluwatomisin6750 did you import these?
import * as React from "react"
import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { Override } from "framer"
import SplitType from "split-type"
if yes, I might need to see your file. If possible share your file with asifkabir008@gmail.com