Jump to content
GreenSock

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

Yaya

ShockinglyGreen
  • Posts

    16
  • Joined

  • Last visited

Posts posted by Yaya

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

  2. On 6/8/2018 at 7:11 PM, GreenSock said:

    I assume you're trying to reach inside of an external SVG file that's loaded onto the page, and animate individual elements that exist inside, right? For security reasons, browsers don't allow that. You need to inject the SVG into the DOM itself. 


    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?

     

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

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

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

    See the Pen by mobile (@mobile) on CodePen

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

     

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

    See the Pen by agenda-2018 (@agenda-2018) on CodePen

×