Animations, Navigation, Scroll

Framer Update: CMS Sections

Benjamin

8:09

23K views

Jan 30, 2023

About this lesson

This release adds support for Scroll Sections to be defined within CMS Collection Lists. This means you can now link into CMS Content directly, as well as apply Scroll Effects like Scroll Animations and Scroll Transforms, unlocking all new creative use cases.

Remix Demo: https://indx.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce CMS support for 0:07scroll sections this new feature unlocks 0:10new use cases for both linking and 0:13scroll effects so let's dive into our 0:16demo project to see how this works so 0:20let me bring up the preview to show you 0:22what we have so far 0:25so we have a fixed sidebar and then a 0:28scrollable list of images the images 0:31have a little Parallax effect and none 0:35of the links in our sidebar do anything 0:38just yet all of the content in our demo 0:42project is sourced from a single CMS 0:44collection and this collection currently 0:47contains four items now let me jump back 0:51to the canvas to show you the collection 0:54lists this is the first one and it's 0:58repeating an item component for every 1:01item in our collection 1:03and then this is the second one that 1:07actually visualizes all of the images 1:10and we would like to connect the two so 1:14clicking on any item on the left Scrolls 1:17the page to the matching item on the 1:20right plus it would be ideal if the 1:23items in the sidebar had an active State 1:26showing you which item we're currently 1:28viewing so I'll start by adding a scroll 1:32section to every image in the collection 1:36list on the right 1:38and we can call this card or project 1:41I'll go ahead and call this one project 1:43and because layers within a collection 1:46list get repeated we only have to define 1:50a section once let's start by fixing our 1:55sidebar I'll select the component here 1:58and I'll double click to show you how 2:00it's set up this component has two 2:03variants one called inactive and one 2:06called active that highlights the item 2:09let's start by connecting the title 2:12variable to the title field from the CMS 2:15making each item unique 2:18that's much better next let's add our 2:21links 2:23our sections are on the home page 2:27they're called project 2:30and having selected our section I'm now 2:34presented with a new property called 2:36item 2:37and framer now detects that our section 2:40exists four times on our page one for 2:44each item in our collection 2:47so we could use this to link to a 2:50section within a specific item in our 2:53collection like the notice project here 2:58however doing this means that every 3:00single one of our links always points to 3:03the same item now we would like for each 3:07of our links in the sidebar to point to 3:11the matching item from our CMS 3:13collection to do this we can go back to 3:16our link and instead of pointing item to 3:20a specific one we can click on the 3:23little plus here to use the slug 3:26variable the slug is the unique 3:29identifier for every single item in our 3:32collection 3:33and as you can see I can now click any 3:36one of these links to smoothly scroll 3:38the page to the matching section from 3:42within our collection lists 3:45now we can apply this same concept to 3:48scroll effects so let me add a scroll 3:51variant to the items within our 3:54collection list 3:55I'll select section in view as the 3:57trigger set the viewport to Center and 4:01I'll select the project section and I'll 4:05again turn item into a variable to 4:08reference the slug 4:10I'll switch the variant to active and 4:14just like that we connected the two 4:16collection lists and as I scroll past 4:20the page the corresponding item in the 4:23sidebar will highlight 4:26and this also now works on click 4:30so every item in the left hand sidebar 4:33has a link that points to the matching 4:36section on the right 4:38plus they have a scroll variant effect 4:41that checks if said section is in View 4:45and if it is it switches the variant to 4:49active 4:50next let's add a scroll animation effect 4:53to our cards on the right 4:57I'll set the trigger to section in View 4:59and I'll again select the project 5:02section 5:03and set item to the slug variable 5:07viewport to Center replay to yes 5:12and then for the effects I want to dim 5:14the inactive ones and push them a little 5:17bit to the right 5:19and I'll keep the transition for now 5:23so we can have a look at what this does 5:26so far 5:27so our effect is working but I think the 5:31transition is a little fast so let's go 5:33back and make this just a little bit 5:36slower 5:37I'll reopen the scroll animation and 5:40I'll set the enter and exit transition 5:42to a lower stiffness value of about 200.5:47and after republishing that's feeling a 5:50lot smoother 5:52and we have this cool layered effect 5:54happening where we have our scroll speed 5:57Parallax on the image and the dimming 6:01and X offset happening on the wrapper of 6:05the image 6:06finally we can also add some scroll 6:09animation effects to the text layers in 6:13our cards 6:14and I think you know the drill by now 6:16we'll again use section in View and 6:19we'll make sure that the item is set to 6:22the slug variable this ensures that it 6:25works for every single item in our 6:27collection list 6:29and I'll simply have this one appear 6:31from the bottom 6:34and what I can do now is right click on 6:37our text layer and hit copy effects and 6:40I'll right click on the other text layer 6:42and I'll paste the effect 6:45and then I'll add a bit of delay between 6:48the two I'm thinking 0.1 for the first 6:52and 0.2 for the second one 6:55and now let's have a look at the final 6:58result 6:59every item in the sidebar correctly 7:02highlights and smoothly Scrolls to the 7:04matching section 7:06plus every image fades in from the right 7:10and has a little staggered text 7:12animation within it and all of this with 7:16content that's sourced from the CMS both 7:19for the links and for the images now you 7:24can get creative in applying these 7:27features as these features unlock new 7:30types of websites to be designed in 7:32framer using CMS content and Concepts 7:36like linking smooth scrolling scroll 7:40variants scroll transforms and scroll 7:43animations and that's pretty much it for 7:47this update video you can find remix 7:49links for these Demos in the description 7:52down below thank you so much for 7:55watching we really hope you like these 7:58new features and stay tuned for more 8:00updates coming soon

TeachesScroll Variants Section & Anchor Links

Also coversCMS Fields Collection Lists Collections Component Variants Components Links Remix Links Scroll Animations Scroll Speed / Parallax Scroll Transform Sizing Stagger Transitions & Easing Variables

Watch on YouTube ↗

‹ Framer Update: Version History

Framer Update: Slideshow 2.0 ›