Dynamically show content using Sticky & Scroll Variant Effect

[@ian5629]

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

[@gchen2724]

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

[@uiadrian]

Great tutorial! Love everything you guys do at Framer ❤

[@Vince20ce]

Same mate. Same

[@DanFlynn]

Great straightforward tutorial, nice work! Could you show a varaition of this where it utalizes the CMS instead of hardcoded variations?

[@dextrin69]

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

[@paulkooi5538]

This was really helpful thanks. Hope you make many more as they really help us to ramp up with real-world examples

[@tranqilo397]

don't forget to set the overflow to visible

[@Framer]

Good point!

@@Framer I'll added to the description, I just spent 30 minutes trying to figure why mine wasn't working

[@marcastbury1409]

Works great! How would you resolve this pattern to allow horizontal scrolling when sizes down to mobile?

[@creativereflux4336]

You saved me a semester. Thanks!

[@Susu-bi7mq]

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?

[@DungHa-qu1ip]

great! thank you. Btw, can I ask how to make the first 2 phones movement in the hero section?

[@RyanSaunders-v5n]

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

[@黃宣銘-hming]

How does your phone variant change smoothly like the picture faded in, mine changes instantly which is a bit sharp and rigid?

[@JustanAutor]

This video is so helpful! Amazing! Thanks

[@Framer]

Glad it was helpful!

[@aboutWilfredo]

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.

[@naagvemasani1158]

I know its too late..but if you still wonder..Try setting all the frames overflow to visible for sticky to work

[@patrikleng770]

Why my text doesnt stick to right side like yours? it keeps aligning to the center when theres no image

[@andreisas1621]

Great video🎉🎉🎉 Can you please make a video on how to scale images according to device size?

[@ArniLochner]

Very cool. Thanks for posting

[@Tomatoisblue]

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

[@IvyLegion]

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.

[@kimcruz3889]

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?

[@KingAetos]

I'm having the same problem.

[@ericsonl_]

Thanks for posting 💖

[@neilstevenson6685]

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!

[@neilstevenson6685]

@BrentMartin-mm2dv 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 ; )

[@黃宣銘-hming]

@brent9two exactly how to add the fade transition, inside the phone component?

[@itlshung]

Can this work in CMS project? Where the mobile phone images and text changes with CMS project?

[@nancyt9161]

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

[@FNoll-bd9if]

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?

[@pavlobahro]

Amazing 🤩 I'm just curious how do you animate the phones on the hero section on top of the site?

[@eyalabadi1]

thanks, somone know what the solution for whrn i duplicate the text the phone not sty on the top?

[@osks]

Very nice - thank you!

[@theblacktrini]

Incredible!

[@KingAetos]

I'm struggling to select viewport. It remains grayed out.

[@tomsouverain2022]

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? 👀

[@mrstephenwells]

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]

Make sure the item on the left is also set to 100vh

[@mrstephenwells]

@@Framer That works! Thanks

[@mrstephenwells]

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

[@KelvinChiuFilms]

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

[@lauramccann18]

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.

[@nealfinn4691]

hey, just started using framer, how do I make the sticky section end so that I can scroll to the next section?

[@des7638]

has anyone solved the fade between the Variables?

[@Framer]

Go into the component, select all the variants and change the transition on the right.

[@des7638]

@@Framer Hey thnaks. It still doesnt work. i must have set something up wrong i think a few people are having the same issue.

[@GodstimeUdom]

Now how would it be on mobile?

[@andrewmayo7457]

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!

[@Framer]

How to start selling your Framer templates through Lemon Squeezy kzbin.info/www/bejne/iH-Th4p3q7Fgp8U

[@dutello]

Great tutorial!

[@dpaola]

GZuS how easy it is... wow!!! thanks for that

[@sobyaaanin]

nice tutorial) thanks

[@eduardoantonio6322]

Thanks for tutorial

[@KelvinChiuFilms]

Does Framer allow you to automatically SNAP to the next section when scrolling instead of having to manually scroll?

[@aziz2366]

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?

[@DNJLWL]

That kingfisher image! Care to share?

[@GodzillaPain]

Not working at all unfortunately, whenever using relative positioning it does not allow me to move any of the objects

[@Framer]

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 kzbin.info/www/bejne/eaSyenx7osZ-osU

[@s.sandeep8017]

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

[@sonikop]

♥️✨

[@nordstrom451]

bro you forgot to explain how you make the phone rotate as you scroll

[@des7638]

wild

[@labing]

[@apexdigital.studio]

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!