Hi there nice tutorial. Which Framer version are you using? I'm working using the last version but for some reason I can't see the style > blending for the circle image :(
Update: So after two hours of clicking everything and also comparing with your Remix layer by layer, I've realised that you need to click the "+" icon beside Styles on the left panel to add Blending Style to the framer. Thanks anyways man!
Wow, this tutorial is incredibly comprehensive! You've done a fantastic job breaking down the process of creating animations in Framer. I particularly liked how you demonstrated various animation techniques, like scroll speed, scroll animations, scroll transforms, and scroll variants. It's impressive how you made each step easy to follow. Thanks for sharing this and keep up the awesome content! 🙌
This tutorial is an absolute treasure trove! Your meticulous breakdown of crafting animations in Framer is simply mind-blowing. I couldn't help but be thrilled by your showcasing of diverse animation techniques-scroll speed, scroll animations, scroll transforms, and scroll variants-all explained in such a fun and accessible manner.
You've covered a wide range of tools and techniques in a clear and concise manner, making it easy for anyone to follow along and create stunning animations. 🔥
I agree! Providing a detailed breakdown of the process and showcasing various animation techniques is incredibly helpful for those looking to learn and experiment with Framer. Another thing, tutorials like this one play a valuable role in helping individuals expand their skills and capabilities, and they contribute to a more accessible and knowledgeable online community.
Thank you, this is very interesting. And have changed to dark mode, the results are very nice. Next, how to enter each icon only changes the appearance on the phone, does not change the appearance on desktop and mobile.
Hi tim ! congratulation for your content ! i love replicate your tutorial and adapt to my needs. Recently i see in framer community , a builder create an dark/Light mode directly on framer with component. But the problem is that his explanation are so hard to understand for replicate step by step. I don't know if you can make an tutorial more simple who explain how create an dark/light mode directly on framer. Thanks for your time
Hey Tim, great video. I was looking for something like this. Thanks for posting :) Just one question though. How can we make the sticky section responsive for mobile (as in the images/icons will stick upon vertical scrolling)?
Im following the steps to the T to create the cool rainbow effect in the Scroll Animation text. However, I dont get a dropdown menu called "Blending". Am I missing something? thanks
n/m solved from a comment below! @romario1989 2 months ago Update: So after two hours of clicking everything and also comparing with your Remix layer by layer, I've realised that you need to click the "+" icon beside Styles on the left panel to add Blending Style to the framer. Thanks anyways man!
usually these kinds of effects aren't very suited for mobile (partly because of internet connectivity and partly because of overall phone performance). however, it's possible for sure!
Hey! I've been trying to follow the tutorial, but the sticky element is not working... I tried making all overflow settings visible, including the "icon" component itself, and it still doesn' work. If the icon component is set to hidden, then the sticky just stays in the same position and scrolls along with everything else, and if the sticky component is set to visible, then it just scrolls slower than everything else. Any ideas of why that could be?
How do you keep the image showing up all the way in different size screens? When I make a breakpoint, it seems like the width and height lowers, and I end up unwilling cropping my image to a fraction of the full image/ Especially for mobile
Is there a way, to make it go from "Geto connected" to "Get inspired" by only one scroll? So you dont have the possibility to scroll by your own but it automatically scrolls to the next frame you want it to be at.
Hi, I have a problem with the responsiveness of these elements. I want the image to scale up or down as the resolution changes. I have tried various settings, but something always goes wrong. Do you have a solution for this?
Hey, I've been using Framer a little and I'm really struggling to find any UI design kits for Framer-- all the UI kits are for Figma. Why is this? Do you recommend that I start in Figma and export to Framer or should I only use Framer?
Framer is still so new that the supply has yet to catch up with the demand for a lot of things, including UI kits! personally, i still make my designs in figma and then export to framer. this isn't necessary in all cases, but rather a personal choice because i'm still a bit faster in figma overall!
Hey Gabe, whenever I create a frame it sets the position type to: Absolute. There is no way to change this to Relative, since they are greyed-out. Any ideas?
Quick question, the third container does not go to the center, while the other two do? I don't really know how that can happen, if you got any advice id love it :D
Hi great tutorial. Just a slight problem, why cant i create stacked frames? when i click the layout feature or the size feature to try and fill it, i can't. I understand that its because i didnt stack it but i cant stack it.. Any tips ? Thanks!!
Everything seems to work until I drop the icon into the scroll container, the image wouldn't move with the top spacing after setting the image to sticky.
![Stromae, Pomme - “Ma Meilleure Ennemie” (from Arcane Season 2) [Official Visualizer]](http://i.ytimg.com/vi/1F3OGIFnW1k/mqdefault.jpg)
Hi there nice tutorial. Which Framer version are you using? I'm working using the last version but for some reason I can't see the style > blending for the circle image :(
Update: So after two hours of clicking everything and also comparing with your Remix layer by layer, I've realised that you need to click the "+" icon beside Styles on the left panel to add Blending Style to the framer. Thanks anyways man!
sorry for that confusion, my friend 🙏
Hi, I was wondering the same. Thank you for finding it out haha :)
thanks, i had the same problem
@@hfromero
Wow, this tutorial is incredibly comprehensive! You've done a fantastic job breaking down the process of creating animations in Framer. I particularly liked how you demonstrated various animation techniques, like scroll speed, scroll animations, scroll transforms, and scroll variants. It's impressive how you made each step easy to follow. Thanks for sharing this and keep up the awesome content! 🙌
This tutorial is an absolute treasure trove! Your meticulous breakdown of crafting animations in Framer is simply mind-blowing. I couldn't help but be thrilled by your showcasing of diverse animation techniques-scroll speed, scroll animations, scroll transforms, and scroll variants-all explained in such a fun and accessible manner.
You've covered a wide range of tools and techniques in a clear and concise manner, making it easy for anyone to follow along and create stunning animations. 🔥
I agree! Providing a detailed breakdown of the process and showcasing various animation techniques is incredibly helpful for those looking to learn and experiment with Framer. Another thing, tutorials like this one play a valuable role in helping individuals expand their skills and capabilities, and they contribute to a more accessible and knowledgeable online community.
You make things easier for us. kudos!
Your breakdown of techniques is spot on, and your teaching style makes it super accessible. Looking forward to more awesome content!
Brilliant! Thanks for keeping it short and simple. I tried these animations and looked amazing.
happy you liked it my friend!
Thank you, this is very interesting. And have changed to dark mode, the results are very nice. Next, how to enter each icon only changes the appearance on the phone, does not change the appearance on desktop and mobile.
This actually helped me a lot thank u so much
Thank you for the quality content,most appreciated,and it helps a lot in my work
really glad to hear that, puselet!
Plz nxt tym made this in dark mode 😂
haha, you like dark mode more?
@@TimGabe yes everybody like that too good for eyes 👀
Great tutorial Tim! Thanks for sharing.
This is outstanding work. Really nice communicated too.
glad you found it useful, jose! thanks a lot man!
Thank you so much for teaching us this!!
happy you liked it Jackie!
Great teacher!
appreciate it, my friend!
big trouble done! love u guy
happy it was helpful, lina!
jeez dude. this would literally take me 8 hours to complete and figure out and I'm sure it wouldn't have come out as well.
Great tutorial... I want the box to be below the text and not beside as shown in the video, how do I make that happen ?
Hi tim ! congratulation for your content ! i love replicate your tutorial and adapt to my needs. Recently i see in framer community , a builder create an dark/Light mode directly on framer with component. But the problem is that his explanation are so hard to understand for replicate step by step. I don't know if you can make an tutorial more simple who explain how create an dark/light mode directly on framer. Thanks for your time
this is a good suggestion, Florian!! thanks a lot!
I wish Framer Team include Horizinrol scrolling soon
They already have
horizontal is possible, my friend!
Hey Tim, great video. I was looking for something like this. Thanks for posting :) Just one question though. How can we make the sticky section responsive for mobile (as in the images/icons will stick upon vertical scrolling)?
Massive!
thanks my friend!!
Im following the steps to the T to create the cool rainbow effect in the Scroll Animation text. However, I dont get a dropdown menu called "Blending". Am I missing something? thanks
n/m solved from a comment below!
@romario1989
2 months ago
Update: So after two hours of clicking everything and also comparing with your Remix layer by layer, I've realised that you need to click the "+" icon beside Styles on the left panel to add Blending Style to the framer. Thanks anyways man!
sorry about this! added the comment as a pin!
0:40 why I can not make it fill on my framer, please help
not sure Khalid! did you follow it step by step? it's important you don't miss any steps!
@@TimGabe yes I followed every single step you did perfectly
hey! before you do anything else, click on the + button on the layout of the main frame :)
how can i make this effect on html css and javascript
Awesome!
How does this translate to mobile devices?
usually these kinds of effects aren't very suited for mobile (partly because of internet connectivity and partly because of overall phone performance).
however, it's possible for sure!
How did you get the original image to go into the shape of the text? This is a great tutorial!
The effect that lighten has in this tutorial doesn't work the same when I use it. Is there settings that I maybe missing?
hey antony! i'm using blend mode (explained in the tutorial)!
That for some reason wasn't working for me... is there any tips you suggest in we do when using "Blend Mode"?@@TimGabe
Thanx ... the finished working file is not working properly. The positions are all messed up.
In the time of i add a scroll speed effects on an image there is no option in the properties other than speed. Can you help me please?🙏🏻
I can't find the resources you used or the finished work. when I click on the remix button, a blank page just pops up and nothing else. please help
my fault! the actual example was on a different page called experimentation!
Hi, so when I go to select lighten, the words just disappear as opposed to showing the image. should the image be behind the words? O'm lost.
i made this and it worked flawlessly however once i imported it into my existing design the icons lose their stickiness any ideas why?
Hey! I've been trying to follow the tutorial, but the sticky element is not working... I tried making all overflow settings visible, including the "icon" component itself, and it still doesn' work. If the icon component is set to hidden, then the sticky just stays in the same position and scrolls along with everything else, and if the sticky component is set to visible, then it just scrolls slower than everything else. Any ideas of why that could be?
How do you keep the image showing up all the way in different size screens? When I make a breakpoint, it seems like the width and height lowers, and I end up unwilling cropping my image to a fraction of the full image/ Especially for mobile
Is there a way, to make it go from "Geto connected" to "Get inspired" by only one scroll? So you dont have the possibility to scroll by your own but it automatically scrolls to the next frame you want it to be at.
yes, and maybe that's something for a future tutorial!
Hey, scroll animation effect is working on Light mode. How to do this same effect on Dark mode?
do you mean with a dark theme for the layout, or dark mode for the framer ui?
For dark background
Hi, I have a problem with the responsiveness of these elements. I want the image to scale up or down as the resolution changes. I have tried various settings, but something always goes wrong. Do you have a solution for this?
can someone please help me , at the start by adding a frame into the desktop. I can't setwidth to fill ? why is this ?
it has to be a stack!
hey , i have a question?
how do you fulfill websites to clients on framer?
like designs , SEO , etc.
not sure what you mean by fulfill, my friend. handing over a website to a client?
yea.
@@TimGabe
hey , can you say how do you handover a website to a client in framer.
@@TimGabe
that blending with image is not working :( I am repeating every step, what could be the problem?
Can you do lottiefile animate on scroll, how to link lottie progress on scroll!?
this is a great idea!
I'm a beginner i have a question can i implement this on my webpage that is made of html css and js....
there's no easy way of exporting animations unfortunately, so your best shot is actually building your site inside of framer
Hi Tim. Is it possible to make an animation when scrolling like in Apple products? Via video or lotti file.
I would also like to know this. Can you scroll through a full screen sticky video from start to finish?
definitely possible -- thanks for the video idea!
Is it mobile responsive as well?
how to convert html-css ?
check this if you want react:
www.framer.com/learn/handshake/
For some reason, the 'Fill' option is grayed out. Any Suggestions?
then you didn't make it into a stack, my friend!
Hey, I've been using Framer a little and I'm really struggling to find any UI design kits for Framer-- all the UI kits are for Figma. Why is this? Do you recommend that I start in Figma and export to Framer or should I only use Framer?
Framer is still so new that the supply has yet to catch up with the demand for a lot of things, including UI kits!
personally, i still make my designs in figma and then export to framer. this isn't necessary in all cases, but rather a personal choice because i'm still a bit faster in figma overall!
Where is the code?
blending where?
is this responsive
not out of the box, but you can make it responsive! 😃
Hey Gabe, whenever I create a frame it sets the position type to: Absolute. There is no way to change this to Relative, since they are greyed-out. Any ideas?
It needs to have their parent be a stack for it to be relative
Thank you this worked. @@robcarr9968
make sure the parent container is a stack first, then it should work!
Quick question, the third container does not go to the center, while the other two do? I don't really know how that can happen, if you got any advice id love it :D
Alright, managed to center it! I still have a little problem. When i try to give a 160 gap on the component, it doesn't move the slightest... :/
hard to give pointers without seeing the project, josep... sorry man! hope you'll solve it!
@@TimGabe Nw g thanks
Hi great tutorial. Just a slight problem, why cant i create stacked frames? when i click the layout feature or the size feature to try and fill it, i can't. I understand that its because i didnt stack it but i cant stack it.. Any tips ?
Thanks!!
that's weird! you should be able to create stacks by just hitting "F" and then converting it to a stack!
I had this same issue, you should try changing the desktop (parent frame) to a stack. this should allow you to make any child component fill the frame
Everything seems to work until I drop the icon into the scroll container, the image wouldn't move with the top spacing after setting the image to sticky.
make sure you don't miss any of the steps on the way; then it'll work! 🙏
I don't have blending button at 1:17s, I follow every step
go to the + in the styles panel and add it from there 🙏 missed to show that in the video, i’m afraid 😩
0:25
Nice one but you are too fast, you can please be calm and steady nice
I am sorry but all I could hear was Minecraft youtuber background music :(