Search the Community

Hello! I am building a timeline visualizer, that you can easily connect with any timelines you've made with gsap. The idea is to represent the timeline visually, and let the user scrub through it. It's easy to visualize the labels, since there is a _labels property on each timelinelite instance. However, what I would like to know is: Is there any good way to get a reference to all tweens within a timeline, and all function calls? I'd like to know the time and duration of all tweens within a timeline so I can represent them visually, and also the time and name of all function calls within a timeline. Is this possible? Thank you. /Alexander

Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var pagerArrow = $this.find('.pagination__icon__arrow'); var pagerFill = $this.find('.pagination__icon__fill'); var pagerInfo = $this.find('.pagination__info'); var pagerTimelineCore = new TimelineLite(); pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'}) .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3') .to(pagerFill, '.3', {x: '0'}); if (play === 'play') { console.log("pagerTimeline Play"); pagerTimelineCore.play(); } else if (play === 'reverse') { console.log("pagerTimeline Reverse"); pagerTimelineCore.reverse(); } } $('.pagination--previous').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); $('.pagination--next').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut. The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site Thanks! PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.

Hey all, I'm trying to make an interactive musical example where using absolute coordinate in SVGs proved to be too cumbersome so I've switched to a TimelineLite where I can use only relative coordinates but have the possibility to rewind to certain states, obviating the need for absolute coordinates. This works fine, but it would be nice to be able to animate seeks to certain positions in the timeline. In the attached codepen, seek simply resets the timeline to the indicated point (0), but it would be nice to simultaneously move all of the objects to this point without having them abruptly go there or traverse the timeline backwards. Any ideas how to accomplish this? Thanks! ~Mike

Hi All, Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). Situation: I have an infographic where animated elements are controlled by a timeline slider. That part works fine. What I need to do now is have two text items update using the same slider. For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M) The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. Thanks in advance for any help / pointers / codepen examples! tome

I know this might sound like a dumb question but is there an alternative to calling TimelineLite or TimelineMax without the constructor method. Some of our clients have strict vendors that serve their advertisements and won't allow constructor methods. So this essentially means we can't use GSAP because to invoke it means using var tl = new TimelineLite( ); and for whatever reason these systems don't like it. Any suggestions perhaps using Object.create( ) ? It's not a huge deal if there isn't an alternative but I prefer to use GSAP it makes banner development a breeze and we aren't allowed to use jQuery either so GSAP is the perfect solution. Thank you

Hey, so I want to do what the title says: make a title slide in and then slide out with timelineLite. My code is in this jsfiddle. I know that, because I remove the top property, the title goes down, but what I wanted was that that going down was part of the transition, and not an instant thing, like it it is now. Is there a way to make this work? Thanks! (By the way, I'm new in the forum, so I'm sorry if I made any mistakes asking this question.)

Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]

I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below). When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'. I have also tried using window.foo to set the variables which also did not work. Any ideas on how to get this to work? var problemtl = new TimelineLite(); problemtl.to(step1, 1, {alpha:1}) .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5') .call(function(){finalleft = 500; finaltop = 100}) .to(step2, 1, {alpha:1}, '+=0.5') .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');

Hi there, I am trying to copy exactly what the animator is achieving in this clip. http://greensock.com/sequence-video I need to create a HTML5 banner ad for a client. Unfortunately, I need a bit more control than just using Tweenlite delays and overlaying different animations. TimelineLite seems to offer the answer that I need and I thought that this tutorial was offering the solution. However, although my banner works as a simple animation as soon as I convert the code similar to that in the tutorial it ceases to work. My code looks like this... <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script> <script type="text/javascript"> var tl = new TimelineLite(); tl.from("#heading", 1, {left:-280, autoAlpha:0}) .from("#button", 1, {left:-280, autoAlpha:0}) .from("#tandc", 1, {autoAlpha:0}) </script> Do I need to include a <script src= for TimelineLite? Am i missing something really obvious? Thanks in advance, Phil

Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.

Hello, I'm pretty new to JS, but worked for many years with Flash AS. One issue I'm running into are Linter problems in my code editor "Brackets". My animation runs fine and Chrome also has no errors. But I really would like to get rid of all these Linter probelms showing up. I've loaded jquery and TweenMax libraries in my main html file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script src="main.js"></script> In my "main.js" I have: var videoPanelTl = new TimelineLite(); Now this Linter problem that shows up: "'TimelineLite' is not defined. - W117 -". More problems show up when using "$" , or easing "Back" for example. They all show up as "is not defined". Seems like my JS file doesn't even know that TweenMax has been loaded in the html file? I'm also not getting any code hinting for TweenMax - probably for the same reason. I've searched for many hours on the internet since it seems a pretty basic question but couldn't figure it out. Is there a way to fix this? I would really appreciate any help.

