BarheimCoder

Thank you! That makes sense, I've applied your solution and it fixed the warning.

Trying to improve some code for lottie loading and I'm running into a small warning. Frame Declaration This is how I first found about loading lotties and declaring the frame to be used with scrollTrigger. let lottieFrame1 = { frame: 0 }, lottieAnim1 = { ... }; I've now moved the frame to be part of the lottie loading, requiring one less variable declaration (also helps when using multiple lotties on a page). "Invalid property" "frame" "set to" 49 "Missing plugin? gsap.registerPlugin()" This only happens once scrollTrigger takes over the animation, and my guess is that happens because the lottie syntax doesn't have "frame" property so it assumes it's an unregistered plugin. Is there a fix or it's just a matter of disabling the warning? Thanks in advance

So let's say I got the following example: crollTrigger.matchMedia({ "(min-width: 768px)": function() {...}, "(min-width: 1024px)": function() {...} }); On an ideal situation I can just have the first query as max width, and the second with a min and max, but as I can't for what I'm trying to solve, is there a way to run it like an if chain? Meaning, it breaks once a match is found instead.

Using matchmedia, is there any way to get it to run like an "if else", so once once it matches one query it stops. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() I'm aware it's not an ideal situation to be in, just got a real edge case to solve however. Thanks in advance!

I've created a pen to test this. I'm trying to run a different timeline if the screensize reaches a certain breakpoint. As of now it works well on load, but resizing the window creates a few issues: The background color I set up to test works, but it overlaps The lottie animation freezes I think when resizing the window there should be something to rebuild the timeline and clear of the content of the old one, but so far nothing I've tried really worked but there seems to be many things that could fix this like .kill, .clear or invalidateOnRefresh for scrolltrigger. Any advice is very welcome. Thanks in advance

For anyone that lands in here, I've managed to solve this, for full pen check: https://codepen.io/barheimcoder/pen/zYzEGge Multi Lottie Loading: I now load all lotties at the top of the script as usual, but I then add them to an array and check the whole array to see if it loaded, then trigger a function that contains my usual gsap / scrolltrigger stuff. Multiple Timelines My issue wasn't creating them but getting it to do what I wanted. You can just do timelines then use ".add(tlName)" to add to a master timeline. What I wanted however was to isolate the subtimelines so changing animation duration wouldn't affect the others, this was achieved by adding ".totalDuration(15)" at the last step of each subtimeline.

Think I got the timeline things to work, my biggest issue right now is getting the script to run only after all lotties loaded. From research it seems best to just load them into an array and then running a loop checking if it all loaded, so that's where I am now. I'm finished for today so will check replies tomorrow, thanks a lot for the help so far.

just like the pen, currently I got the panels positioned as absolute, so they are stacked on the same spot and they fade in as the scroll-trigger progresses (plus the animations which are not in the pen). I havent found a clear answer on this, some seem to hint at having only the master timeline as a scrolltrigger (how I did), but yours seem to hint at not having subtimelines, but separate timelines altogether. I understand that if I did a scrolltrigger per subtimeline wouldn't be the correct way to go about it (nested triggers). Edit: For the "animation.addEventListener("DOMLoaded", function () {}", how do I use it with multiple animations? Do I just run one after the other or should I somehow combined multiple lotties and run a for each loop?

Oh my bad I forgot the helper function, so I've added it on my codepen. A master timeline will help me a lot, as I mentioned there's something like the pen that goes for 7 full panels, and each panel has its own combination of lottie, scrolltrigger or both, this means that tweaking durations affects the whole timeline, where if I set up each panel as a subtimeline (nested? not sure on the proper term), then the duration changes are contained and won't affect other panels. If there's an easier way to do this please let me know. And thanks for the quick response!

Hi, I've been using gsap and multiple plugins over the last couple weeks. For the most part I've found my way around but been stuck on this for the past day. The pen is a minimized version of what I'm trying to achieve, which is a pinned panel that rolls through 7 sections (all full-screen), and some of the panels have a lottie animation tied to it via ScrollTrigger. I got the panel to work, but tweaking timings is getting complicated, which I'm trying to solve via using a master timeline so the timings are contained. The timeline bit seems to work but I can't seem to get lottie to fire up correctly. Also any pointers on the rest of the code is appreciated as I'm sure there's a lot to be improved. Thanks in advance