andrewnelson

Update #3: Lottie Animation is being controlled by GSAP, with basic functionality. @OSUblake thanks again for all the information! I have been on a learning spree today and your insights have been invaluable. So I think this is mostly done; although I imagine it's not very well optimized code. Trigger Tweening, and Duration Tweening both work. I haven't put the code through any stress tests to see how easily it breaks yet.

@OSUblake thank you so much for posting all the information and videos! I was searching blindly for the answers.

Update #2: GSAP is wrapping Lottie, and the animation is being triggered by Scroll Magic. I have been able to get the most basic of functionality of Lottie working with ScrollMagic + GSAP. Once the ScrolLMagic scene is triggered and command to .play() the lottie scene is run. I believe the next step in this process will be figuring out how ScrollMagic and GSAP pass commands to each other, and then passing that information through and converting it to something Lottie understands to get it perform more like a GSAP timeline tween. This is very quickly leaving my scope of knowledge so moving forward from here will take some time indeed! If anyone has any suggestions or wants to jump in on the pen help is much appreciated!

Update #1: A Starter Pen Template: TimelineMax and ScrollMagic working together, and Lottie running an SVG animation independently. I did have to go PRO with CodePen to be able to load the JSON SVGs into the Pen; I couldn't find a way around it. (I spent a good 2 hours trying to hack together a free alternative.)

Thanks for the welcome, and for the quick reply! I have to say I love the community here and have learned so much from you and your team! Re: your post I copied and pasted the nearest usable function while trying to patch this together (my ability to write code from scratch isn't that great). In this example it is the only ID of its type so I assumed it would have been good enough for testing purposes -- that being said I should have been more thoughtful about it when posting the code here. I'll make sure to fix that when posting the solution. Between this insight, some more reading, and fresh eyes, hopefully I'll be able to post some positive results tomorrow! And regarding the CodePen, the dependencies for running the Lottie animations with the JSON files made it hard enough to get GSAP, and Lottie running on the same Pen that I just decided to do the testing on my web server. I'll take another peak at it tomorrow and see if I can't find a way to get all the dependencies running on the pen.

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.

I forked and updated your CodePen with the changes I started to make earlier. It appears to be working as intended but is hard for me to tell because there are no other potentially conflicting elements on the page. https://codepen.io/anothercreativeltd/pen/ZrjLPP?editors=1010

Hello @PointC thanks for the warm welcome! I appreciate you going through the CodePen and sorting out the missing scripts! I haven't used much of CodePen before so this will be incredibly helpful moving forward. As for the purpose of the code: There are multiple <ul> on the page, so calling the TimelineMax for each one. onEnter, the triggerElement will be the <ul> and then the <li> will stagger in. onLeave, each individual <li> will have an individual triggerElement and the <li> will fade out to 'opacity: 0' over a duration of 15px I apologize for the lack of clarity in my explanations and my code, this is all still quite new to me. Thanks again!

I found part of the solution. I was trying to call multiple triggerElement's by just using a single selector. I had to nest another .each() function for each of the <li> within the original elements function. The issue now is that those <li>'s are being called from the entire site, instead of just the ones nested in the original function. ('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); $('li').each(function(){ var thisSelector = this; var fade_out = new TimelineMax(); fade_out.to(this, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: this, triggerHook: 'onLeave', duration: 10}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); }); });

Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all: $('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var thisLiHeight = thisLi.height(); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); var fade_out = new TimelineMax(); fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); });