00:00hi everyone in this video i'll show you how to create a smooth scroll slider like this in frame
00:06r without writing a single line of code i'll also share a free remix link in the description
00:11so you can customize it yourself i'm emran from cycloto and let's get started
00:17first create a project then close this click this layers desktop click this layout to make
00:24stack then press f on your keyboard to add a frame and draw a frame like this set the width
00:301200
00:33height viewport 100vh go to the desktop height fit content now select the frame right click on it
00:41create component and name it slider or anything you'd like next click here again make it stack
00:49and add a frame like this set the width 1200 and height 800 pixel change the name to slider 1
01:01now click this fill linear gradient paste this fill color and click here paste this color
01:09press t on your keyboard to add text write this text select it scroll down change the font to
01:17and tone color white size 400 then scroll up align it horizontally and vertically middle center next
01:28upload our image change the type to absolute drag this image drop it to the slider like this
01:37again align it center set the width 550 align it bottom click this slider change the position type to
01:47absolute absolute in our project
01:52we have a total of four images so we will create four variants in the second variant
01:59here as you can see our first image is shrinking so we will set its width to 175
02:06and the remaining space on the canvas will be filled with the second variance content
02:12click this variant one or you can click here then click here to create another variant
02:18now click this slider set the width 175 scroll down overflow clip now click this text
02:27set its opacity zero collapse it and then press f on our keyboard to add a frame set the width
02:341025
02:36height 800 change the position to absolute and then align it right click this fill
02:44linear change the color to this color here change the color to this color
02:49now click here and set the value 0 change the name to slider 2 again add text
03:01now upload our second image
03:06drop it to the slider 2 change the width to 550 align it bottom
03:12for the third variant we do the same we shrink both the first and second images and the remaining
03:18space will be filled by the third variance content click here to create another variant select the slider
03:25to this slider set the width 175 and pin it from the right again set the width 175 you can
03:34decrease the
03:35value here like this or you can set the value 175 then scroll down visible clip click this arrow opacity
03:480
03:51click here set the width 850 height 800 change the position to absolute align it right fill
04:09the value here change the value here change the value here to slider 3 finally let's create the variant 4
04:19change the value to 350 scroll down overflow clip and click this text opacity 0 now add a frame
04:31set the width 675 800 position absolute align it right fill linear
04:43make it 525
04:52maybe we can decrease the font size here to 350 perfect now upload our image
05:01drop it to the frame and rename it to slider 4 set the width 550 align it middle bottom now
05:09comes the fun
05:10part adding animation to our variants but before we dive in i want to quickly tell you about today's
05:16sponsor the internet today isn't as open and simple as it used to be some content is restricted by location
05:23websites track your every move
05:27and managing multiple online accounts can feel impossible without getting flagged or banned whether
05:33you're trying to browse privately access geoblocked content or secretly manage multiple profiles
05:38you need a tool that gives you complete control over your online identity
05:43that's where go login comes in go login isn't just about privacy it's about your freedom security and control
05:50over your entire online experience here's what makes it different unblock any content access
05:56restricted websites streaming platforms or services from anywhere in the world full digital privacy
06:03unlike regular browsers go login prevents website from tracking or fingerprinting you multiple account
06:09management easily switch between different accounts for work social media or business all in separate
06:16secure profiles work securely from anywhere share access with your team without revealing passwords
06:21or risking your data no ip bans and no tracking go login hides more than just your location
06:28it protects your entire online identity plus you get 2gb of free residential proxies giving you fast
06:34private and reliable access to global content if you want privacy security and complete online freedom
06:42go login is the tool you need try it for free today click the link in the description and use
06:47my promo code
06:49cycloto40 to get 40% off and 2gb of free residential proxies take control of your online privacy with go
06:56login
06:57to make our scroll section work let's go to the home wrap this slider into a stack by pressing ctrl
07:03alt enter enter
07:05name it container set the width 5000 pixel align it start
07:12then click this slider change the position type to sticky now we need a frame that acts as a trigger
07:18this frame will tell frame are going to switch between variants as we scroll so let's add a frame
07:24change the position type to absolute and drop it to the desktop zoom out a bit then change the position
07:32to
07:32top position to 800 to appear here align it middle change the name to
07:39one and then duplicate this frame three more time by pressing ctrl plus d
07:46click here name it to set the top position zoom out a bit to see
07:541600 now here three 2400
08:06we also need to give our scroll section frame a unique name to make the scroll animation work so
08:11click here scroll down scroll section and name it one for consistency then scroll down scroll section 2
08:233 finally 4 click this slider effects scroll variant trigger section in view viewport middle select the section 1
08:38variant 2 then add section section 2 variant 3 then add section section 3 variant 4 and that's it
08:51actually we created a extra trigger so we can delete it since we don't need it click here and delete
08:58it
08:59now let's give it a preview to see if it's working or not yes it's working as you can see
09:10we have created the slider but the animation isn't as smooth as in our project to fix this
09:17double click on it click this transition change the spring to ease and leave it like this
09:24is in out for the variant that comes next we will set it to visible but keep the opacity to
09:30zero
09:30this lets us create a smooth fade animation so the next variant is slider 2 visible yes but opacity
09:38make it zero then collapse it go to the variant 2 this is the variant 2 slider 2 change the
09:47opacity to
09:48one then click the slider 3 visible yes opacity zero go to the variant 3 click the slider 2 opacity
09:57one
09:59then click the slider 4 visible yes opacity zero finally opacity one now let's give it a preview to see
10:09if it's working or not
10:44that's all for today i'll see you in the next video inshallah
Comments