Yaya Posted July 2, 2020 Share Posted July 2, 2020 Hello all, I'm about 13 months into my gsap noob adventure. I have learned so much and think I have a handle on things enough to QA a gsap freelancer and write some code. Yet, I am out of my range on a particular conversation with a freelancer and need your input. 1) I converted a client logo to SVG, then added proper ID's so that the freelancer has everything he needs to start animating. 2) Project Scope: No need for anyone on this thread to dive deep into the instructions. You will see the idea of changing positions, opacity, size, and rotate. Quote For XL4U index.php page, please use greensock to animate the logo. I think it is easier to start with the logo in the center, animate it per the instructions below, then REVERSE the animation. Imagine flowers located at the bottom of the screen, and the logo centered (above flowers) after animation is finished. I need to add flowers later. 1) 2 seconds, the logo (opacity:1) center of the screen. Please set max-width: 45% for viewports over 1024px wide, and 95% for smaller devices. 2) 1.5 seconds, please animate "We bring..." tagline to 3% size and opacity: 0 3) 1.0 second, please animate "Design4U" and flower icon to 3% size and opacity: 0 4) .5 seconds please animate "XL"to 3% size and opacity:0. 5) 1 second later, move bird 25% left and 10% up. Also rotate bird so the head is moving with the original position, which is now the new direction of flight. 6) 0 seconds, please animate hummingbird from the current position near the flower icon to 10% right, 10% down. Also rotate bird so the head is moving with the direction of flight. After we REVERSE it, the bird will fly around to then land with the logo. One day later and 2.5 hours of work later, I asked for status. Nothing to show me because he says, "Adding path to get the x,y position of the path". I told him it's not a bezier/motion path and asked it there was more I could do to set up the file to help him focus on code. He said no. QUESTION: Do my instructions require his getting the x/y position of the path? I was thinking he was just writing a function with a few lines of gsap tweening code. Does he need a path in order to rotate the bird so that it's head/body is pointed in the direction of the position tween? Call me confused and trying to stay in budget. I haven't even introduced the next sequence, which involves a motion path. Thanks in advance for your opinion. See the Pen rNOOqWy by yayaCreates (@yayaCreates) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 Hey Yaya. It sounds to me like you should just do it yourself since you have a very specific vision and have experience with GSAP It might even save you time in the long run, hah. I think if I were this freelancer I would be asking you follow up questions because I don't quite follow what you're saying. With that being said, I'm not sure what "Adding path to get the x,y position of the path" means in the first place. Perhaps we're missing some context? 1 Link to comment Share on other sites More sharing options...
Yaya Posted July 2, 2020 Author Share Posted July 2, 2020 @ZachSaucier Thanks for letting me know that my specs are not clear. I need to nail that down. Perhaps the timing (seconds) was confusing or maybe I should say "x" and "y" instead of top/down/left/right. My challenge is that I'm overwhelmed with work and try to outsource as much as I can. It looks like I'll take a hit on the budget for this one and see what he delivers. Then, I can post an updated codepen and find out how I can improve my specs. Link to comment Share on other sites More sharing options...
Yaya Posted July 16, 2020 Author Share Posted July 16, 2020 @ZachSaucier and the rest of you guys, I have updated my codepen (above). I decided to take your advice and try animating the logo myself. It's turning into quite an exciting exercise, with many GSAP features in the works! I ran across a few pitfalls and hope I can get your feedback: 1) If the page load script looks familiar, I pulled it from an old thread. I'm getting an "uncaught $ error" and can't find it. I understand if it's not appropriate to post this pitfall here as it could be a javascript challenge, not a GSAP learning curve. Here's the thread I used: viewBox="0 0 885.35 290.34" 2) My "XL" and hummingbird are getting cut off. I cant' seem to animate past this box. Here are a few things I considered or tried. I've tried changing the viewBox (above), but changing that has varied results-- when testing responsiveness. Is the fact that I wrapped the SVG into a div causing the issue? Right now, I have the entire logo (div class= "splash-logo") animating as a group, except the "XL" and Hummingbird. That's the only way I could keep the logo grouped. Is there a code in GSAP that I'm missing, to allow for animations to go off-canvas or wherever I want? My bird wants to break free!! haha 3) For the leaves background image gsap.fromTo(".leavesBlue", {autoAlpha:0.20, scale: 3.0}, {autoAlpha:1.0, scale: 1.0, duration:5}); It's not honoring the autoAlpha settings. See attached what it looks like at opacity: 1.0. Is it just not possible to change opacity in gsap for a .jpg? I understand the primary focus is SVGs. The Hummingbird is animated separately, because I'm doing this whole other timeline to have it fly on a motion path, then morph into the bird you see there. I will post an update when that's done. You guys are awesome! I very much appreciate the help. - Mary Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 16, 2020 Share Posted July 16, 2020 10 minutes ago, Yaya said: If the page load script looks familiar, I pulled it from an old thread. Are you referencing this? $(window).on("load", finishLoading); It's throwing an error because you're trying to use jQuery but didn't load jQuery. I don't really understand what you're doing in the finishLoading function anyway. 10 minutes ago, Yaya said: My "XL" and hummingbird are getting cut off. I cant' seem to animate past this box. You can remedy that by making the viewBox bigger or by setting svg { overflow: visible; }. 10 minutes ago, Yaya said: It's not honoring the autoAlpha settings. See attached what it looks like at opacity: 1.0 It is animating? Maybe you don't perceive it as animating because the image is dark in the center? It definitely is though. You can remove the scale animation to see it more clearly. Here's a cleaned up version: See the Pen LYGgrdv?editors=0010 by GreenSock (@GreenSock) on CodePen Side notes: You don't need the new before gsap.timeline(). You create a timeline but never use it... I'm not sure why you're doing that You could use it to control the state of all of your animations at once though. I did that in the demo above. Link to comment Share on other sites More sharing options...
Yaya Posted July 16, 2020 Author Share Posted July 16, 2020 @ZachSaucier Wow! That's a fast response! Quote It's throwing an error because you're trying to use jQuery but didn't load jQuery. I don't really understand what you're doing in the finishLoading function anyway. I don't understand it either. I added the JQuery URL and get a new error; but it sounds like I need to revisit a proper PageLoad script. Ideally, I'd like to avoid JQuery altogether. Quote svg { overflow: visible; }. That worked! Thank you! Quote It is animating? Maybe you don't perceive it as animating because the image is dark in the center? It definitely is though. You can remove the scale animation to see it more clearly. Yes, the scale animation is intentional. But the opacity or alpha syntax is not working. My intent is to start with the background at opacity: 1 and tween to opacity: .40 because I have more flowers coming into play. Quote Side notes: You don't need the new before gsap.timeline(). You create a timeline but never use it... I'm not sure why you're doing that You could use it to control the state of all of your animations at once though. I did that in the demo above. Classic case of copying that other thread's code. The good news is that I thought "new" was odd. Perhaps I'm slowly upgrading from newbie level one to newbie level two. Yes, I want to add more animation (morph and motion path). THANKS for the demo above. You rock! Thanks! -Mary Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 16, 2020 Share Posted July 16, 2020 34 minutes ago, Yaya said: Ideally, I'd like to avoid JQuery altogether. The demo above does basically what I think your load function does without jQuery. 34 minutes ago, Yaya said: But the opacity or alpha syntax is not working. But it is working? What's making you think it's not working? 35 minutes ago, Yaya said: My intent is to start with the background at opacity: 1 and tween to opacity: .40 because I have more flowers coming into play. Something like this could work then: introTl.fromTo(".leavesBlue", { autoAlpha: 1, scale: 3.0 }, { autoAlpha: 0.4, scale: 1.0, duration: 5 }, 0); Link to comment Share on other sites More sharing options...
Yaya Posted July 17, 2020 Author Share Posted July 17, 2020 @ZachSaucier I have been comparing my code to your better solution in your codepen to be sure I learn exactly what you did. Question: You have added ,0 to the end of each introTl.fromTo in the second set of parameters. What does that do? If I change that number to 1, does it force the other introTl.fromTo with 0 to start before 1? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 39 minutes ago, Yaya said: You have added ,0 to the end of each introTl.fromTo in the second set of parameters. What does that do? The position parameter post explains it well. In short: I added them to a timeline so that you can have full control over all of them at once (like tl.pause() to pause all of them). But by default timelines sequence tweens one after another. Adding an absolute value of 0 to each of their position parameters makes them all start when the timeline's playhead is at 0 (when it starts). 2 Link to comment Share on other sites More sharing options...
Yaya Posted July 17, 2020 Author Share Posted July 17, 2020 @ZachSaucier Thank you for the link and your help through this thread. Using it to control the position on the timeline makes perfect sense. Have a wonderful day! 1 Link to comment Share on other sites More sharing options...
Yaya Posted July 30, 2020 Author Share Posted July 30, 2020 @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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 30, 2020 Share Posted July 30, 2020 2 minutes ago, Yaya said: I added the helper in order to change the path, but I cannot select and move it. Any ideas? It's a z-index issue: a bunch of other elements are layered on top of it (you have some crazy high z-index values). 4 minutes ago, Yaya said: 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? You're mixing the position parameter with delays - why are you doing that? I recommend just using the position parameter. That's also the cause of your delay. For more info about that: Link to comment Share on other sites More sharing options...
Yaya Posted July 30, 2020 Author Share Posted July 30, 2020 Quote It's a z-index issue: a bunch of other elements are layered on top of it (you have some crazy high z-index values). Crazy high values was a way to test other things. I'll take them back down. Good thinking! Quote You're mixing the position parameter with delays - why are you doing that? I recommend just using the position parameter. That's also the cause of your delay. For more info about that: 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. Link to comment Share on other sites More sharing options...
Yaya Posted July 30, 2020 Author Share Posted July 30, 2020 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. Link to comment Share on other sites More sharing options...
PointC Posted July 30, 2020 Share Posted July 30, 2020 I'd probably just add the wings to their own tween or timeline (repeat:-1) and then add that to one of your other timelines. That way the bird would flap its wings throughout the motion path and you don't have to worry about the position parameter for that part of it. Just my two cents. 2 1 Link to comment Share on other sites More sharing options...
Yaya Posted August 3, 2020 Author Share Posted August 3, 2020 @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. Link to comment Share on other sites More sharing options...
mikel Posted August 3, 2020 Share Posted August 3, 2020 Hey @Yaya, If this is a hummingbird, I would just let the wings 'rotate' quickly. See the Pen mdPbWvg?editors=1010 by mikeK (@mikeK) on CodePen Happy flying ... Mikel 1 1 Link to comment Share on other sites More sharing options...
Yaya Posted August 3, 2020 Author Share Posted August 3, 2020 @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. Link to comment Share on other sites More sharing options...
mikel Posted August 3, 2020 Share Posted August 3, 2020 Hey @Yaya, Hmmm - that is only a quick and dirty. You can also position the wings differently and try out suitable rotations. 1 Link to comment Share on other sites More sharing options...
Yaya Posted August 3, 2020 Author Share Posted August 3, 2020 @mikel I get it. I really, really appreciate your help and input! Link to comment Share on other sites More sharing options...
PointC Posted August 3, 2020 Share Posted August 3, 2020 2 hours ago, Yaya said: If the answer is that autoAlpha is not programmed for that, then I will abandon the idea. That should work fine. What you're basically doing is using a mini sprite-sheet with two frames. 2 Link to comment Share on other sites More sharing options...
Yaya Posted August 3, 2020 Author Share Posted August 3, 2020 @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. Link to comment Share on other sites More sharing options...
PointC Posted August 3, 2020 Share Posted August 3, 2020 How about this? See the Pen 6a6572746bd6d344cc15d6dcf2e31f85 by PointC (@PointC) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Yaya Posted August 3, 2020 Author Share Posted August 3, 2020 @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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now