Relume
Log in

Community forum for knowledge and support

Updated 7 months ago

Building an interactive and engaging scrollstory

At a glance

A community member is looking for advice on the best method to build an interactive and engaging scrollstory, with a focus on Lottie animations and timed interactions on a web page. They are seeking an experienced developer who can help them "tell a story" as the page is scrolled, while ensuring efficient page load and cross-device compatibility. Another community member responds that they have experience with scroll-based interaction using GSAP, Lottie, and Three.js, and can provide pointers and brainstorm ideas. The original poster thanks them and says they will connect with their developer the next day. A third community member then shares several library names and tips, including Theaterjs, sprite sheets, Three.js, and GSAP scrolltrigger, to help with the vision, even though they are not available for web development at the moment.

Useful resources
MMike Crompton
·

Hi 👋 all - just a quick shout out to see if anyone is able to give some advice on the best method of building an interactive and engaging scrollstory. I am looking for a very experienced dev in lottie animations and timed interactions on a web page so that one can "tell a story" as the page is scrolled... also wanting the page to load efficiently and work across devices. Whether for some quick consultancy with my team or to actually build... I am open to input. Mike

M
A
4 comments
MMike Crompton

Hello again - bringing this to the top of the list as I would really appreciate any input and guess it drops down the thread quickly?! Thank you. Mike

AAnand Magaji

Hello, i have experience with scroll based interaction (gsap) both with Lottie and threejs. I can definitely help give a few pointers and brainstorm ideas

MMike Crompton

Thank you - we have a couple of conversations going on at the moment, but let me catch up with my dev tomorrow and if appropriate I will connect you. 🙏

AAnand Magaji

Sure, I understand, hope you get a effective solution for the vision you have!

Just in case I will drop a few library names and tips, even if not for yourself might help others.

  • Break your animation into stages, where someone could pause. Use scroll snapping for these locations.
  • Start loading assets asap. Use a custom load function to get assets async without blocking render.
  • Avoid relative movement or change of shape for 3d objects, bake lighting when possible

Only sharing this to help anyone. I am not available for web-dev at the moment. Connect with me if anything I have shared is interesting or anyone needs help.

Add a reply
Sign up and join the conversation on Slack