Search the Community

Hello! Is it possible to have a lottie animation work while horizontally scrolling?

Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.

Hey guys, sorry for no codepen this time...I wanted to check if it's possible first and ask if you know any demos that try this approach. I was trying to find any examples but from what I see no one tried to do it yet. While I wait for the answer I am working on a demo. I have a lottie animation - it's a 3d model being rotated 360 degrees. I want to be able to drag on x axis to "rotate" that 3d model, without using any UI element - just simple drag anywhere on the area to start rotating. So first of all, is it even possible to use draggable this way? Maybe there are some demos that show control of lottie with drag on mouse x? All codepens I saw were using scrolltrigger to control the animation, but I can't do that. Maybe observer is also an option?

Hey all, What I'm trying to do: Use scrolltrigger to control the progress of the lottie file Use scroll trigger to fade in text blocks sequentially, then fade the text block up and out at defined times on the timeline What's happening: Even though I set the text to not be visible initially it still all appears. Can't properly link the animation of the lottie and text. Can't seem to get the text to fade out using stackblitz (but it fades out one by one locally ?) Any assistance greatly appreciated Minimal demo: https://stackblitz.com/edit/react-fra2qi?embed=1&file=src%2FApp.js

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!

Hi everyone ! I am planning to create this sort of website (refer to the video linked below) where as you can see the mockup of a phone, so in that phone, a lottie animation should run when the user scrolls down and in the right, you can see the heading and some description, while scrolling down, the phone's mockup is stuck through out and doesn't get scrolled down, only the animation inside it runs while the right side of the page (heading and text and all) gets scrolled down. (The phone part is what I have been able to pull off so far, but I am stuck with the part on the right) Please let me know how can I achieve this ? Thank you a lot in advance. @GSAP Helper @OSUblake (sorry for the audio in the video, kindly ignore)

Hi there, does anyone know how I can bind that slider I createt using dragdealer to a lottie animation? I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation. I would really appreciate any help, thanks.

Hello, I'm currently working on a site with lots of heavy Lottie animation, I'm using THIS linkup between ScrollTrigger and Lottie and it works perfectly. my only problem is that I want to create the Lottie DOM element only when visible in Viewport. I created this pen and as you can see on every progress update the animation start from the beginning and catches up. any advice? Thanks in advance!

I have an issue where when I try and pin an element that contains a Lottie file it never calculates it’s height properly. I think the issue is that the Lottie file uses a custom element that creates the markup that dictates its height when it is connected to the document, however when pinning the element is connected multiple times while it gets wrapped in the pin-spacer div and it doesn’t render until after scrollTrigger has done it’s calculations. I have tried using ScrollTrigger.refresh() but that seems to cause the Lottie file to reconnect so has the same issue. Is there a way to delay scrollTrigger from calculating until after the Lottie file has run or a way to refresh scrollTrigger without causing the custom element to reconnect? Many thanks!

Hey @OSUblake Could you help me out one more time please? Here is my repository : https://github.com/Sameer-mishra1/Dbait-website As you can see in a desktop, when you scroll all the way to the bottom, the Download button doesn't seem to be working. When I inspected it a bit, I realised that there's some kind of overlap between the animation view and the button and that's why nothing happens on clicking the button. I am not able to figure out the exact reason though, please let me know what you think could be the plausible reason. https://drive.google.com/file/d/1iOcjNoqBP9sOtw6aJxG47Ldlgib293xj/view?usp=sharing

hi guys! my problem is, that my lottie animations, which are combined with a scrolltrigger sometimes start to flick in safari. the flickering only appears above a certain viewport. as i said sometimes the flicking happens sometimes not. i already tried to just make the animation not fullscreen, but unfortunately it doesn't help at all. i also noticed, that the flickering is much worse if i visit the site on a ultrawide display. i also thought about just implementing the animations as videos, but there are like 6 animations on one page, so i didn't want to let the loading time explode. in the demo i haven't noticed any flickering so, if u want to see the full page: www.sterngasse.at

Hi, So I basically have a div which has my Lottie Animation which I have hooked with ScrollTrigger using one of the helper functions as mentioned here. Everything is working fine except I want to add a preloader to my website. I deployed the entire code using jQuery and am firing the preloader on window load but the Lottie animation doesn't seem to follow that. My Lottie file loads after everything has loaded and preloader has been hidden due to window load. What should I do ? I'm stuck. Thanks in advance.

