Jump to content


  • Posts

  • Joined

  • Last visited

About Yaya

  • Birthday May 28

Profile Information

  • Gender
  • Location
    Virginia, USA
  • Interests
    Outdoors, making things from code or raw materials

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Yaya's Achievements

  1. @GreenSock Thanks for the solution! I will compare it to my code and be sure to understand it for the next gsap animation. I sent you an email about the other notes in your message. I appreciate you!
  2. Hi gsap fans, I would really appreciate some help. I created this svg with 2 boxes (packages) that need to move on their curve when you mouseenter and mouseleave. You will also see 2 gears that are supposed to rotate. Where am I going wrong? I really wanted to add more motion paths for the other dots on curves; but, I need to simplify for troubleshooting. Also, I worry about loading down the processing needed to make all animations happen. Thanks in advance! Mary
  3. Yaya

    Motion Path

    @mikel Excellent! I will make a note of that for future MotionPath projects. FYI: The mouseover animations were not working when I added GSDevTools.create();
  4. Yaya

    Motion Path

    Hi there, I am working on a motion path for the broker icon, with is in the 3rd column. The box located on the circle should move along the circle's path when you mouseover it, and reverse on mouseleave. I've pulled code from the GSAP express series (with @Carl ) and also my previous project at https://xl4u.org but I'm stuck. I used the online jlinter and did not see any red flags. In codepen, I removed the first 2 mouseover animations so that you can find the broker code easily. The link itself is in the html. I appreciate your expertise. What am I not seeing? Thx, Mary
  5. @OSUblake thanks for such a detailed response. I do not have a javascript example where it is broke, with the stroke color indicated inside the svg. I will go ahead and use css instead of gsap.set for those colors, per your suggestion. Rotation is the winner over motionPath in this case, I see, with transformOrigin. I appreciate that.
  6. Hey gsap fans! I'm in the middle of Carl's gsap express final project course and decided to apply the lesson to an actual project. Sometimes, I Google things and get outdated information. For example, I used to have the stroke set to #000 so that I could animate it; but that didn't work. I had to remove the stroke color inside the svg itself for the javascript to work. 1) Anyway, would you mind checking why I cannot seem to change the stroke and scale of 2 rectangles? They are "spokes" of the forklift wheels so I can imply the wheel is rotating. Here one of 2 rectangles that I'm targeting: <rect id="tire-front-spoke" x="113.74" y="135.83" width="13.45" height="2.71" transform="translate(-62.09 134.98) rotate(-48.02)"/> 2) I haven't had much luck with the rotating code yet. MotionPlugin? Rotation css plugin? Do I have to remove transform from the html and then gsap.set it? BTW, Carl's lessons rock! @Carl Cheers, Mary
  7. @PointC that did the trick! It's all downhill from here I hope, tweaking the existing tweens. Fun times
  8. Hey there, I can't believe that I am still working on this animation over several weeks. Since August 17th, I tweak the code and replace one error for another. This last error says, "master is not defined". That's the latest learning curve where I'm trying to add functions with timelines. Naturally, the whole animation is out of whack until that's resolved. Hoping to see the light at the end of the tunnel! https://codepen.io/yayaCreates/pen/rNOOqWy?editors=1111
  9. Super! A little perseverance and a great support team.... I have an error but I'll keep tinkering with it. Then, the animations will work and more toys can be added. I appreciate the fast response!
  10. Hello fellow gsap fans, I'm working on a fun motion path and figure it's good time to break out the Club Greensock bennies! I added GSDevTools.create(); and have been following the tutorial located here. I assigned IDs, which then show up in the dropdown menu for the sake of testing 1 section of the timeline. Then, I thought I may as well wrap animations in functions (for the modular approach). I think I'm 98% there; but I'm referencing older forum threads. I've seen the use of gsap.fromTo vs just .to I've seen duration placed with the timeline and in the .fromTo parameters. Would you mind checking the way I structured things to be sure I'm on the right track? Here is a function, with some .fromTo code removed, to keep my question as concise as possible: function logoAnimation() { let intrologoTl = gsap.timeline({id:"logoanim",paused: true}); gsap.set("#logo-tagline", {autoAlpha:0}); intrologoTl.fromTo("#splash-logo",{ autoAlpha: 0.85, scale: 0.2, xPercent: 0.5, transformOrigin: "top, center", smoothOrigin: false },{ autoAlpha: 1, scale: 5.0, xPercent: 20, duration: 0.5 }, 1); intrologoTl.fromTo("#logo-tagline",{ fill: "#303d8b" },{ fill: "#ffffff", duration: 1.5, delay: 0.4 }, 1); intrologoTl.fromTo(".leavesBlue",{ autoAlpha: 1.0, scale: 1.0 },{ autoAlpha: 0.25, scale: 1.0, duration: 1 }, 3); intrologoTl.fromTo(".leavesBlue",{ scale: 1.0 },{ scale: 1.2, duration: .5, delay: 3.0 }, 4); intrologoTl.fromTo("#icon-hbird",{ x: 500, y: 100, autoAlpha: 0.5, rotationZ: 25, scale: 3 },{ x: 0, y: 0, autoAlpha: 1, rotationZ: 0, scale: 1.0, duration: 0.5 }, 4); return logoAnimation; } function finishLoading() { intrologoTl.play(); } Quick shout-out of appreciation for help over the past 30 days that contributed to this code: I learned the gsap.set toy and how to yoyo thanks to Craig (@PointC) I got the "fill" working and managed to blur an svg thanks to an old thread from Zach (@ZachSaucier). Zach, you also taught me about (not) mixing delays with positions (still refining that), using pause/play, and adding numbers in the timelines to group and order animations! @Mikel offered up a creative use of rotation that I hadn't thought of Seriously, I am truly grateful.
  11. @PointC Hey! You solved it! I am going to take a serious look at how you coded that and what I did wrong exactly. For example, perhaps yoyo:true helped. I will apply this to my codepen and tweak the design... now that I see it in real-time. Kudos! @PointC, @ZachSaucier and @mikel, thank you so much for your help! If there is a way to change the Subject of this thread to "Motion Path with Timelines and autoAlpha", it may help others to find it better. I don't see how I can change it myself.
  12. @PointC Good to know it's possible. Yes, that's a good way of describing it. It honors the autoAlpha setting; but the timing is off.
  13. @mikel I get it. I really, really appreciate your help and input!
  14. @mikel Thanks for the suggestion! Your solution of rotating works; but the placement is that of a bird facing forward. I tried that tactic with the wing in front of the body and it was not ideal. I appreciate your input, though. It may be the only solution if I can't use autoAlpha. Also, thank you for the different code on the motion path. It yielded better results than my code. I hope to be able to use autoAlpha to turn paths on/off in a (rapid) loop for projects moving forward. It presents more opportunity for advanced animations of different shapes. If the answer is that autoAlpha is not programmed for that, then I will abandon the idea.