🔥 Base Apparel [Redesign + Super Smooth GSAP Animations] 🔥
Design comparison
Solution retrospective
You can find MY ANIMATION TUTORIAL HERE
🔥 I've implemented my own custom design on top the original fem design and used GSAP to animate all elements in a timeline sequence. For optimum animation experience, recommended viewing dimensions: 1440x800. On desktop, after a while background image fades into a new one infinitely.
It is also responsive for mobile. There might be some slight issues for tablet still.
This time I've also added a little email validation using REGEX.
[PS. If you have set prefers-reduced-motion to true - it wont animate]
Community feedback
- @saketbytePosted over 1 year ago
Landed here after submitting my solution. I am side by side learning react too, but seeing your work gave me so much motivation! Thank you!
And your work gave me chillsss!!! Loved it!!
2@visualdennissPosted over 1 year ago@saketbyte Very happy to hear that! Thanks a lot and good luck on ur journey!
1 - @dambusPosted over 1 year ago
Redesign looks awesome, great job!
1 - @IryDevPosted over 1 year ago
You took that challenge to the next level 🔥. That's an amazing solution it inspired me to do my own solution and redesign.
0 - @Saad-HishamPosted over 1 year ago
You're doing an amazing job! Your work is always inspiring to me, and I'm particularly impressed with how you've taken that newbie challenge to the next level with these animations. Keep up the great work🔥
0@visualdennissPosted over 1 year ago@Saad-Hisham thanks a lot for your encouraging words! It makes me very happy to hear to inspire and motivates me to push further each time. Wish you happy and creative coding!
1 - @Shadow-IO-oIPosted over 1 year ago
I'm not sure how else to contact you, so I'll just ask here.
I saw your Base Apparel coming soon page redesign and thought it was pretty cool. So, I took your design, animations, and images and rewrote it using common JavaScript, CSS, and HTML.
Before I publish it, I just wanted to check with you first. Can I share my version with the world?
Let me know what you think.
Thanks!🦊
0@visualdennissPosted over 1 year ago@Shadow-IO-oI Thanks for your consideration and i feel honoured that you liked the solution a lot! Do you have a LinkedIn? If so, you can reach me there (link is on my profile) and we can discuss about it :)
0@Shadow-IO-oIPosted over 1 year ago@visualdenniss I tried reaching out to you on LinkedIn, but I'm new to the platform and couldn't figure it out. I left a comment under your post, but didn't get any word from you. So, I thought I'd try here instead.
I added a link to my LinkedIn profile in my online profile.
0@visualdennissPosted over 1 year ago@Shadow-IO-oI Okay, cool just sent you connection request there, hope it works.
0 - @Shadow-IO-oIPosted over 1 year ago
Your solution and redesign are awesome. Do you mind if I make my own variant based on your suggestions?
0@visualdennissPosted over 1 year ago@Shadow-IO-oI Hey, thanks a lot!
I'm not sure if i understand your questions correctly, but if u r unsure, u can always give credits to me, that would be best in any case :) Thanks and looking forward to ur implementation!
0 - @WellissonbPosted over 1 year ago
how do i make this animation of falling letters??
0@visualdennissPosted over 1 year ago@Wellissonb each individual letter must be turned into span to animate them with stagger, using gsap e.g.. U can use a small library or ur own custom js function to split the word into letters with spans during the render.
Googled it now and i've found one that might be useful: https://www.spltjs.com/
1 - @Hamza-DAPosted over 1 year ago
Wow, just Wow 🔥🔥🔥🔥
0 - @sayedhamid1396Posted over 1 year ago
its super awesome job, great experience, nice animations . GSAP is amazing , I will try to learn it after see this.
0@visualdennissPosted over 1 year ago@sayedhamid1396
Thanks a lot! Happy to hear you enjoyed. Yeah, i'd def recommend GSAP as it is very powerful tool for many kinds of animations. I've just wrote small tutorial about how to do a simple animation, (like the flower image reveal here) so feel free to check that out to start with: ARTICLE
1 - @MadiMalikPosted over 1 year ago
Wow, I absolutely love this solution! The color scheme, animation, and font adjustments are exceptionally well done. Without a doubt, I will be giving it a try.
0@visualdennissPosted over 1 year ago@MadiMalik Hey Madi, thanks a lot for your kind words, very happy to hear you liked it! ❤️
Yesss, go for it! Looking forward to your version
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord