🔴 LIVE - Switch Content on Scroll in Webflow

foreign we're going to be recreating this sort of interaction here whenever you scroll into the text here it changes out the image the image is staying with us throughout this section and the text is scrolling so let's go ahead and start building this out what I'm going to do is add a section onto my page and I'll call this something like um home scroll section and I'll go ahead and tag it as a section for SEO and Screen readers and inside of that section I'm going to have sort of like two columns so I'll go ahead and set the section to grid and we'll go ahead and delete our rows so we only have the two columns we'll have a zero pixel gap between the two so they just stay side by side so inside the home section I'll drop in another div and this is going to be what holds the image we'll give it a class of Home scroll um let's call it something like let's say image um or visual homeschool visual perfect and we'll go ahead and give this a height of 100 VH so we want to make sure it's as tall as the screen and we'll also go ahead and set it to flexbox and we'll say align and justify the center so that way whatever we put in here just stays right there in the middle I'm also going to select my section real quick and give it maybe a different background color and different text color here so we're good there so inside of this um sort of visual I'll drop in a collection list and we'll go ahead and pull the collection list from a collection I already have set up here so the wrapper will go ahead and give a class of Home scroll uh I'll call it image wrap and then the list inside that let's give it a class of Home scroll image list and the item inside that let's give it a class of Home scroll image item so we want all the items to be absolute on top each other I'm going to select the wrap and I'll give it a width of 30 m and a height of 40 m and I'll give it a Max width of 100 so it doesn't get wider than its parent and a Max height of a hundred percent and then I want this uh sort of visual here to have some padding on all sides and I wanted to match the padding that I have throughout my entire site so I'm just going to give this visual a combo class of page padding and that way it just has this padding on all sides there so that's looking good we'll go ahead and select the list and we'll give it position relative give it a hundred percent with 100 height so it covers the full wrap and then the items we can go ahead and set to Absolute so they all sit on top each other they can be a hundred percent with 100 height and inside the items I'll go ahead and drop in an image I'll give this a class of Home scroll image and I can just set it to 100 width and height of the item and let's give it a fit of cover let's give it a radius of 2m and let's go ahead and pull the image from our CMS here so I'll go ahead and select the wrap and I'm going to apply sort of a sorting order to the wrap and we want to sort it by a number field I have in the CMS so that just controls the order there so that wraps looking pretty good and we have our Max height Max width everything's set up there so then we can go ahead and drop in the next div that's going to hold sort of our content here and for that we'll give it a class of Home scroll let's call it content and I'm just going to go ahead and give it that same sort of page padding class that way we have consistent padding on all sides of it and then inside that content we'll go ahead and drop in a collection list and we'll pull it from the same collection and the key here is we want these to be sorted in the same order as our images so we'll go ahead and set same sorting order here and we'll go ahead and select the wrapper give it a class of Home scroll we'll go ahead and call this a text wrap and inside of that we'll have a home scroll text list and then the item can be a home scroll text item and we'll go ahead and drop in sort of a heading maybe I'll do something like H2 I'll give it the same sort of font size that I used up here which I believe was text size H1 so I'll go ahead and throw that class one there and then I'll also drop some paragraph text inside the item and I'll pull that from my paragraph text here and I'll select the item let's go ahead and flex it vertical that way we can have a little bit of Gap to separate sort of the paragraph and the text and I'll go ahead and pull the text from my headline there so if we preview that's looking pretty good I may set a Max width like on the um wrap just so that this paragraph text doesn't spin out to be too long so with the wrap selected I'll do something like 30m Max width that just keeps it nicely contained there and for this home scroll content let's give it some padding of like 40 VH on the top and bottom so we have maybe we don't need to do quite that extreme we can try 30 or something but we want to give it a good bit of space right there and then we'll select the items and we'll give them some top and bottom padding maybe something like 3M or something like that so that's looking pretty good there so what we want to happen is we want this visual which is um 100 VH we want it to stay with us while we scroll past the larger sort of text panel next to it and to do that we need to make sure none of our parents are set to overflow hidden so every parent of a sticky item needs to be overflow visible and if we select our sort of visual panel here we'll go ahead and give it a position sticky then we'll say 0 pixels to the top so it stays with us while we scroll past this entire content block here so now you'll notice content block is scrolling and the text panel is not um so yeah that that's working good there and then from that point I think we'll just want to stack things or mobile so let me go ahead reset this back so here on tablet what we're going to do is set this visual column to display none we don't want to see it at all and then we'll select our entire section give it display block and then we'll give the content somewhat of an em padding on top and bottom like so and we want the image to appear here so to do that we're going to go ahead and put an image inside our item and I'll give it something like home scroll photo for the class but we're going to set it to display none on desktop we don't want to see it at all and then on tablet we can switch it to display block give it like a hundred percent width and we can pull it from our image field give it somewhat of a height in here and let's give it a fit of cover and a border radius so that way we have an image above each of these titles here on mobile and we just kind of hide our entire sticky image on mobile also select the wrap and give it margin Auto left and right to keep that centered and I think that's good for our mobile layout so that's looking nice there and then on desktop we have the split screen again I'm also going to select um let me select the sort of layout here you'll notice we're getting a little bit of horizontal scroll I just want to make sure I'm keeping these columns at 50 width each so I'm going to do 50 50 and that way we're sure this is always an even split here and that fixes our horizontal scroll um so yeah that part's looking good and other than that it's just linking up our code I'm also going to um copy these sections and that way we can just see how this looks with multiple instances of the same sort of section module throughout the page so the first thing we need to do is install we're going to be using gsap for this and if we go to greenstock.com forward slash install we need the gsap core library and we need the scroll trigger Library since we're going to be ending animating this on scroll so I'll go ahead and copy those two and we'll head over to our page settings we usually want to put this in the before body tag section right here and then I like to write my code in code sandbox just to make it a little easier to catch errors and work faster so to do that you can create a free code sandbox account and then create a blank project new from a template and just use the static template here and so that'll spin up a project for us right here and we can go ahead and create a file I usually name this script.js and to access that file we just copy the URL of our project let me do let me throw some code in here and so if we go to a new tab we paste in the URL of our project and we type script.js behind it so there we can see our code this is a direct link to our code right here so I'll go ahead and copy that and we're going to add it inside script tags like so and we want to paste the link to our code sandbox file right inside those script tags so once we have that we should be able to go ahead and publish and we can test this out and see what we got all right so we're going to write our code for it and we want this to work for multiple sections throughout the site um so we're going to start with sort of a jQuery each Loop which means it's just gonna we can write some code and have it do the same thing for each instance of an element um so in our case we'll probably want to Loop through each of the scroll sections which are these sections here so I'll go ahead and Target those scroll sections and let's say we want to find um two things we want to find the trigger items which are going to be these items right here so whenever each of these scroll into view it's going to count as a trigger to switch our interaction and then we want to find our Target items which are going to be these items here and we want to change sort of opacity and different things on on these targets um so I'll start with the trigger items we'll copy the class of these sort of text blocked items here and we'll Target those collection items so I'll say create a variable called child triggers and I'll grab the section I'm currently looping through that's this and we'll find the text items inside of this section We're looping through and then we'll create another variable called child targets and we want to find the section That We're looping through and then we want to get something inside of that section and in our case we're going to be getting these these items here the images those will be our targets so we have those two and then we're going to create a function that we can basically reuse we can call this anytime we want to switch the class on those items we'll be adding like a combo class of as active to these so I'm going to create a function called make item active and then we can pass in an index or a number of the item that we want to make active and we're going to grab all of our child triggers and we're going to remove a class from them of his active first so it just like clears it out if any of them were active previously and we'll do the same thing for our child targets we want to clear out the is active class from both of those then we want to grab the triggers inside of this section and we want to grab only the one that matches the number we passed into our function we can pass in any number so maybe we'll say we'll grab the first trigger and we want to add a class to it called is active and then we'll do the exact same thing with our Target so we'll grab all our targets we'll filter it only down to the one that matches the number we passed into the function and we'll add the class of his active to that Target so we're clearing out the class of is active from the trigger and targets and adding it only to one trigger and Target inside the section so what do we want that class to do well we're going to turn the opacity down of all of these uh image items here and we'll apply a transition to opacity maybe we will do like 300 milliseconds or something and whenever we add the is CL active class on we want to turn the opacity back to 100 only for that item that has this active class so now when we add that class we see it fade up and then for all of these items here we want the opacity to be something like 20 and then whenever we add is active on we want to turn the opacity up to a hundred percent and again I'll add the same transition to opacity 300 milliseconds so that way we see it fade when we add this class on and then on a tablet we want to just turn the opacity back on the default class to 100 um that way when it's adding and removing the class we're not really seeing anything happening on tablet because is active and the default will both be 100 on tablet um so that's looking pretty well there so if we publish this and we come back and we refresh so nothing has the class of is active right now in either of our sections here um so what we want to do is make the first item active on page load and to do that we can just run this function we've already created and pass in zero so we're making the first item in both list active from page load so if we save that there we go we get first item active here and first item active here in each list so now next we can really just create our scroll trigger I'll create scroll triggers and we want to create a trigger for each of these items in the list so when this item comes into view we want to do something when this item comes to view do something else so each one of these sort of trigger items will get their own scroll trigger instance and to do that we just need a nest in each Loop inside of another each Loop so we're already looping through each section here and then we're going to say inside of each section we're grabbing the the triggers that are inside each section and we're going to Loop through each one of those triggers inside of this section and from there we can just create a scroll trigger so we can do scroll trigger dot create and let's say we want our trigger element to be this and this refers back to the the trigger that we're currently looping through and we want our animation to start when the top of this trigger is at the center of the screen and we want it to end when the bottom of this trigger reaches the center of the screen and I'll go ahead and apply markers true just so we can see what that does so if we go ahead and save that and we come back here and we refresh let's see what we got so you'll notice our start point and our endpoint are both based on the center of the screen and we want our animation to start when the top of this trigger reaches Center screen and we want it to end when the bottom of this trigger reaches Center screen and then this next item will start when the top of that item reaches Center so since the top and the bottom of these items are directly touching each other this item will start as soon as the previous one ends we're making sure that they both start and end at the same time so that should be good there and then what we want to do here is run in the animation so we have all these different callbacks we can use in scroll trigger like we have on enter callback and I've covered these all in my gsap course but basically we can run code when sort of like the trigger leaves view of the screen or enters or any different thing there in this case we're just going to use on toggle so that way it can cover both the enter and the leave from both directions and it passes in sort of a variable we can use called is active to let us know if we're either entering this Trigger or leaving it we can do different things and we only want to run our code if we're entering so we'll say if is active so if we're in the middle of this item here all we want to do is run our function and we want to pass in a number that we want to make active a number of the item so whenever We're looping through all these child triggers inside of this section it's counting them While We're looping through them and it's saving this in this index number here so it's saying We're looping through item one create a scroll trigger for it item two create a scroll trigger for it so we can just use this number here and pass it into this function so whenever we come into view of scroll trigger 3 it's going to take the the number associated with that trigger and throw it into this function and this function we created it outside of the loop so that way any of these items can use the same function so let's go ahead and save it and let's refresh and let's see what we got so whenever this second item crosses this point here it becomes active and the one that was previously active is no longer active and same with the third that one becomes active and the great thing about this is scrolling through this here isn't removing the clasp from our second instance here it's only handling um child triggers and child targets so the one inside our current section so it's really localized we're not removing class from all triggers or all items only the ones inside the section so all this is section specific which means this is still visible and also when we scroll out of view of an item we're still going to have an item active which is great um so yeah because we're only we're only switching the item when one comes into view not when it leaves so yeah that is changing out the image it's changing out the text it's keeping one active at a time and it works across multiple sections um I think that wraps up everything for this sort of interaction thanks so much everyone for joining the live stream um and yeah really appreciate you all have a great rest of your day

Channel: Timothy Ricks

Views: 32,989

Keywords:

Id: FUeTPMJHtrc

Length: 20min 10sec (1210 seconds)

Published: Fri Feb 24 2023