Very cool result, but it's definitely one of the more frustrating experiences in Framer. Sometimes sizing and positioning options are greyed out, and it's really unclear why. Occasionally I get it to work, and I don't know how i did it. Can you please do us a favour and show us the sizing and positioning settings of the objects' parents and grandparents in the next tutorial? Thank you
Amazing tutorial! I have one question, by any chance you could tell me how to make the variant images fade in/out like you did in the video? My variants seem to change suddenly but I can't figure out how to add fade effects
How to make the transition fade effect on Components? I have different variants in different images, but when trasitioned it just do the instant transition
Hey I go there all steps. I have a video that has sticky mode instead of an iphone mockup, How did you achieve this smooth transition between each of version?
Great tutorial, nice and easy to follow. I am struggling to transform this for mobile breakpoints. I would like to switch the stack direction to vertically, to have the phone and text each take up 50vh but can’t get to contents of the phone mockup to scale down. Anybody have a solution for this?
ugh great tut - but having problems getting my phone to stick..overall having problems…the opening scene you mention that you have a stack already in place…but not sure I guess how that works..as I added a column stack - that added to panels …I’m unable to get it to look like how you did it.
This is exactly what I've been looking for but what if I want to scroll the phone content so there is a parallax effect of the phone content scrolling with the text. In the version I'm trying to make the content of the phone scroll up while the text comes into frame from the sides
I tried the exact same steps even with the same desktop size, but I just can't figure out how you manage to keep the image component on the top of the screen instead of having it in the middle. My image just doesn't stay in the top section when duplicating the feature texts...
I had the same issue, this might not be the proper way but I added frames below the device and put them all together in another horizontal stack and removed the frame opacity. So there are "spacer" frames underneath to keep the image at the top.
Guys please try this out. I have been trying but he just copied the content from the side and pasted in the centre. I did the same but the page is not extending. Dont know why
Thanks for the tutorial! Everything's fine until I put the Phone in Sticky, when I preview it's just not sticky! Any idea what could have gone wrong here? 👀
Did you guys release a video on how to sell Framer templates with Lemon Squeezy or something like that? I thought I saw it come across my notifications but now I can't find it. Love the software!
Thanks for this. Trying this at the moment - I’m struggling with the placement of the item on the left. Does its height (the component height) need to be a specific size? How does this work with different viewport sizes? It always seems to stick either too high or too low, depending on the breakpoint size…
@@Framer This has fixed the height issue, is there any way to make this kind of thing work with breakpoints so that the item on the left gets smaller on phone? At the moment by left item is covering up my text on the right when on a small breakpoint!
@@mrstephenwells I tried this scaling thing too and couldn't get it to work. I ended up creating another variant, so when it hits the breakpoint, it just changes to the smaller version...
Hi! There's a bug in the website, when I click the hand of the little menu below, it stucks with it and I can't click anything else, I have to reload to continue the project.
This is great thank you. All good when I followed along except one thing - your phone scroll variant images animate smoothly via a fade between each variant. Mine just jump instantly from one to the next. I've checked and there is a transition style in the component on each variant but it seems to make no difference. How do I achieve that smooth fade transition??? Then it's perfect!
Had the same issue but got it resolved. The 'fade' transition you refer to happens because the two image layers that are behind the current variant have an opacity set to 0 - so the fade is transitioning from 0 opacity to 1 when the scroll variant is triggered. hope this helps
@@brent9two thanks! I'll give this a try... and get back to you if it works.... or not! It's good that more courses are becoming available for Framer now - I'm gonna sign up for that Flux Academy course - by tomorrow while the deal still lasts ; )
Yep this tutorial is set up using relative positioning and layout so it scales nicely across different screen sizes. If you want to move elements around freely you can use absolute positioning but this will be limiting in how things scale across screen sizes. Check out this tutorial ua-cam.com/video/CsOIIEmaKlc/v-deo.html
Hi there. What if I have a mobile container that serves as the main container of the images, and I want the UI screens scrolling inside the mobile screen (on loop), are you able to share any references on how to do that? thanks in advance!
Great tutorial! Love everything you guys do at Framer ❤
Same mate. Same
This video is so helpful! Amazing! Thanks
Glad it was helpful!
Great straightforward tutorial, nice work! Could you show a varaition of this where it utalizes the CMS instead of hardcoded variations?
Very cool result, but it's definitely one of the more frustrating experiences in Framer. Sometimes sizing and positioning options are greyed out, and it's really unclear why. Occasionally I get it to work, and I don't know how i did it. Can you please do us a favour and show us the sizing and positioning settings of the objects' parents and grandparents in the next tutorial? Thank you
Amazing tutorial! I have one question, by any chance you could tell me how to make the variant images fade in/out like you did in the video? My variants seem to change suddenly but I can't figure out how to add fade effects
This was really helpful thanks. Hope you make many more as they really help us to ramp up with real-world examples
You saved me a semester. Thanks!
Thanks for posting 💖
Very cool. Thanks for posting
Great video🎉🎉🎉 Can you please make a video on how to scale images according to device size?
don't forget to set the overflow to visible
Good point!
@@Framer I'll added to the description, I just spent 30 minutes trying to figure why mine wasn't working
Incredible!
GZuS how easy it is... wow!!! thanks for that
Thanks for tutorial
Very nice - thank you!
How to make the transition fade effect on Components? I have different variants in different images, but when trasitioned it just do the instant transition
Works great! How would you resolve this pattern to allow horizontal scrolling when sizes down to mobile?
Great tutorial!
nice tutorial) thanks
Hey I go there all steps. I have a video that has sticky mode instead of an iphone mockup, How did you achieve this smooth transition between each of version?
Great tutorial, nice and easy to follow.
I am struggling to transform this for mobile breakpoints. I would like to switch the stack direction to vertically, to have the phone and text each take up 50vh but can’t get to contents of the phone mockup to scale down. Anybody have a solution for this?
ugh great tut - but having problems getting my phone to stick..overall having problems…the opening scene you mention that you have a stack already in place…but not sure I guess how that works..as I added a column stack - that added to panels …I’m unable to get it to look like how you did it.
I know its too late..but if you still wonder..Try setting all the frames overflow to visible for sticky to work
great! thank you. Btw, can I ask how to make the first 2 phones movement in the hero section?
This is exactly what I've been looking for but what if I want to scroll the phone content so there is a parallax effect of the phone content scrolling with the text. In the version I'm trying to make the content of the phone scroll up while the text comes into frame from the sides
i can't get past the "features" stack 😭the FIT option in HEIGHT is greyed out! so frustrating 😭, is it only visible in PRO version?
I'm having the same problem.
Why my text doesnt stick to right side like yours? it keeps aligning to the center when theres no image
Amazing 🤩 I'm just curious how do you animate the phones on the hero section on top of the site?
I tried the exact same steps even with the same desktop size, but I just can't figure out how you manage to keep the image component on the top of the screen instead of having it in the middle. My image just doesn't stay in the top section when duplicating the feature texts...
I had the same issue, this might not be the proper way but I added frames below the device and put them all together in another horizontal stack and removed the frame opacity. So there are "spacer" frames underneath to keep the image at the top.
Guys please try this out. I have been trying but he just copied the content from the side and pasted in the centre. I did the same but the page is not extending.
Dont know why
Thanks for the tutorial! Everything's fine until I put the Phone in Sticky, when I preview it's just not sticky! Any idea what could have gone wrong here? 👀
thanks, somone know what the solution for whrn i duplicate the text the phone not sty on the top?
Did you guys release a video on how to sell Framer templates with Lemon Squeezy or something like that? I thought I saw it come across my notifications but now I can't find it. Love the software!
How to start selling your Framer templates through Lemon Squeezy
ua-cam.com/video/RN0VWAvL-qc/v-deo.html
I'm struggling to select viewport. It remains grayed out.
That kingfisher image! Care to share?
Does Framer allow you to automatically SNAP to the next section when scrolling instead of having to manually scroll?
Thanks for this. Trying this at the moment - I’m struggling with the placement of the item on the left. Does its height (the component height) need to be a specific size? How does this work with different viewport sizes? It always seems to stick either too high or too low, depending on the breakpoint size…
Make sure the item on the left is also set to 100vh
@@Framer That works! Thanks
@@Framer This has fixed the height issue, is there any way to make this kind of thing work with breakpoints so that the item on the left gets smaller on phone? At the moment by left item is covering up my text on the right when on a small breakpoint!
@@mrstephenwells I tried this scaling thing too and couldn't get it to work. I ended up creating another variant, so when it hits the breakpoint, it just changes to the smaller version...
How does your phone variant change smoothly like the picture faded in, mine changes instantly which is a bit sharp and rigid?
I couldn’t get the image lock in the position when when I added the new section of the text stacks. The images is moving t often middle of the page
hey, just started using framer, how do I make the sticky section end so that I can scroll to the next section?
Hi! There's a bug in the website, when I click the hand of the little menu below, it stucks with it and I can't click anything else, I have to reload to continue the project.
This is great thank you. All good when I followed along except one thing - your phone scroll variant images animate smoothly via a fade between each variant. Mine just jump instantly from one to the next. I've checked and there is a transition style in the component on each variant but it seems to make no difference. How do I achieve that smooth fade transition??? Then it's perfect!
Had the same issue but got it resolved. The 'fade' transition you refer to happens because the two image layers that are behind the current variant have an opacity set to 0 - so the fade is transitioning from 0 opacity to 1 when the scroll variant is triggered. hope this helps
@@brent9two thanks! I'll give this a try... and get back to you if it works.... or not! It's good that more courses are becoming available for Framer now - I'm gonna sign up for that Flux Academy course - by tomorrow while the deal still lasts ; )
@@brent9two exactly how to add the fade transition, inside the phone component?
Hello THX for the video but i have a question I am a freelancer. If I want to send the website that I meda to the cliten can I do it?
♥️✨
has anyone solved the fade between the Variables?
Go into the component, select all the variants and change the transition on the right.
@@Framer Hey thnaks. It still doesnt work. i must have set something up wrong i think a few people are having the same issue.
Not working at all unfortunately, whenever using relative positioning it does not allow me to move any of the objects
Yep this tutorial is set up using relative positioning and layout so it scales nicely across different screen sizes. If you want to move elements around freely you can use absolute positioning but this will be limiting in how things scale across screen sizes. Check out this tutorial ua-cam.com/video/CsOIIEmaKlc/v-deo.html
wild
bro you forgot to explain how you make the phone rotate as you scroll
Hi there. What if I have a mobile container that serves as the main container of the images, and I want the UI screens scrolling inside the mobile screen (on loop), are you able to share any references on how to do that? thanks in advance!