en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en ca ca en en fr en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ca en pt en de en hu en de en en en de en en en en en nl en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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).
SteppedEase - Hold & Step
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.
SteppedEase - Hold & Step
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 ...
See the Pen oNLrKRd by SimplSam (@SimplSam) on CodePen
SteppedEase - Hold & Step
Posted November 22, 2020
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.
See the Pen YzWogKP by SimplSam (@SimplSam) on CodePen
Transforming multiple grouped SVG elements about a fixed origin
Posted November 20, 2020
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/
See the Pen VwjOqBE by SimplSam (@SimplSam) on CodePen
p.s. I have been lurking for some time ...
Transforming multiple grouped SVG elements about a fixed origin
Posted November 20, 2020
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'.
(desired @ 90 deg)
See the Pen jOroexa by SimplSam (@SimplSam) on CodePen
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“I think I love GreenSock as much as bacon.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.