Pricing Blog

Best Approaches for Implementing Scroll-View JavaScript Animations in Toddle

  • luca.heck-1335538667594186783

    Luca Heck

    4 months 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

    4 months 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

    4 months 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

    4 months 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

    4 months 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

    4 months 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

    4 months 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

    4 months ago

  • luca.heck-1335564833373945958

    Luca Heck

    4 months 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

    4 months ago

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

    Andreas Møller

    4 months ago

    👍
  • Great to hear
  • luca.heck-1335566687486869595

    Luca Heck

    4 months 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

    4 months ago

    Yes that is usually the best way of learning how a package works 🙂
  • s.lucian0777-1351279215898529816

    lucian0

    2 months ago

    I would love to do something like that animated scroll have we got any updates on ways to accomplish something like that in toddle
  • Tod-1351279217857400842

    Tod

    2 months ago

    Great energy @lucian0! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • lucasg-1351284953295622255

    Lucas G

    2 months ago

    The way to accomplish it right now is to use observers as mentioned above