Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by geedix

  1. That would be useful for a spritesheet that changes position on each frame, but for me, hiding and showing frames that are all in the same position, I don't see a way to use Keyframes. thanks though
  2. My example works fine: I have several frames in SVG that are animated using a 0 duration tween with a .12 stagger. However, I have a larger project where the same method isn't going so well. On and off states get out of sync upon repeat, there are overlapping visible frames and it's not as simple as I had hoped. Frame-by-frame animation must be a common thing to do. The examples I've found are changing the x position of a spritesheet rather than the visibility of an SVG group. Is there a smarter way to animate SVG frames? Maybe the method I'm using is good, and I just need to spend more time debugging my bigger project? thanks
  3. I specialized in building animated display ads for many years. That work started drying up for me around 2017. Since then, I have found it easier to find animation projects that aren't banners. I think ad dollars are going to social and search rather than display advertising. I don't see many banner ads any more -- maybe because my browsers have ad blockers on? I'm curious too.
  4. I don't know, you could just call the concept "falling cubes". You could get close with some randomized gsap tweens using a "bounce.out" ease. I would also look into the gsap Physics2d plugin: https://greensock.com/docs/v3/Plugins/Physics2DPlugin You would have to figure out your own collision detection, though. There are other libraries for that, but I haven't tried them. https://brm.io/matter-js/ looks fun. Good luck!
  5. It's unusual to have a banner without internet! If you're trying to keep all your code local and lightweight, you might try doing your animation with just CSS, or use a smaller library like anime.js, which is 18k. You can't split GSAP into smaller components.
  6. It doesn't look very legit to me, since there's no licensing info and you would need a commercial license for legit ad banners.
  7. Hi Sean! I also came from print long ago. I led the banner development team at a big agency for several years. After Flash died, we did HTML banners with GSAP, but the demand for that work declined. The banners we did became more templated and data-driven and it was hard to squeeze any fun animation in. I agree that the market for freelance banner developers is declining. The ad dollars go more to social media and search. I have a friend that specializes in Google Dynamic Ads, and apparently I'm not the only one who couldn't find work doing those even after learning their complicated platform. I think your site looks good and professional. You might want to expand your focus beyond ad banners. I was fortunate to find non-banner work specializing in SVG animation with GSAP. I wouldn't recommend spending too much time on Animate CC or GWD unless you're really set on staying with banners. Stay curious, maybe try React, Svelte, After Effects, 3js. Good luck!
  8. I'm not much of a coder but I can usually find a way. Here's a fork that loops through the cards onUpdate, and adds the class if a card is over a certain opacity: https://codepen.io/geedix/pen/gOBwWaq?editors=1111 Maybe poor for performance to do it this way, but it works.
  9. Just out of curiosity, I made a pen of it: https://codepen.io/geedix/pen/abRdEBL I learned that Safari mobile is buggy in a unique way without the backface-visibility hidden style.
  10. You can move that 2nd tween to happen a second earlier with a position parameter, like this: https://codepen.io/geedix/pen/zYmGRNV
  11. It's a fairly complex thing to auto-scroll the ISI and let the user interaction stop it, so good job getting this far. If you go all-in with gsap, instead of setting the _scroller.style.top css to an even pixel (remainOffsetHieght is an integer), then you can tween the _scroller y position, which will use transforms and be smoother. Also, set interval (100) is only 10fps, not very smooth looking. If you do everything with gsap, you won't need setInterval. hope that helps
  12. Hi @kpirkovic, I think I have fixed it by assigning position:absolute to the employees. They animate relative to where they start out, so they were stacked and going too far down sometimes.
  13. Hey @kpirkovic I made a pen of your code: https://codepen.io/geedix/pen/bGxwpyJ You were close, but the * -0.4 wasn't giving you the range you wanted for X and Y. Also, when you assign a random value in a function, it remembers that value for repeats. If you want it to be random each time, you can put the random function outside like I did.
  14. Thanks, the ability to play a tween from and to progress value is all I was looking for.
  15. I know how to start a tween from a certain point in its progress: tween1.progress(0.33); But likewise, is there a simple way of stopping a tween at a specified progress point? My codepen does roughly what I want, but it seems like there should be a more elegant way to finish each tween somewhere in the middle without making a new tween.
  16. Hi, I see a few things. You're loading gsap 3, TweenMax and TimelineMax, but all you need is gsap 3, which includes a timeline. You don't need both image tags and background images for the same image. Since you're using background images, set the css for those to background-size:cover and then scale the div. The point of using a timeline is that you don't need to use delays, you can just use the position parameter - https://greensock.com/docs/v3/GSAP/Timeline Let me know if you're still stuck and I can make some edits for you.
  17. DrawSVG is for animating strokes, but strokes don't work as masks. You'll need to animate a clipping path or mask. I recommend Cassies tutorial: https://www.cassie.codes/posts/creating-my-logo-animation/
  18. Putting your timeline inside an RAF means that it's recreated on each frame. Is this more what you're trying to get? https://codepen.io/geedix/pen/mdLoJQR?editors=1111
  19. It seem to be working correctly. The animation starts at 1 second and seems to synch if you scrub or play the video. Did you fix it, or is there something I'm missing?
  20. Yes you can make an array like that, if you need one, and loop over it with a tween in a function. But you can also just do the timeline without making an array. GSAP will find each element of that class name.
  21. How about stringing two tweens together, like this? https://codepen.io/geedix/pen/ZEoVPPL
  22. I would make an array of the elements, then loop through and tween the ones that aren't empty, like this: https://codepen.io/geedix/pen/zYjyyVy?editors=1111
  23. The mouse event isn't getting through to the primary logo because the secondaryLogo is in the way. If you put the event listener on secondaryLogo, it works.
  24. If you mean the mask is moving too slowly, then you could specify a shorter duration for your tweens, like gsap.to($middlemask, { x: e.clientX, y: e.clientY, duration:0.2 }); - it's just using the default 0.5 right now. But maybe that's not what you mean?
  25. Hi Adel, I put your code into a pen: https://codepen.io/geedix/pen/yLKNNYW?editors=1111 I changed the timeline to repeat once, instead of using the 'restart' command. I think that will work better for playing your animation twice. good luck