Here is a scroll effect, I created for a client for a project that didn't work out. He wanted scroll effects exactly as the intercom website. I made it, and made it responsive for all screen sizes!
I started understanding the effect on mobile and desktop from the intercom website. Though the effects looked easy, but in implementation it's quite tiring and long process to make that happen.
So, I started experimenting on how can I create this. I went with different option like variant switching, scroll animations, but to keep it simple, I went with 2 components, one for desktop, and one for mobile devices.
For desktop variant, its a component, where I have 10 versions and each connected with hover property, which displays the image.
That is fairly simple to achieve, just complicated to update!
Next we move on to the tablet version, in this the trick is to use a code override to make it work while the user scrolls.
So the code is given below, and the rest of the variant is similar to the desktop version.
Code Override
Now using this code override, we will make the mobile version. Trick with the mobile version is that it should stay sticky on the bottom left as it is on the intercom website.
This is the only major change in the component, rest of it is fairly simple.
So, this is how I made the interaction work, and managed to make it responsive in framer. Though I don't like the fact that it's complicated to change the information, and add new items, but I had to make it work in less than 4hrs, so I guess this can work.
Let me know your thoughts, and if you like this, share this free remix on X with your community.
See you soon!
X / Twitter
Follow me here for updates, tips, and insights. I'm most active here, sharing everything from important news to casual thoughts.
Load More
© 2024 Bright Life Creations. All rights reserved.
Add social share buttons to your Framer website.
Let visitors share your page to their social media accounts in one click.