payne199

That'll do it! Thanks OSUblake.

I have been working on a project that involves a timeline that simply goes from one scene to another (one function to another) using onComplete. In a couple scenes I am successfully using the DrawSVG and Text plugins. Recently I have gotten involved in MotionPath and have successfully put together a scene using it. However, when I include the MotionPath scene in my main project, those other scenes that involve DrawSVG and TextPlug do not render properly. I get the following errors Could anyone explain to me why these plugins suddenly appear to be missing when all I have done is add the MotionPath plugin? I am including the MotionPath plugin like so: And have been successfully using the TextPlugin: And DrawSVG, locally

Soooo cool!! Works great! Thank you

I have a GSAP folder that contains all the gsap plugins. When wanting to use the DrawSVGPlugin, I would simply bring that file from the plugin folder and place it in my project file, like so: I would then include the following code in my html: <script src='DrawSVGPlugin.js'></script> I was then off and running. I am now trying to include the new motionPathPlugin in my code but don’t understand how to get it there. I don’t have the file to pull from my plugin folder to include it in the way I have done with the DrawSVGPlugin. In an effort to get it to go, I have pulled the following plugin from the CDN src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/MotionPathPlugin.js"> and have included it in my html. I understand I need to register the plugin by including gsap.registerPlugin(MotionPathPlugin); in my code. I have tried including it in various places in my code with no luck. I don’t know how/where to put it. I understand this is not necessarily a GSAP issue, but understand I am 55 years old, not very computer literate, and simply discovered browser animation (GSAP) a couple years ago and have been having a lot of fun with it since. If someone would educate me on this issue to take advantage of this GSAP advancement, it would be greatly appreciated. Thank you.

Wow! I now get it. Thanks for taking the extra time with me. You guys (and GSAP) rock!!

Thanks for the info, guys. I have decided to run with a button to start things off and have updated the codepen to reflect that. On initial play, the sound is always delayed compared to the image coming on the screen. But after that first run, it will always run correctly, in sync. But of course, if I were to back-out of the page completely and go in again, the initial run will be out of sync. I looked for a similar problem in the forum but did not find one. Could you explain to me why this is occuring? The initial run has to be on the money.

Hi Guys. Yeah I see it plays here, without any problem, but not on my machine. I tried just using a simple typewriter 'ding' to sound, and that doesn't go either. Perhaps it IS due to auto-play. What I am wanting to do, ultimately, is construct a 5-minute video for a friend's 40th bday. Although this simply tween does not show this in any way. Can you offer me advise as to how to load the sound first? To try that angle? (Blake, Craig. I thought you guys would get a kick out of that!).

I am looking to add a soundbite to my timeline. By all appearances (to me) the codepen I included should do it. I have created the audio element. I have added it as a function to the timeline. But it will not play. Would someone shed some light on this dilema for me? Thank you. (A great soundbite, huh?)

Thank you, gentlemen. Very helpful/educational.

Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0) Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. https://codepen.io/don199/pen/wbdgQv

Wow! I got so much out of that. Thank you so much. (Great pen, too. I had to watch and listen to the end:)

Hello. Newbie here. I am recreating the Star Wars opening crawl and was having great difficulty adding the opening theme within the timeline. I was getting 'in Promise' errors that I could not get around. I then decided to simply start the program with a button click and delay the timing of the audio to come in at the right time. The problem I am having is getting both the js audio function and GSAP timeline started at the same time. I tried onclick with the html button to call my audio function and used playBtn.onclick=function(){} to call my timeline on click of the same button, but I get nothing. No action. No errors. Could someone direct me as to how I should approach this? function myFunction(){ document.querySelector('#play').play(); } let tl = new TimelineLite(); tl .to(document.querySelector('#openingText'), 1,{opacity: 1, delay: 2}) .to(document.querySelector('#openingText'), 2,{opacity: 0, delay: 4}) .to(document.querySelector('.starryBackground'), 0,{opacity: 1}) .to(document.querySelector('#date'), 0,{opacity: 1, scale: 0.9, delay:0.5},'-=0.5') .to(document.querySelector('#date'), 13,{scale: 0, ease:Power3.easeOut}) .to(document.querySelector('.crawl'), 140, {css:{top:-2600}, ease:Linear.easeNone },'-=5')