Yaya

@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.

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. 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.

@Shrug ¯\_(ツ)_/¯, Size of the file itself. When I am in file manager and check the size of 1 svg. Thanks for the link to the trees example; there were some morsels of good info there. @craig Not thousands of paths. I decided to limit the number of SVGs and use a jpg behind them to imply "lushness". I plan to post a codepen.

@ZachSaucier I understand. I am creating custom illustrations in Adobe Illustrator. I have created a few different leaves, each ranging from 4k-7k, to compose a lush nature background. That "k" can add up quick with these more complex paths. Overall, where you draw the line in the sand to prep artwork vs. use javascript must be on a case-by-case basis, I imagine. I'm also walking a tight-rope between SVGs and resolution-based graphics (or video). @PointC Thank you for the javascript suggestion. I will give that a try. Thank you for the support fellas! Much appreciated

Hey fellas, I'm checking out Zach's article and I can't quite land on the code that actually replaces the <use> for cloning the same svg. The closest thing I can find is the Physics Utility code here: // create 80 dot elements and put them in an array for (i = 0; i < 80; i++) { dot = document.createElement("div"); dot.setAttribute("class", "dot"); bg.appendChild(dot); dots.push(dot); } I'm sure it's a classic case of newbie-itis.

@ZachSaucier Great! Yes, the docs and I have been getting acquainted. There is nothing like doing vs. reading. Thread closed! Thanks so much!

@ZachSaucier I can't express how much I appreciate your detailed response. Each tip helps me "fish" instead of reaching out to others to fish for me. Instead of going straight to your codepen, I addressed each suggestion you made and changed my own code. I still needed your final codepen at the end to correct some things I didn't quite understand. Now, I have more tools in my toolbox! Also, I took your advice and checked out the tips for DRY methods (and other goodies). I can see where changes can be made, such as separating .fromto into .to and .from. I may make that a separate pen so others may compare. I have one question that I wish to clarify: Adding quotes around strings I get that. Backgrounds, colors, text styles need those. I noticed in your code that width: 0, width: "100%" -Can I assume as a general rule that there is no need for quotes around strings that have a value of 0? - I relied on the Basics block from the GSAP V3 cheat sheet, but didn't understand these details until this thread. Thanks again! Mary

@Shaun Gorneau thank you for such a simple solution! You can probably whip that up in minutes compared to the 8+ hours I spent yesterday on my effort. That really comes in handy.