Hey, I have a lottie animation which I have hooked with LottieScrollTrigger function as mentioned in the helper functions sections and it's working fine as well but the issue is that it takes too long to load first time on a mobile as compared to when I test it in mobile viewport of chrome dev tools (By disabling cache). If it helps, my animation is approx 94MB in size and I have a blazing fast internet connection. The animation is basically a bodymovin json file of a png sequence. What possibly could be the issue here ?

Hi, I am fairly new to web development, so this may be a silly problem but please help me out: Using GreenSock | Docs | Helper Functions as a reference, I have animated two of my divs, which were animating perfectly on scroll in the page, until I tried to add a navigation bar to the page. For a mobile, it is a hamburger menu which when clicked, opens up the navigation bar on the right side of the page. It works perfectly as long as the viewport has anything but my scrolltrigger hooked divs. The moment one of the scrolltrigger related div comes in the viewport, the navigation stops displaying. Is it possible that there is some kind of conflict between the click EventListener of Navigation & DOMLoaded Eventlistener of the scrolltrigger as mentioned in the GreenSock | Docs | Helper Functions ? What should I do ? YOU WILL SEE THE NAVIGATION BAR ONLY IN SMALL SIZED VIEWPORTS. I have attached a sample codepen link and also 2 images which I hope will help you understand the issue. (Although a button is not visible but it works & is placed on top right of the codepen, please bear) Thanks in advance.

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

Hi all, Loving the vibe here? This is my first post in the forum ever. I'm trying to implement a scroll based Lottie animation with GSAP 3 and the ScrollTrigger plugin. I've found a solution with GSAP 2 and ScrollMagic but things changed in the newest Version. Does anyone has a working example? Thanks for your support. Cheers, Nattha

I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered how much of these JS libraries are overlapping each other in toolkits and effectiveness. My knowledge of anything past design, UI/UX, and basic front end JavaScript starts to become limited. So I have to ask, is it possible to control the GreenSock + Lottie animation using ScrollMagic? And perhaps more importantly, should I be animating using this workflow at all? Current Progress: ------------------------------- If you're interested in seeing my initial journey to get all 3 integrated I have documented it below... (Unfortunately I don't have CodePen pro so I wasn't able to put this all together in a Pen for viewing, if it's something that becomes necessary I will go ahead and get CodePen pro and do so.) Research: Integrating TimelineMax, with Lottie Web, and Controlling w/ ScrollMagic I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library as you can see from the sample below. var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; var anim = lottie.loadAnimation(animData); A Singular Example of Controlling Lottie w/ GreenSock I have been looking high and low for documented of examples of people successfully integrating with GreenSock and Scroll Magic with very limited results. I have found one excellent video on YouTube of a dev by the name Chris Gannon (who I suspect may be a member of these forums) successfully controlling a Lottie animation through TimelineMax but that is about it. My Attempts to Recreate This, and Add ScrollMagic Control Have not gone very well... I believe that the current state of my code (mostly able to get this far thanks to the work of Chris Gannon) is missing some vital information on the Lottie animation itself. How many frames does the animation have? The relation of scroll position to frame selection. Pushing that data through to TimelineMax to effectively control animation. My goal being to control the animation with a Tween, Duration Tween, or a Reversed Tween. The code below is my hack-job trying to get this all working; i'm currently dealing with an error from this code "Uncaught ReferenceError: animationControl is not defined". jQuery(function($) { //Lottie animation Window and Data wrapper var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; //Lotie animation trigger var anim = lottie.loadAnimation(animData); anim.setSpeed(1); //TimelineMax Lottie animation control $('#animationWindow').each(function(){ var animationControl = new TimelineMax({}); animationControl.to({frame:0}, 4, { frame:anim.totalFrames-1, onUpdate:function(){ anim.goToAndStop(Math.round(this.target.frame), true) }, repeat: -1, yoyo: true, ease:Linear.easeNone }) }); //ScrollMagic Scene var controller = new ScrollMagic.Controller(); var icon_scene = new ScrollMagic.Scene({triggerElement: "#animationWindow_trigger", triggerHook: 'onEnter'}) .setTween(animationControl) .addTo(controller); }); And this is my current state of affairs. I will be updating this post as I move along, and eventually - hopefully come up with an elegant solution to this.