Jump to content

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


  • 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. 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 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.
  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 not programmed for that, then I will abandon the idea.
  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 position, I attempted to use just the 2 wings to rotate and adjust the position for the flying effect, as shown in a bumblebee codepen; but it does not produce the desired result due to the artwork. The wings are not the same shape as a bumblebee's. ** Overall, trying to use autoAlpha as a tool to turn paths on/off would be incredibly helpful. I just cannot seem to find that magic combo to make it work in the code. I am fresh out of ideas.
  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 all of those codepen examples to get this far.
  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 make the wings of the bird "fly" quickly by changing the autoAlpha from 0 to 1 with a duration of .1 but there is a delay and I cannot seem to solve. Would you mind checking my gsap code to see where I went wrong? The ID's I'm using for the wings are: #HbirdWing-RightUp #HbirdWing-LeftUp #HbirdWing-RightDown #HbirdWing-LeftDown .... where a set of wings in Up position uses UP and set of wings down uses Down. https://codepen.io/yayaCreates/pen/rNOOqWy
  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!