Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by geedix

  1. 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/
  2. 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
  3. 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?
  4. 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.
  5. How about stringing two tweens together, like this? https://codepen.io/geedix/pen/ZEoVPPL
  6. 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
  7. 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.
  8. 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?
  9. 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
  10. I realize it's hard to help with a bug that I can't reproduce on Codepen, but allow me to talk to myself for a minute. I think FF is just chugging a bit. It's slow to turn the opacity on and off when swapping sprite sheets, in the context of a busy page. I can fix the problem by showing the new sprite .05 seconds sooner than I hide the old one. The problem is that you can glimpse the overlapping frame in other browsers. I'll keep working on it and report back if I find a solution. My ideas include forcing the GPU to get involved, changing the timescale, doubling the last frame in each 18-frame sprite... or detecting FF and skipping the animation for those users. Let me know if you have ideas, too. thanks
  11. Well I made a Codepen, but I don't see the flicker here. Maybe this will help me figure it out... but it seems like it might take me a while to crack this one... https://codepen.io/geedix/pen/dyJRmbg
  12. Maybe someone knows why my spritesheets animate fine in Chrome, Edge, Safari - but in Firefox they give a little blank flash when switching to the next spritesheet? I'm using GSAP with stepped ease to animate nine spritesheets, each with 18 frames, one after the other. They're 8192px wide and move horizontally by 442px per frame. If I slow the animation down to one frame per second, you can still see a blank flash on Firefox when going from one spritesheet to another. The flash is only for a brief few milliseconds. In my timeline, when one spritesheet's tween finishes, I set its autoAlpha to 0, and the next one to 1. This seems to be when the flash happens. I'll work on a Codepen example, and see whether it still happens there. thanks
  13. I did banners for years using both gsap and Animate, but didn't often use them together. You don't want to try moving the same things with both at once -- they won't cooperate. The timeline in Animate is good for character animation, keyframe drawings and complex masking. Gsap is good for smooth easing, transitions and scripted effects. As Carl mentioned, Animate has its own library, CreateJS. You can do scripted animations using that, since it's already loaded in Animate. It's not as much fun as gsap though.
  14. You could add a css rule to hide the text until javascript can reveal it, like this: https://codepen.io/geedix/pen/WNdezBW
  15. Thanks. I thought javascript would follow instructions in sequence, meaning the timeline would run each tween and THEN run the seek command at the bottom. And I thought that declaring the timeline as a variable was the same thing as creating it. But I see now that I was mistaken.
  16. I guess I don't understand "seek" because I just skipped all the prefers-reduced-motion stuff and I still can't get it to seek a label.
  17. I have done something like this before with success, but tonight, I can't make my timeline skip ahead. It logs 'true' for me if I set my mac to prefer reduced motion, or do it in dev tools, but it won't "seek" a future time or label. What am I forgetting? thanks
  18. Thanks, I appreciate the explanation and solutions.
  19. I'm having trouble applying timeScale changes to a timeline. If I comment out the timeScale part, then the timeline replays, but with it in, it stops. thanks
  20. Yes, you can have video under a mask or clipping path. I've done this in rich media banners. Ad networks can have their own video restrictions, such as requiring you to use their player, show their persistent controls and use their tracking.
  21. The problem is that the DOM doesn't know about things inside a canvas tag. You have to go through extra steps to manage tab focus and get some of that functionality back. This article looks like it might help you - https://codepen.io/servinnissen/post/a-somewhat-accessible-canvas
  22. I'm still on this motionPath mask project, but trying to have the masked item move, too. First I tried having two motion paths. So the mask (with circle) and the image were on separate motion paths. The mask wouldn't stay in sync, even with the onUpdate method that Craig used to solve my problem with masking an image that's sitting still. Here's the codepen, based on the above: https://codepen.io/geedix/pen/WNEXYJW I have also tried doing something similar without motion paths, and I'm still having problems with the mask not taking effect, or being out of register. I tried looking at MotionPathPlugin.convertCoordinates , but it doesn't seem necessary here, since they're both root level elements, right? At this point I'm thinking this may be too much for SVG to handle, and maybe I'll try an AE/Lottie approach. But then again maybe I'm missing an easy solution.
  23. Ah, thank you akapowl and Craig. True, the group tag version doesn't do it on Firefox. Proxy it shall be!
  24. I am able to rotate a mask while it affects an object on a motion path: https://codepen.io/geedix/pen/WNEXwNE And I can tween a mask without a motion path, but I haven't been able to tween a mask on its own motion path. Possible? https://codepen.io/geedix/pen/BadmLza. thanks
  25. Animate exports to canvas, which is just a bunch of pixels that can't be read by screen readers. It seems like a good idea to add fallback text and Aria attributes in the html. You might also use javascript to add keyboard access to interactive elements. I spent ten years building banners, and never heard a peep about accessibility. Glad to hear it's becoming a consideration. Anyone using a screen reader is probably using an ad blocker too, but you might as well add some text so they can read it if they want to. I don't imagine that ads (served in iFrames) would prevent a site from being ADA compliant, since they come from a different domain.