Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About SimplSam

  • Rank
  1. OK thanks - it was worth a try. I may have to resort to a quick & dirty no-frills hack ... And yes I am from a varied computing, videography and animation background. Cheers
  2. I am of the considered opinion that GSDevTools is one of the best things since sliced corn-bread! However ... I occasionally (and increasingly) miss the ability to manually step forwards and backwards in the timeline. I recognise that GSAP is not frame based, but in this context of stepping - I would love for it to behave as if it was. i.e. Hit the step-forward button (key) and the timeline advances +1/24 of a second. I figure there could be a default notion of 24fps, but that could be overridden with an optional named parameter during tool creation. And maybe even an option to
  3. Hi Zach. There is no relation between the triangle and the square per se. The triangle is just there, for this example, as a visual timeline playhead position indicator. I will update to code to use Set (as it makes sense). With regards to Position. I would happily use it, as again - it would make sense, but I don't think I can as I am using keyframes, and I canny find anywhere to place the 'position' parameter for each sub-tween. i.e. Where would the 2 keyframed sub-tween's position parameters go in the below example snippet? tl.set('#FL0S1_sqr', {keyframes: [ {x:
  4. Excellent (once again). Looks like I just had to get out of my tunnel thinking, essentially swapping out: Steps with n Duration & zero Delay, for: Tweens with n Delay & zero Duration. And I guess - when I stop and think about it... a 'Hold duration' is a 'Delay'! 😄 duration: 0, delay: 1 Regarding "Normal Transforms" - This was a simplified explanatory example. Back in the real world, the transitions will be various state changes - which could be Transforms, Styling or Deformations of SVG data elements, with more complex timelines and various interpo
  5. I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red squ
  6. Ahhahhhhhhh. Excellent. That was amazingly quick & easy and testament to this Forum and the simplicity & power of GSAP. I would also like to shout out to @SaraSoueidan. During my research I came across a set of excellent well-written articles on the subject of SVG & Transformations by Sara: https://www.sarasoueidan.com/blog/svg-transformations/ My working version: https://codepen.io/SimplSam/pen/VwjOqBE p.s. I have been lurking for some time ...
  7. Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead. I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere). At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effect