Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

BarheimCoder's Achievements

  1. 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
  2. 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.
  3. 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.
  4. 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?
  5. 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!
  6. 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