Hi, I'm having trouble getting the revert() function to work after the following SplitText Timeline Tween with a random character order... http://codepen.io/GreenSock/pen/HafFE Can anyone help me out? Thanks! ~ Kyle

Hello, I have a little problem understanding the function of reverse TimelineLite. If someone has 5 minutes to help me understand, would be nice. $('#plop').on('click', function() { $(this).toggleClass('is-open'); // Animation var animNav = new TimelineLite({ paused: true }); animNav.to('#nav', 0.2, { x: 100, opacity: 1, ease: Sine.easeInOut }) .staggerTo('.nav-link', 0.1, { opacity: 1, ease: Sine.easeInOut }, '0.1', '-=0.15'); if ($(this).hasClass('is-open')) { animNav.play(); } else { animNav.reverse(); } return false; });

I might be just having a brain fart, but is there a simple way to tell a TimelineLite instance to play, and stop when it gets to x% of it's total duration? Just for context, I have gauge that's an svg, and I'm using drawSVG to animate all of the elements of a specific class name to indicate how full the gauge is. So if it were, say 75% full, I'd only want the Timeline to animate to 75% of the total. In the attached codepen example, only only some of the rays on that icon would animate. There might be a way better way to do this - I'm very open to suggestions!

this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?

Hi ! I'd like to know if anyone has already used TweenLite or TimelineLite server-side with Node.js. If not, is there a way to do so ? A GSAP NPM module would be something great. Thx

Hi, I am having a problem with staggerTo() working inside a timeline. Here is my code: var objects:Array = new Array(); function getObjects():void { objects = [object1, object2, object3]; } var timeline:TimelineLite = new TimelineLite(); timeline.call(getObjects); timeline.staggerTo(objects, 1, {scale:0}, 0); The getObjects() function, which populates the objects array, gets called before I apply staggerTo() on the objects. However, I think all of the timeline code gets parsed before any of this happens. So when staggerTo() gets parsed the objects array is actually empty, and the animation doesn't happen. Is there any way around this?

I've been trying multiple different ways of setting up the animation sequence but something is off with the duration and delay on the tween. Please let me know what I've done wrong. I'm trying to have a series of sections scroll in with a pinned child div for the text content and then have few divs animate in once the section is inView. But the autoAlpha and easing of the divs go by too quickly to be seen. Even when I set the delay and duration to 1000. It's easiest to see the whole sequence on my test page: flm.pushdesign.net I'm at a loss... I need your help. I'd be grateful for any suggestions. Cheers, Shannon

Hi, I haven't used the stagger function much but would like to take advantage of it. I have the following: //create the timeline var tlNav:TimelineLite = new TimelineLite(); var clips:Array = [clip1, clip2, clip3, clip4, clip5]; //Thumbs are coming in tlNav.staggerTo(clips, .5, {y:755, alpha:1}, 0.2) which works as expected, but what I need to accomplish is to have all the icons go back down a split second after they moved up, like so: tlNav.staggerTo(clips, .5, {y:794}, 0.2) but can't figure out how to achieve this, since I am not sure how to cut into the started stagger tween in order to start animating the clips down in the same order. They should just pop up staggered and back down right after they have popped up. Perhaps I am overthinking things... Also when to use the TimelineLite and TimelineMax stagger methods? I am a bit confused about that. Thanks guys!

Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions? import com.google.ads.studio.ProxyEnabler; var enabler:ProxyEnabler = ProxyEnabler.getInstance(); ///////////////////////////////////////////// import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.display.MovieClip; //import com.greensock.plugins.BlurFilterPlugin; //TweenPlugin.activate([blurFilterPlugin]); ////////////////////////////////////////////////// /////vars ////////////////////////////////////////////////// var tt = TweenNano.to; var tf = TweenNano.from; var td = TweenNano.delayedCall; var tm = new TimelineMax({repeat:3}); stop(); //TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}}); ////////////////////////////////////////////////// /////utility ////////////////////////////////////////////////// function makeBtn(_clip:MovieClip, _over:Function, _out:Function):void{ _clip.addEventListener(MouseEvent.ROLL_OVER, _over); _clip.addEventListener(MouseEvent.ROLL_OUT, _out); //_clip.addEventListener(MouseEvent.CLICK, btnClick); _clip.useHandCursor = true; _clip.buttonMode = true; } function btnOver(e:MouseEvent):void{ endframe.cta.gotoAndPlay(2); } function btnOut(e:MouseEvent):void{ endframe.cta.gotoAndPlay(1); } /*function btnClick(e:MouseEvent):void{ var sURL:String; if ((sURL = root.loaderInfo.parameters.clickTag)){ navigateToURL(new URLRequest(sURL), "_blank"); } trace("the " + e.target.name + " has been clicked"); }*/ function getElapsedTime():void{ trace("elapsed time " + getTimer() / 1000); } ////////////////////////////////////////////////// /////animation ////////////////////////////////////////////////// function slideFromLeft(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:-500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function slideFromRight(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function fadeAlphaIn(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { tt(_mc, _time, {ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } ////////////////////////////////////////////////// /////banner ////////////////////////////////////////////////// function init():void{ makeBtn(btn, btnOver, btnOut); eventOne(); } function eventOne():void{ slideFromLeft(orange_mc, .5, 1, 0); slideFromLeft(logo1_mc, .5, 1, 0); td(.5, eventTwo); } function eventTwo():void{ slideFromLeft(text1_txt, .25, 1, 0); slideFromRight(text2_txt, .25, 1, .75); td(1.75, event3); } function event3():void{ fadeAlphaIn(image1_mc, .5, 1, 0); td(1, eventThree); } function eventThree():void{ fadeAlphaIn(image2_mc, .5, 1, 0); td(1, event4); } function event4():void{ fadeAlphaIn(text1_txt, 0, 0, 0); fadeAlphaIn(text2_txt, 0, 0, 0); fadeAlphaIn(image1_mc, 0, 0, 0); fadeAlphaIn(image2_mc, .5, 0, 0); fadeAlphaIn(logo1_mc, .5, 0, 0); fadeAlphaIn(orange_mc, .5, 0, 0); td(.5, eventFive); } function eventFour():void{ slideFromLeft(text3_txt, .5, 1, 0); slideFromRight(logo2_mc, .5, 1, .5); td(2.5, eventFourB); } function eventFourB():void{ tt(orange_mc, 1, {x:-600, ease:Strong.easeOut}); tt(text3_txt, 1, {x:-600, ease:Strong.easeOut}); tt(logo2_mc, 1, {x:-600, ease:Strong.easeOut}); td(.5, eventFive); } function eventFive():void{ fadeAlphaIn(endframe, 0, 1, 0); slideFromRight(endframe.choice_logo, .5, 1, 0); slideFromRight(endframe.ef_copy, .5, 1, 0); tf(endframe.ht1, .5, {y:"50", ease:Strong.easeOut, delay:.15}); tf(endframe.ht2, .5, {y:"50", ease:Strong.easeOut, delay:.2}); tf(endframe.ht3, .5, {y:"50", ease:Strong.easeOut, delay:.25}); tf(endframe.ht4, .5, {y:"50", ease:Strong.easeOut, delay:.3}); td(1.75, eventSix); } function eventSix():void{ tt(endframe.ef_copy, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht1, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht2, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht3, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht4, 1, {x:-600, ease:Strong.easeOut}); slideFromRight(endframe.ef_copy2, .5, 1, 0); slideFromRight(endframe.cta, .5, 1, .5); fadeAlphaIn(endframe.ef_copy3, 1, 1, 1); //tt(endframe.cta, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); //tt(endframe.choice_logo, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); td(.5, getElapsedTime); tm(0, eventOne); } ////////////////////////////////////////////////// init();

Hi all, New to Greensock so bear with me I've created a sidebar which is hidden, when you mouseenter the sidebar, it fires TimelineMax to animate the sidebar open. When you mouseleave it reverses that timeline. This works great. If you hover over the sidebar, even erratically, it behaves as expected. Now, I have a nav item inside the sidebar which, when clicked, fires another timeline which opens a full page subnav. I set a variable to say this subnav is open so I can keep the sidebar open. So the reverse will only run if the subnav is closed. If you hover the sidebar and click the button (looks like a little bottle) a full page colourful nav will appear. If you keep you cursor over the button, click it again (to close the colourful nav), then mouseleave the sidebar, it reverses as expected. If you... Hover the sidebar click the button mouseleave the sidebar to interact with the colourful nav then go back to the sidebar to click the button again to close the nav THEN mouseleave The sidebar should close but it remains open, the timeline doesn't reverse. All the variables seem correct so I'm stumped! I hope this makes sense, I've tried to explain it as best I can. See the Codepen for the working code. Many thanks!

I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do. //declare my variables var square1 = sym.$("square1"); square2 = sym.$("square2"); square3 = sym.$("square3"); square4 = sym.$("square4"); var tl = new TimelineLite(); //my simple timeline tl.to(square1, 2, {x:445}) .to(square2, 1, {x:-150}) .to(square3, 1, {y:"-=160"}) .to(square4, 1, {y:"-=160"}) sym.$("pauseBtn").click(function() { tl.pause() }); sym.$("playBtn").click(function() { tl.resume() }); and so on... (yeah I figured it out and this is the course I used to figure it out http://greensock.com/sequence-video AWESOME easing_2.html

Is it possible to have two timelines referencing the same tween instances? I would like to reset each timeline back to duration 0 (and paused)], then play the appropriate timeline. It seems as though the first timeline to get played 'owns' the reference to the tween and the other timeline will simply not play what they have common. var tw1 = TweenLite.fromTo(dom('#challengerA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-500px'}}, {css: {autoAlpha: 1, marginLeft: '-50px'}}); var tw2 = TweenLite.fromTo(dom('#challengerB'), 0.4, {css: {autoAlpha: 0, right: '-400px'}}, {css: {autoAlpha: 1, right: '-50px'}}); var tw3 = TweenLite.fromTo(dom('#chall_mascotA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw4 = TweenLite.fromTo(dom('#chall_mascotB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw5 = TweenLite.fromTo(dom('#chall_schoolA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw6 = TweenLite.fromTo(dom('#chall_schoolB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw7 = TweenLite.fromTo([dom('#chall_percentageCellA'),dom('#chall_percentageCellB')], 0.3, {autoAlpha: 0}, {autoAlpha: 1}); _view_tl_0.add(tw1, 0); _view_tl_0.add(tw2, 0); _view_tl_0.add(tw3, .2); _view_tl_0.add(tw4, .2); _view_tl_0.add(tw5, .3); _view_tl_0.add(tw6, .3); _view_tl_0.add(tw7, .4); _view_tl_0.add(winnerBanner,.6); // _view_tl_0.add(tw8, .4); _view_tl_1.add(tw1, 0); _view_tl_1.add(tw2, 0); _view_tl_1.add(tw3, .2); _view_tl_1.add(tw4, .2); _view_tl_0.pause(0);_view_tl_1.pause(0);_view_tl_2.pause(0); switch (_viewStatus){ case 1: // alert('1111'+_viewStatus); _view_tl_1.play(0); break; case 2: // alert('2222'+_viewStatus); _view_tl_2.play(0); break; case 0: // alert('0000'+_viewStatus); _view_tl_0.play(0); break; default: // alert('default'+_viewStatus); _view_tl_0.play(0); }

Hello, I'm wondering if its possible to continue a timeline if a specific tween is completed when using appendMultiple, rather than waiting for the longest tween to complete. I don't want to use onComplete with a function because the function won't be part of the timeline when I play the timeline in reverse. I would greatly appreciate help getting the following example to only move on to step 2 when mc1.x = 100 rather than when mc2.x = 100, without needing to use the offset parameter if possible, because the combination of so many offsets and differently timed tweens is becoming too difficult to follow in my code. //step 1 timeline.appendMultiple( [ TweenLite.to(mc1, 0.5, { x: 100 } ), TweenLite.to(mc2, 1, { x: 100 } ) ] ); //step 2 timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ), TweenLite.to(mc2, 1, { x: 200 } ) ] ); Thanks, Matt

Hello community, I'm using TimelineLite, which is amazing, but I'm having issues with tweens that have no duration. I need to have objects change position instantly but when I attempt to do so the object will start at that position when the timeline starts rather than changing to that position when I want it to. So in this basic example, mc2 will start at 200 BEFORE tweening to 100, instead of changing position instantly to 200 AFTER tweening to 100, yet mc1 is working as intended only because the duration of the 2nd tween is higher than 0: mc1.x = mc2.x = 0; timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 100 } ), TweenLite.to(mc2, 1, { x: 100 } ) ] ); timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ), TweenLite.to(mc2, 0, { x: 200 } ) ] ); Any help on how to change this example code to work the way I intended it to would be very much appreciated! Thanks, Matt