payne199
payne199's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Recent Badges
6
Reputation
-
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
