Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About mvaneijgen

  • Rank
  1. @mikel thanks for the response. I clearly do not understand the syntax, because setting the path to `100% 100%` and then go to `100%`. Fix the issue for me. Here is the full code. ```.staggerFromTo("#text *", baseTiming, { drawSVG: "100% 100%"}, { drawSVG: "100%", stagger: 0.2 }, 'sameTimeTwo')``` The only thing now is to start the two (text layers) too animate at the same time. The new `stagger: {...}` syntax want something else from me, but I can't find anything in the docs. Codepen updated to old stagger syntax an that works.
  2. I've drawn all my SVG paths from left to right. At least I think so, but all my animations draw from right to left. Is there an easy way to reverse the order in which the SVG paths draw? I've tried several solutions with `.staggerTo()` and `.staggerFromTo()` with `drawSVG: "0% 100%"` or `drawSVG: "100% 0%"`, but maybe I don't understand the syntax to fix the issue. Also how can you animate two `.staggerTo()` at the same time. I thought my `, 'sameTimeTwo'` label would work, but it seems like it doesn't.
  3. @Carl thanks. That is what I was afraid for, but I'll manage. Thanks for the feedback.
  4. I'm a designer by trade but also get designs from others that I want to transform into animations. The problem that I am having is that all the design programs (Adobe Illustrator, Affinity Designer, Gimp) export SVG with `id`'s but it would be much easier to work with `class`-es. I found a lot of tools to optimize SVGs like [SVGO](https://github.com/svg/svgo), which in turn has a lot of options to optimize your files with all kinds of settings and all kinds of platforms, but I don't really see a easy way of transforming just the `id`'s to `class`-es. My current workflow is also converting the design file withint the design program (I prefer is Affinity Designer) and than exporting as SVG, I usually than open it in my code editor and start working on the animation. When I than find something that is wrong in the design I go back to the design program, fix it and export the SVG again. This can happen multiple times a design file and somewhere in there I would love to convert the SVG code to classes. I was thinking of writing my own tool that transforms the file, but I would first love to hear how others do these kinds of steps or have other tips that could improve my workflow.
  5. Same here. I've come from CSS and now also included Javascript in my workflow. I've just about switched all my CSS code to state `600ms` instead of `.6` and would love to also have this inside Greensock Any word on this?
  6. @PointC thanks! the `scaleX` was the culprit and add `opacity: 1` to the `labelPop()` function fixed that issue. I don't really get why I can't use `.add()` because my parameters are handled by my functions right?
  7. I have this animation and in the JS tab on line 98 and 99 I recall the `notificationIn()` and `labelPop()` functions, but they will just not play for some reason, both elements that I try to animate where previously called with the same function and they worked fine and both got animated out with my function `scaleOut()` defined on line 73. I just can't for the live of me find the bug where I miss spelled something, it looks fine to me.
  8. I have this snap animation that triggers on a click and when someone clicks it for the second time I want it to snap back to it's original position. But reverse() is really reverse so also my bounce ease is being reversed which isn't the effect I was going for. Maybe unrelated, but what do you prefix your Google searches with when searching for the GreenSock animation documentation? (Greensock, Gsap, TimelineMax)