Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

10 Newbie

About Yaya

  • Rank
    Advanced Member
  • 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.

  1. Hey @itforyourneeds, I am a GSAP Club member. Are you still updating the Animate WP plugin? I need a standard like that to use across all team members, while still using the awesome gsap toys! If so, have you added ScrollTrigger and Draggable to the Animate WP plugin? Cheers, Mary
  2. @PointC that did the trick! It's all downhill from here I hope, tweaking the existing tweens. Fun times
  3. 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
  4. 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!
  5. 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 par
  6. @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.
  7. @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.
  8. @mikel I get it. I really, really appreciate your help and input!
  9. @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
  10. @PointC I appreciate you chiming in. I have the wings on a separate timeline and the wings are flapping. The timing is my trouble. It hesitates when repeating. I have spent many hours attempting different methods including simplifying the SVGs, paths and colors. @ZachSaucier I removed the delays in the intro timeline (introTL), which is separate from the fly timeline with wings (flyTL); that did not change the outcome. I've tried stagger as well. Finally, I completely removed animations from introTL and that did not solve the problem with the wing animation delay. When you referenced pos
  11. Okay, I just removed the delay. Both sets of wings appear at the same time now and there is a delay between the animation still. I'll keep trying to solve that. I can see where the position parameter would work if the SVGs were the same shape; but they are different.
  12. Crazy high values was a way to test other things. I'll take them back down. Good thinking! My thinking was that I needed two animations: 1) Repeating animation of wings flapping for flying. Since each wing is a separate layer (g), I thought I would turn them off/on. Then, use delay so that they don't turn off/on at the same time. 2) Motion Path animation does not need to loop, so I animated that separately. I don't know how to make wings repeat AND have the motion path not repeat any other way. I will check the sequence codepen you sent again; I've really been using
  13. @ZachSaucier I have taken this task as far as I can, after doing it myself instead of hiring it out. I'm sooooo close, thanks to you! I simplified the logo animation in order to focus on what I need help with: 1) Motion Path of Hummingbird: I added the helper in order to change the path, but I cannot select and move it. Any ideas? --- By the way, for others that may read this thread, I found that my bird was flying in reverse and upside down because of how I drew it in Adobe Illustrator. So, start the path left to right to avoid that mistake. --- 2) Wings of Bird: I am attempting to
  14. Thanks Jack, I should have tried that.
  15. I am trying to change colors for a path that I might also change to <text> The text is "We Excel For You" introTl.fromTo("#logo-tagline", { color: "#303d8b" }, { color: "#6479f9", duration: 3.5 }, 0); That yields no results. I removed the fill color inside the SVG for "We", which then turned it black. It was a test to see if I need to remove the fill color from the svg or not. I was looking for the Color Plugin since I could not get it working with the built-in Css Plugin. Thanks in advance!