Hi there, It's been almost 1 year since I joined the Greensock Club and I gotta say... it's been so FUN! I learned enough to outsource and communicate with more experienced GSAPers for my client projects. I really need to get past the newbie phase so that I can personally code for quick turnarounds. I've reviewed several codepens, tuts and the Version 3 Cheat Sheet to generate my first attempt at the following concepts: 1) Creating links that make modals appear: Click link to FAQ Question and see modal of Answer. Then, close modal to return to Questions. 2) Nesting Timelines where each timeline is a Question/Answer set. 3) Avoid repeating code where it's not necessary Example: Adding the following on both timelines: gsap.set (".question", {text-decoraton:none, line-height: 1.5em, color: #158dd3}); ---------- The ultimate goal is to code blocks (of any content) and hide/reveal/animate blocks when the user clicks on a link. Less scrolling down the page. I'm not there yet. Thank you in advance for taking the time to check out my code and offering me guidance.

@ZachSaucier That's fabulous! It looks easy enough to implement quickly. Is the "filter" supported on most modern browsers these days?

@Dipscom, I was looking for gsap blur and ran across this thread. Your advice lives on..... to help others like me! Thank you. @defransekamer, I am glad you asked the question.

Hey there, newbie here, I'm not pulling it all together very well from this thread. I've loaded Wordpress Ver 5 and want to use the GSAP Ver 3 CDN as well as the Morph plugin. I'm using the Hello Elementor Child Theme. It seems to load the Elementor (parent) style.css AFTER my custom style.css, which is another layer of complexity not related to GSAP. Also, there is no GSAP plugin required, correct?

@Dipscom hahaha! I'll post one if I figure it out myself. :)

Are there codepens to show this in action? I'm slowly getting a handle on three.js and gsap but also want to see how this awesome three plugin works.

Thank you for your advice, Craig! I can put svg's with gsap animation on top of canvas or WebGL, correct? Checking out three.js now.

Hi there, As a GSAP newbie, I am still navigating the possibilities of svg while managing performance. I ran across some examples of how several paths are animated to "fly" the viewer through a 3d space. There are tons of examples online (and in this forum) but I can't nail down how it's done; believe me, I've spend several hours searching. After going down several rabbit holes, from using my Adobe CC Animate/After Effects, to particles.js, to webgl, and even Blender (3d and not related to my goal here), I'm finally poking my head above ground and asking the gsap community. You can slap me with a wet noodle for taking so long to ask. I made this screencast to be very specific about what I'm trying to do. In the first 1.5 seconds, you see triangles and polygons floating. If I create... say... 4 different polygons, is there a way to use gsap to duplicate those and animate them collectively for this fly-through effect? Are there codepens out there that use a similar technique? http://screencast-o-matic.com/watch/cFXFbCrQ3h Thanks in advance for your time and expertise to jump-start me in the right direction!

Note: I decided to copy/paste the SVG code directly into my index.html file instead of using img src or object. I'm not sure if that is best practice but it helps me start tweening while I await your advice. Thanks for your time!

I have hired someone to help me crank out some TweenMax animations. I'm using 1 SVG that has been grouped and exported per this thread. https://greensock.com/forums/topic/18010-better-adobe-illustrator-svg-exports-make-gsap-animating-easier/ Just like this post, I need to animate inside 1 SVG. My freelancer says that he needs to "inject the SVG into the DOM" like you mention. He's using SVG-Injector frrom 2014-2015, which worries me. Is this the only way to solve? Also, It's not clear to me if the tiger codepen uses an injector or if that is an alternative to "injecting the SVG into the DOM". What I DO know is that the Illustrator Export workflow works very well and I'd like to keep that. Here is the codepen without svg-injector and transition/mouseover layers (ie blue boxes) visible. https://codepen.io/yayaCreates/pen/yRXNxE/ Do I advise him to use svg-injector or do I offer up an alternative, knowing that we are exporting a layered Illustrator file?

Thank you determin1st, this looks like a good option for people using Cloudinary. For https://elevatorhose.com , I ended up using the old fashioned css code and background image styles.

@determin1st I really appreciate you taking the time to code a solution! I can apply this in so many ways! Thank you Visual-Q for your advice and help as well!

Good question, why svg... maybe not the best choice in this scenario. I am working on client websites to learn the best cases. What I learn from these will help me set boundaries for my own portfolio website. I really want to make my own site showcase GS capabilities so that I can get that kind of work. Thinking about using the computer screen as a 3-d environment for my site from layout to interactive animation. I'm clearly not close to that. Just a goal I have on hyperdrive. I appreciate your time today.

I have not tried srcset from https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ but will give that a go!

Oh, you are a gem for helping so quickly! I am using the following code to manage it through .css because it's my comfort zone. I am really focused on updating my code practices. Greensock is new to me, so I'm first trying to find solution online before bothering anyone. Here's the code I'm using to manage different image sizes currently: .elevator-hose-375 {} .elevator-hose-750, .elevator-hose-1125, .elevator-hose-1500 {display:none; visibility:hidden} @media all and (min-height: 768px){ .elevator-hose-750 {display:block; visibility: visible;} .elevator-hose-375, .elevator-hose-1125, .elevator-hose-1500 {display:none; visibility:hidden} } @media all and (min-width: 1200px){ .elevator-hose-1125 {display:block; visibility: visible;} .elevator-hose-750, .elevator-hose-1125, .elevator-hose-1500 {display:none; visibility:hidden} } @media all and (min-width: 1300px) { .container-fluid .elevator-image {max-width: 1500px; margin: 0 auto;} .elevator-hose-1500 {display:block; visibility: visible;} .elevator-hose-375, .elevator-hose-750, .elevator-hose-1125 {display:none; visibility:hidden} } I'm pretty comfortable with using a basic Tween to call the classes for the animation. I just learned that yesterday.

I am converting a very old web page at https://elevatorhose.com to animate a hose image. So far, what you see is the old version. On my local computer, I have set up different image sizes. The elevator hose image itself is a rastorized image that I have exported into different sizes as svgs. My goal is to use @media to pull in the correct size svg and then animate it using Tween Max. <img class="elevator-hose-375" src="images/elevator-hose375.svg" alt="Elevator hose customized to your specifications"/> <img class="elevator-hose-750" src="images/elevator-hose750.svg" alt="Elevator hose customized to your specifications"/> <img class="elevator-hose-1125" src="images/elevator-hose1125.svg" alt="Elevator hose customized to your specifications"/> <img class="elevator-hose-1500" src="images/elevator-hose1500.svg" alt="Elevator hose customized to your specifications"/> I have looked for a solution online, knowing that Greensock is really a vector-based solution, but I would really love to use it for raster images. At the moment, I am using css @media to display the correct image. Can you direct me to the correct approach?

Whoa... it's working.. it's working!!! Now I can separate out the logo elements and really have some fun!