Best Approaches for Implementing Scroll-View JavaScript Animations in Toddle
Hi everyone , I recently transitioned from Webflow , where implementing designs and animations was quite straightforward . Now , I ’m working with Toddle and trying to recreate the following animation : https://fitonist-app.webflow.io/#exercises . My goal is to implement a scroll -view animation where an element transforms based on its position in the viewport (e .g . , translating from 0 to 100vh ) . I ’m struggling to find the best approach for implementing JavaScript animations in Toddle —especially how to structure the code in a clean and reusable way so that other developers joining the project in the future can easily understand the logic behind it . What are the best practices for integrating JavaScript into Toddle for (scroll -based ) animations ? I ’d really appreciate any insights or guidance on this . Thanks guys ! Hey @Luca Heck we decided not to build something like what webflow has , because native browser support is just around the corner https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline Until then The best option is using the Intersection Observer Package as @Luca Heck suggested . . . . . . hold on Thanks @unicodes and @Andreas Møller ! Building such scroll animations in Toddle is a challenge for me as I am not a code expert and am very spoiled by Webflow ^ ^ I also have problems with the Intersection Observer package due to its not detailed documentation . If you have more information or know of a video on YouTube that I have overlooked on the package , that would be great . @Andreas Møller I know about the animation -timeline CSS , but that is still in experimental . . . ? I dont like to use it for an important animation especially since Firefox doesn 't fully support it yet . Thanks again - the quick response times here are phenomenal ! 🤘🏻 I dont think we have any tutorials on how to do scrollbased animations . But you can see how they use it in the intersection observer package : https://toddle.dev/projects/intersection_observer/branches/main/components/HomePage?canvas-width=800&canvas-height=800 Great to hear
.jpeg/public)