Best Approaches for Implementing Scroll-View JavaScript Animations in Toddle

  • luca.heck-1335538667594186783

    Luca Heck

    6 days ago

    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!
  • Tod-1335538669385154622

    Tod

    6 days ago

    Great energy @Luca Heck! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • luca.heck-1335552063022567435

    Luca Heck

    6 days ago

    Hello @Luca Heck, that’s a great question! Take a look at the "Intersection Observer package"! That should be the answer to your question lol😂
  • uunicode-1335553954234503228

    unicodes

    6 days ago

    Hello @Luca Heck , if you achieve or already achieved that animation level, please share with us. It would be awesome a video on this kind of animations! 🚀
  • andreasmoller-1335560667666845717

    Andreas Møller

    6 days ago

    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
  • luca.heck-1335563195233865790

    Luca Heck

    6 days ago

    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!🤘🏻
  • andreasmoller-1335563503603421265

    Andreas Møller

    6 days ago

    Scroll timeline is not experimental, but it does not have cross browser support yet. So no I would not recommend using it.
  • I dont think we have any tutorials on how to do scrollbased animations.
  • andreasmoller-1335564014117191753

    Andreas Møller

    6 days ago

  • luca.heck-1335564833373945958

    Luca Heck

    6 days ago

    I've only been on Toddle for a week - so I'm still loving experimenting and the possibilities are gigantic! It's been a long time since I've had so much fun... I'll find out how to use the intersection observer properly:) Thanks Andreas!
  • luca.heck-1335565122298712147

    Luca Heck

    6 days ago

    And ChatGPT and Toddle AI helps😂🤝
  • andreasmoller-1335566262415130645

    Andreas Møller

    6 days ago

    👍
  • Great to hear
  • luca.heck-1335566687486869595

    Luca Heck

    6 days ago

    Ok, I didn't say anything about the “bad documentation” for the package haha... I've only just realized that you can view the entire code😆🤦🏻‍♂️ Thats awesome!!!
  • andreasmoller-1335566823814594620

    Andreas Møller

    6 days ago

    Yes that is usually the best way of learning how a package works 🙂

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.