SimplSam
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by SimplSam
-
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
-
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 snap to the absolute frame during step (like snap to grid).
-
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: '563', y: '0', duration: 0, delay: 1}, {x: '1126', y: '0', duration: 0, delay: 1}, ]}, 0); Also... I definitely forked my original pen. I have double checked and can see it listed as such on the details page. Cheers
-
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 interpolation combinations. My updated version ... https://codepen.io/SimplSam/pen/oNLrKRd Thanks again.
-
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 square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
-
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 ...
-
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 -- effectively spinning around a fixed point on the page. So... the outer Group element ('street' in my codepen example) needs to behave like a parent-filler rather than a child-wrapper, with the origin offsets relative to the parents offset and dimensions. Note: The content items can be arbitrary i.e. multiple houses, cars etc. (set by a user), and the content may also exceed the bounds of the purple view box. None of these factors should affect the pre-defined rotation origin of the 'street'. (start) (desired @ 90 deg)
