mmc215

Our project kicked off today, wanted to follow up and give thanks for the help gang! @GreenSock @Cassie https://mindhealth.nba.com/

Wait you folks want to be paid for all this hard work and attention now?! lol I will slow my roll a bit, don't mean to abuse the privilege. At all. I've learned a lot in the past 72 hours, engaging early in the process has helped tremendously. Even just now I think the lightbulb went off. I can use my timeline build to achieve everything I want at the top of the page and when it comes to transition through the various content sections I can just reintroduce the lottie already in a pinned position where I want it and control its animation states via gsap.to + scrolltrigger events tied to the sections. Which leads me to another question. Are there performance issues with loading the same lottie file multiple times with different let instances? Does that file cache or is that a specific operation I'd need to pursue? I realize that is not gsap specific ?

Cassie! Woohoo thank you it really is powerful to have control of the lottie playhead. I have it working pretty nicely in a fork of my codepen. I'm going heads down for a bit but I'm curious if I am understanding the philosophy of building this type of animation correctly, particularly the second question below. My worry is that if I can't tell this lottie element to do things based on when its container (.lottie-container) encounters new sections of my page and I'm 100% relying on adjusting durations and the timeline end value then I'm going to be in for a bit of trouble for different device sizes as well as if/when any of the content changes. Thanks again.

Actionscript! ? Ok so I'm getting my hands a little dirty here. Couple questions off the bat (codepen below): 1) In a master timeline structure, if we're pinning the lottie element at the start how do we go about unpinning it momentarily so that it can transition from center of viewport to top of viewport before being pinned again? 2) More broadly, when building animations on a long scroll page like this where one element interacts with multiple sections of the page is the timing of that just down to adjusting the duration? Or is there a way to use triggers hooked on the section divs to establish the timing. I'm wondering about responsive breakpoints / mobile considerations. 3) Creating playhead animations frame-to-frame for the lottie: I haven't found a good source for how this is done. I saw that LottieFiles has Interactivity docs that demonstrate how you can chain parts of the lottie timeline together but would I then need to import their lottie-interactivity plugin just for this? (https://docs.lottiefiles.com/lottie-interactivity/configuration-and-usage) // single section: LottieInteractivity.create({ player: '#firstLottie', mode: 'scroll', actions: [ { visibility[0,1], type: 'seek', frames: [0, 300], }, ] }); // or chaining multiple: LottieInteractivity.create({ player:'#lottie-target', mode:"chain", actions: [ { state: 'none', transition: 'none', frames: [48, 110] }, { state: 'none', transition: 'none', frames: [110, 198] }, { state: 'none', transition: 'none', frames: [198, 110], //reset: true } ] }); I also found another forum user that was using a function somewhat like this but it didn't appear to be complete: proxy.onLoaded(init); function init() { .fromTo(proxy, { frame: 48 }, { frame: 110 }, 0) Anyway, having fun here. Appreciate you all. https://codepen.io/mattCampy/pen/GRYrjqN

Hello all! I am a longtime greensock advocate (joined in 2009!) but come from the visual design side so most of my experience is providing devs with annotated mockups and assets to build. Long story short - I just want to learn to do these things better myself and with tools like Webflow the bar to entry has lowered drastically for designers like me to build really cool stuff on my own. So - I'm coming here as I start my journey into building a really exciting project and before I start mucking up the code with copy/paste stuff that's all over the internet I'd like to talk strategy. I hope to utilize gsap/scrolltrigger for many parts of the experience but the fundamental core concept I'd like to achieve is built around a single lottie animation that is pinned and played via scroll in three sequences (frame 0-50, 50-100, and 100-50) as the user traverses down the vertical page through various sections. I have scripted the sequence of animation here To start, I've found the scrollLottie plugin by Chris Gannon and subsequently the helper function made by Greensock. Seems like the native implementation is the ticket. Beginner questions: 1. Should this whole sequence be established via timeline structure? Do I initialize the LottieScrollTrigger inside the gsap.timeline? let tl = gsap.timeline({ scrollTrigger: { trigger: "#container-div", pin: true, start: "center center", end: "+=750", //should I set an endTrigger to reference when its time to pin at the top of section 2 and beyond? use duration instead? scrub: 2 } LottieScrollTrigger({ target: "#lottie-animation", path: "https://www.website.com/file.lottie", speed: "medium", scrub: 2 // seconds it takes for the playhead to "catch up" }); 2. Do I understand correctly that I should be pinning the container-div and animating the objects (lottie-animation, images) inside? 3. How do I build out a sequence of animations within this timeline structure, is it a new scrollTrigger element each time repeated as we go down the page? Understand this is both complicated and also really amateur hour but I am so grateful for the help. After this step I will be able to provide a minimal demo if I/when hit any snags!