Jump to content
Search Community

flysi3000

Members
  • Posts

    101
  • Joined

  • Last visited

1 Follower

Contact Methods

Profile Information

  • Location
    Brooklyn, NY
  • Interests
    computers, video games, photography, travel, food, hip-hop

Recent Profile Visitors

6,799 profile views

flysi3000's Achievements

  1. Hi! I'm trying to use the amazing MotionPathPlugin for a little animation of a series of objects that fall and bounce onto a surface. I've gotten the object following the motion path, but there are a few things I don't understand. It looks like the animation starts in the center of my container, and I can't seem to override that - I'd like the objects to start offscreen and animate into position and land on the blue surface. Also, I have MotionPluginHelper going, but the path looks like it's flipped 180 degrees - I'm sure it has to do with the path direction, but I'm not sure how to reverse it. Finally, if you hadn't guessed, these will end up being in some banner ads, and I'll want to resize them for a couple of different dimensions; is there a clever strategy to make this flexible for those different dimensions (ie. make them sort of "responsive")?
  2. I'm not sure if I fully understand what you're going for, but it sounds like you need to change the origin point of where the image is scaling from, I.e. the transform-origin of the image. By default, scaling happens from the center of the image, or half of the width and half of the height: transform-origin: '50% 50%' or transform-origin: 'center'. You can change those numbers so that the scales from any position - it could be the top left, bottom right, or some arbitrary point in the image: gsap.set(img, {transform-origin: '0 0'}) gsap.set(img, {transform-origin: '100% 100%'}) gsap.set(img, {transform-origin: '63% 32%'}) // note that you can also set your transform-origin into your .from() tween gsap.from(img, {duration: 29, scale: 1.2, ease: "power1.out", transform-origin: '63% 12%'}, 'img') You just have to figure out where you want it to start scaling from and uses those percentage values. I often eyeball it and use approximate values, but you could use something like Photoshop to figure out the exact percentages. Oh - and you only need to set it once - unless, that is you want to scale the same image again from a different point later. Hope this helps! :)
  3. D'oh! I hesitated for a second when I was writing that... thanks for correcting me. :)
  4. Hi @Vicky27! You have a pretty good start here. A couple of things, though - like @geedix says, you're mixing GSAP 2.X and GSAP3 syntax here, so be careful with that. You no longer need TimelineMax, as it's included with GSAP - just use gsap.timeline(). Also, get used to using the < and > notation at the end of your tweens to insert your animations either at the end of or the beginning of the previous animation. I find it much cleaner than using the delay property. For example, if I have animation A and animation B, I can write something like: // pseudocode - just to give you an example gsap.to(animation A, {...}) gsap.to(animation B, {...}, '>') One other thing - autoAlpha and opacity aren't the same. I find it easiest to pick one and use it consistently. Opacity turns a thing invisible; autoAlpha turns it invisible and sets it to visibility: hidden, which removes it from the document flow, meaning you can't click on it and stuff like that. As far as your images, once again, @geedix is correct, in that you can either use <img> tags, or <div> with background images set in css. If you choose the latter, go ahead and use your @2x resolution image (ie. twice the dimensions, as you said), but using css, just set its background size to cover. I tweaked your code a little bit here, with some comments to explain what I was doing! https://codepen.io/flysi3000/pen/OJwWwWb?editors=0010 One last thing, if you are interested in learning from someone that I learned a ton from, starting way back in the Flash + ActionScript days, check out @Carl's site, https://snorkl.tv.
  5. Thanks @Jonathan. It was the latest versions of Safari on the latest version of macOS 12, but only on non-retina screens. I seem to have fixed the problem in the interim, using a combination of the fixes suggested above. Interestingly, I tried replicating my problem on CodePen (with a crap-ified version of the client's artwork), but couldn't get the same blurry scaling issue, though, so ultimately, I'm not sure what was going on!
  6. Thanks @greensock! I know it's not a GSAP thing, so I really appreciate you taking the time to share some tips!
  7. Hi @Cassie, yeah I tried force3D: false; I’m bringing the svg in at about double the size I need it at and scaling it down. Again, it looks great on all the browsers except Safari on non-retina displays.
  8. It's that time... resurrecting this topic, with the caveat that I only see the blurry svg on Safari on non-retina displays. Sorry, I don't have a codepen; just wondering if anyone has seen this, or has any tips for a fix. ?
  9. Aha, I think that was the part I was missing - how to grab the current target. Thanks, I’ll give this a shot!
  10. I feel like this has to have been asked before, but if so, I can't find it. I'm trying to replicate a text typing animation, with a blinking cursor (or insertion point) that follows the text. Animating character by character with SplitText is easy, but does gsap expose a property where I can I figure out the position + width of the current character, and position my blinking "cursor" relative to it? Or am I approaching this in the wrong way? Thanks y'all!
  11. Ha, I found that immediately after I posted this - thanks!
  12. Hey all, I'm looking for the GSAP 2.x demo of using the Modifiers Plugin to make an infinitely scrolling carousel. While I'd love to use GSAP 3 as shown in this example, I have to use GSAP because our animation tools haven't been updated quite yet, and I need to get some client work out the door. Any pointers for where I can find the older syntax? Thanks!
  13. Ah, true, true... I was just curious and thought I'd ask here cuz I figure this is a pretty in-the-know crowd.
  14. Hearing more and more about Lottie lately (plugin for exporting animation from After Effects to JSON), and as I understand it, the real obstacle to using it for banner animation is the weight of the js library. Now that support for it is coming in Adobe Animate, might we have a strong enough case to get it white-listed (like gsap, createjs, etc)?
  15. Chiming in, just because I saw this the other day as well and had the same freakout, but then I realized that it happened when viewing our ads in a private window in Firefox. When viewing in a regular tab, I think it's okay, but it bears a little more research (which I haven't had the time to do yet).
×
×
  • Create New...