payne199
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by payne199
-
Thanks for the knowledge and article link. I got some studying to do 🙂.
-
It seems that the duration property of my tween acts on all other properties except for the color property. I am simply wanting a gradual change in color from black to brown. Would someone enlighten me on this? const Title = () => { const [titleColor, setTitleColor] = useState(true); const title = useRef(null); useLayoutEffect(() => { let ctx = gsap.context(() => { gsap.to(title.current, { duration: 3, x: "20px", color: "brown", scale: 1.5, ease: "power1.in" }); }, titleColor); return () => ctx.revert(); }, [titleColor]); return ( <div className="container"> <p className="title" ref={title}> Title </p> </div> ); };
-
Wow! Thank you for the education ?
-
I am displaying a simple timeline in which a question is presented, followed by the answer, followed by both the question and answer text disappearing. The idea is to loop through a series of questions and answers in this way. I am throwing the function an array of arrays and using a forEach loop to run through each individual array to make this happen. I see in the console that the loop is looping as desired, but only the final array is animating on the screen, rather than taking the time to run each array. What am I missing?
-
Sorry for such a basic question. But it is a real problem. I am a GreenSock member and trying to load SlowMo for the first time and it just won't go. I've written basic code and loaded the proper CDNs <style> .box{width: 100px; height: 100px; border: solid 1px black;}</style> <body> <div class="box"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/EasePack.min.js"></script> <script src="EasePack.min.js"></script> <script> gsap.to('.box', 3,{x: 1000, ease: "slow(.1, .7"}); </script> </body> I've loaded the EasePack.min.js file into my project: By all appearances (to me) this should do it. The code runs but does not include the SlowMo. A simple task for many, but I've spent a lot of time spinning my wheels on this and getting nowhere. Would someone please direct me as to where I am going wrong?
-
NICE!! Smooth. (Thanks for the addition)
-
??
-
HI Zach. Yeah, your second Codepen nailed it! The code was much simpler than I thought in terms of the amount of lines used. But I'll be chewing on that one for a while to really grasp what is going on with it. Although I called them buttons, in reality they will be images. When an image is clicked, it will reveal text as it goes across the screen. The user is then being prompted to click the image again if they are wanting to be taken to that specific page/category. Thanks so much!
-
I have a set of 3 buttons. When a button is clicked, it moves, and then does a short animation. What I am trying to do is be sure the animations are in sync with one another if two or all three buttons had been pressed. This may not necessarily be a problem specific to gsap, but I am using the powerful platform and thought I would post to its forum. The Codepen should make my question clear. Thank you.
-
Wow! Sweet. charsClass study here I come.
-
Codepen entered. Thank you for the link.
-
I am putting together a simple (I thought) animation using SplitText. I am wanting a line of text to appear from left to right with a click of a button; and a line of text to disappear from left to right with a click of button. I got the appearing text to work, but I am having issues with the other. I can get the text to disappear as desired as desired, but it seems the only way I can get it to work is to have the text displaying on the screen, first. That is not what I want. I need the text to be invisible first, then appear from left to right after the button click. Here is my kinda-working code. Please see codepen. I have tried using css to set the opacity to zero and work from that, but I can’t get the text to appear at all from that angle. Could someone offer-up some insight?
-
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?)
-
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')
