00:00hi everyone today i'll show you how to create this type of smooth image scroll effect in framework
00:05using click interactions without writing any code the remix link for this project is in the
00:10description i'm imran from cycloto and let's get started create a project click this layers
00:17desktop click this layer to make it stack then press a form keyboard to add a frame set the width
00:23fill height viewport 100vh click this desktop set the height fit content click here to make it stack
00:31right click on it create component name it content or anything you'd like divide the layout into two
00:39one side is for the image and the other is for the text and content set the width fill height
00:46viewport
00:47100vh duplicate this by pressing ctrl plus d go to variant one set the height fit content
00:55reduce the gap to zero double click on it name it all images make it layout and inside this layer
01:02create another frame fill viewport click this fill image upload our image name it one duplicate this
01:11two more time upload our second image and third image now click this frame change the fill color to
01:19this color press t on our keyboard to add text paste this text select it scroll down change the font
01:26to
01:27this font size 150 make it layout and width fill align it center change the color to white reduce the
01:40line
01:40to one to one and then select these three duplicate this drop it here change the fill to
01:46fixed height fixed lock it set the width 100 and wrap them in a stack name it preview
01:55direction horizontal move it to the top select these three add some radius 10 now move it to the bottom
02:04this whole layer by pressing down arrow on our keyboard click here name it text content
02:10add some gap 50 next we will create two more variants for these two images maybe we can set the
02:17overflow to
02:17visible to see these two images to do that first select all the images again wrap them in a stack
02:25name it
02:26wrapper set the width relative 100 percent and now change of position type to absolute align it top unpin it
02:35next next create two more variants click here for the second variant move the second image to the top
02:43let's collapse it and now wrapper like this or you can set value minus 800 we need to reduce the
02:53gap here to 0
02:54so go to the first variant wrapper gap 0 name it desktop then go to the variant 2 wrapper unpin
03:03it
03:03from the top finally variant 3 wrapper move it like this
03:10unpin it again as for the first 0 unpin it now connect the navigation to scroll click here
03:18click this icon and connect to itself i mean the variant one desktop then click here connect to the
03:26variant 2 and the third to the third variant
03:30now let's give it a preview to see how it looks
03:38yeah looks perfect we can add some transition to make it smoother double click on it transition is
03:46and paste this value add some time 0.8 also you can remove the fill color now let's give it
03:53a preview to
03:54see how it looks
03:58yeah now it looks perfect
04:02all right now let's make it responsive click this desktop click here to create another variant name
04:08it tablet now go to text content preview and remove its interaction
04:16click here this tablet width 810 go to all images wrapper set the width
04:24relative relative 100 click here scroll down size may be 100 and now click two more variants
04:32and repeat the process click this wrapper move the second image to the top unpin it
04:41this wrapper unpin it click here and connect to itself then click here connect to the second finally
04:49click here connect to the third as per the phone click here set the width 390 remove the interaction
05:02option then click here font size 45 and this image select all width 45
05:16minus 800 unpin it and finally wrapper 1 600
05:27also we need to change the wrapper width to this wrapper width to relative 100 click here change the name
05:36to phone
05:37now click here break points add tablet phone now let's give it a preview to see how it looks
05:50perfect connect it
05:54connect it
06:03this is the tablet
06:06it's not working let's fix it
06:10we need to connect it and for this connect it here as for this connect it to the tablet first
06:19image
06:20it's for the second and connect to itself similarly on here
06:42as per this connect it to itself
06:52connect it to itself
06:53connect it to itself
06:53now let's give it a preview to see
07:06and for the phone
07:15and that's pretty much it if you found this video helpful please like the video and subscribe to the
07:21channel that's it for this one i'll see you in the next one inshallah
Comments