Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Yaya

  1. Yaya

    Three.js properties

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

    Three.js properties

    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.
  3. 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.
  4. 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!
  5. 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!
  6. 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?
  7. 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.
  8. @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!
  9. 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.
  10. I have not tried srcset from https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ but will give that a go!
  11. 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.
  12. 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?
  13. Whoa... it's working.. it's working!!! Now I can separate out the logo elements and really have some fun!
  14. Ah yes, Carl! Forest through the trees... glad it was a simple solution. Thank you!
  15. Oh, that's great info! Thanks for responding so quickly! I tried that and it didn't solve my problem. I also removed the "x" factor completely for troubleshooting. So now it's just TweenMax.to(".radical-logo", 3, {scale:2, ease:Back.easeOut}); I wonder if the CMS (Joomla) is conflicting in some way. I'm not seeing errors but want to consider every possibility. The CMS loads JQuery 1.12.4 but not JQuery Animate. I also moved the Greensock script and custom.js to just below <body> so that it loads before the content loads. No success there either.
  16. HI there, I am on the very first tutorial, trying to make a basic logo animate. So far, the logo does not animate at all. I loaded GS CDN and a custom javascript file after that, both before the </body> tag. In the HTML page, I added: <p><img class="radical-logo" src="images/HSDA-Annual-Meeting-2018/radical.svg" alt="its time to get radical" /></p> In my custom.js file I added TweenMax.to(".radical-logo", 3, {x: 80%, scale:2, ease:Back.easeOut}); I viewed source to be sure both the Greensock CDN file and the custom.js file were loading properly. The only css I've created in my custom.css file is the following, thinking that I want the logo to start small and get bigger: .radical-logo {transform: scale(.25); margin-top: 30px;} Any ideas why I cannot get this simple svg to fly?