Jump to content
Search Community

clearProps:"transform" || all etc - a better understanding

nastid test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

See the Pen LEVeMm by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

hi, thanks for the demo. 

You provided a lot of details. Not exactly sure I follow it all. 

 

Try this

 

$('.tour-controls .tour-pause').on('click', function () {
    if (!t2.paused() && t2.progress() !== 1) {




       TweenLite.set($('.key-shortcuts').children(), {
            clearProps:"transform"
       });
       // uncommented this does what I need 
        //$('.key-shortcuts').children().removeAttr("style");
        t2.pause();
    }
});
 
It appears the line I added works the same as your commented-out line. Previously you were using
 
t2.set($('.key-shortcuts').children(), {
            clearProps:"transform"
       });
Which as I believe you noted somewhere, adds that set() to the end of the timeline.. not the timlines current position.
 
When you pause while the text is moving, clearProps will instantly place the text back to its original "un-tweened" state.
However, when you resume the timeline the text will jump back to where it was before the timeline was paused.
 
It can get a little messy when you have a timeline control things and then you want to jump in  mid-animation and overwrite what the timeline is doing.
I'd suggest that you do an opacity tween on the text when you pause the timeline, that way nothing is jumping around, but I really don't know how this is supposed to work in your real application.
 
---
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.

 

 

 
Sorry, those have to be separate operations. 
 
tl.to(mc, 1, {}, "label1") // add first tween at label1
tl.add("label2", "label1+=3"); // add label2 3 seconds after label1
tl.to(mc2, 1, {}, "label2"); // add second tween at label2
Link to comment
Share on other sites

Hi Carl,

 

Thanks for the help. 

 

Ah ok, I did try adding the 'set' in different positions/times, and thought I could use the same timeline instance to do the override, but see you can't.

 

 

As a way of greater explanation, the timeline calls a number of external existing functions (which was already written before I got my hands on GSAP) that can control a website in 3D space, view all the pages in summary etc.

 

I'm using the timeline to provide a tour of the shortcuts and other functionality and have provided some textural animations. I don't mind the jump, otherwise I'll have to add code layer that detects which element is actively being tweened. (tried classname,but hits sequence) Saying that, If I hadn't been so determined to find a working fix, I would've probably sat and thought about your simple but effective suggestion.

 

 

 

*Ok all I did was use the label system as number for the child in a new tween when paused - it even resets the opacity without explicitly doing it, when the previous timeline resumes, gsap is great!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...