Search the Community

Dear GSAP and fellow GSAP users. Although I found a workaround, as I expand my usage of your api, I thought it might be useful for me, and maybe others, to create a discussion based on what I encountered I've added a codepen as this is good practice, but it's a completely stripped down version of what is actually happening, as it is not possible to include everything, and what I'm after, seems to me to be something fairly straight forward. Scenario I have a timeline (small snippet in codepen) that simply animates some text, but which includes calls (removed from codepen) to external (unconnected to the animation) functionality. The timeline works great, and all the controls I've included do exactly as expected - accept that what I want to happen is when a user pauses the anim, the text acts gracefully and moves back to the starting position (css only, not timeline), as I don't want the text just to be stuck mid flow. I handle the external calls perfectly and the paused state is fine, all I want is the css side to be cleared. Ok so I tried the clearProps:transform || all etc (via a set command, and injected at different time points**), I also removed props/data/attr etc etc, but the transform on the text resolutely remains, if the timeline is either playing or paused. If I clear first, then clearProps works. For completeness, I tried killing the current tween (which I don't want,but as a test), didn't do anything. I tried using the timelinemax calls to get current/before/after labels, but since this moves the play head, but not the external function calls, I cannot use this. **Now I've read conflicting posts that say it is possible to use clearProps on working timelines as GSAP doesn't force continual transforms, and others that say it is not supposed to work in that way. I believe the default is for overwrite between tweens so wouldn't this allow another tween to take precedence? I'm pretty sure a tween is added to the end of the stack, as per api and probably explains what I'm seeing. I used $('.key-shortcuts').children().removeAttr("style"), which seems a rather blunt force approach, as it clears all styling, whether GSAP related or not. (but then looking at the code I think clearprops does the same?) Based on my scenario what would be the GSAP way to clear (or manipulate) the added css in a working timeline paused or otherwise? One final question, I quite often want to base one tween in relation to a previous label, but also want to label that very same tween. e.g. t1.to(some el,1,{some css},"label1+=1","but also be labeled itself?"); Is that possible? Btw, GSAP is just great, I had used it before mainly for the performance boost, standalone or as a jquery override, but for some reason I missed the timeline aspects. It's brilliant, I've already started removing the hugely ugly jquery way Thanks in advance