Jump to content
Search Community

GSAP is awesome! No Way to stop and clear animation

Bigtreat test
Moderator Tag

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

Hi , Guys I am new , i am trying to stop tweenlite but css transformMax3d is still there,  i am creating a slider like revolution slider editor but i am not able to get how i stop the tween in editor , inline style is still there so if you stop in middle of animation(See the attachment) , element will hang in middle of the page , 

 

i am using . clear() , kill() , also try killall but still css there , also try clear prop all but no luck please help me as soon as possible ,

i am also interested in split text purchase but , stuck in tween ?? please help me 

gsp styling.png

See the Pen OQvaxE?editors=1111 by fahimegold (@fahimegold) on CodePen

Link to comment
Share on other sites

You can clear props by using clearProps property of a tween but in this particular case you will have to use a set tween inside your click event. clearProps: 'all' is wild card that will remove all inline styles, if you want to remove only few CSS properties then you can pass them as comma separated list.

 

What you are expecting kill function to do is extremely rare case, if GSAP cleared properties when kill() function is called, it will be unexpected behavior for almost all users.

 

See the Pen MQVZEJ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

In your particular case you could also just call fadeuptl.seek(fadeuptl.duration()) before .kill() so that the animation is moved to the end immediately. I don't know what you're trying to achieve, but another solution could potentially be to toggle a class on the element you're animating, and have !important CSS rules in that class that will take priority over the styles set by GSAP. (Not sure if this is good practice, though.)

 

As a side note, saying a product sucks on that product's support forum, as your very first message, might not be the best way to get help with a particular problem – good thing the GSAP community is extraordinarily nice...

  • Like 4
Link to comment
Share on other sites

Hi accent thanks for your reply,  first I want to know is there any way to rename my post and let u know I want to create  a slider like revolution slider in WordPress,  I think I know about  it you can build slides in slider editor there is a feature  to start and stop animation  ,  I also learning from them they are using. Clear and kill for Tim line lite object to stop a animation of selected  text Layer but it was not working for me,  any other suggestions 

Link to comment
Share on other sites

If you edit your first post, you should be able to change the title.

 

Do you have a link to the particular effect you're trying to achieve? Slider Revolution does a whole lot of things, it's hard to understand exactly what you're aiming for and why you would need to remove CSS properties. (Not that you can't do it, as @Sahil and @PointC have said, it's just that you might be taking a suboptimal approach without realising :) )

 

  • Like 2
Link to comment
Share on other sites

No it will remove all inline CSS properties or the ones that you select to remove, even if you set them from HTML. If you want to just reverse what certain tween did then you can seek it's progress and pause/kill the tween.

 

Also you can simply set repeat property to -1 and it will repeat forever so you don't need to use onComplete callback to restart tween/timeline.

 

See the Pen MQVZEJ by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

23 minutes ago, PointC said:

@Sahil - I think the OP is asking about styles that existed in the stylesheet before animation. So, if you set the text to red in the CSS and then animate it to green in the tween, clearProps:"all" will produce red text again. Of course, that may not have been the exact question. :)

 

 

Please All of You see the video , in this video i am not taking about how cool animation are playing , i am taking about when i click on layer and then when i switch to another layer of text, animations are changing, previous text layer animation are stop immediately , that i am not able to achieve even with a click of button 

 

video files is here https://drive.google.com/open?id=1f9OUZmZ9X7pnNp1W5mDbCXw91TXEp7tA

Link to comment
Share on other sites

I'm not sure what we should be looking for here. The software you're using just demonstrates the fade-in and fade-out animations of the various elements when you select them. Unless I'm mistaken the actual live website wouldn't behave this way, the animations would only be triggered when you ask them to via JS or maybe with something that comes built-in with that software...

 

 

I can see two things you might be trying to do, please let me know if either is correct (or if they're both wrong):

 

1) you want animations on several elements, and you want them to loop indefinitely without stopping when you select another element... in this case, you would just set repeat: -1 in the tween's vars, like @Sahil mentioned above.

 

or

 

2) you want different animations in each element, and you do want each animation to stop when you select another element; in that case you'd need to detect that a different element is being selected with some JS, either with a mouse/pointer event or a focus event, and when that happens you pause() the previous tween (and you can also use seek() to jump to the start or end position), and resume() the new one.

 

  • Like 2
Link to comment
Share on other sites

9 hours ago, Acccent said:

If you edit your first post, you should be able to change the title.

 

Do you have a link to the particular effect you're trying to achieve? Slider Revolution does a whole lot of things, it's hard to understand exactly what you're aiming for and why you would need to remove CSS properties. (Not that you can't do it, as @Sahil and @PointC have said, it's just that you might be taking a suboptimal approach without realising :) )

 

 i am still not able to find anyway to edit the title , i go to dashboard -> my activity -> lef side menu post -> no option to edit the post 

Link to comment
Share on other sites

6 hours ago, Acccent said:

I'm not sure what we should be looking for here. The software you're using just demonstrates the fade-in and fade-out animations of the various elements when you select them. Unless I'm mistaken the actual live website wouldn't behave this way, the animations would only be triggered when you ask them to via JS or maybe with something that comes built-in with that software...

 

 

I can see two things you might be trying to do, please let me know if either is correct (or if they're both wrong):

 

1) you want animations on several elements, and you want them to loop indefinitely without stopping when you select another element... in this case, you would just set repeat: -1 in the tween's vars, like @Sahil mentioned above.

 

or

 

2) you want different animations in each element, and you do want each animation to stop when you select another element; in that case you'd need to detect that a different element is being selected with some JS, either with a mouse/pointer event or a focus event, and when that happens you pause() the previous tween (and you can also use seek() to jump to the start or end position), and resume() the new one.

 

yes, i want which you mention in your second point (2), can you please provide me any codepen for that , please 

and i am not able to edit the title of my post 

 

Link to comment
Share on other sites

  • GreenSock changed the title to GSAP is awesome! No Way to stop and clear animation
16 hours ago, Acccent said:

In your particular case you could also just call fadeuptl.seek(fadeuptl.duration()) before .kill() so that the animation is moved to the end immediately. I don't know what you're trying to achieve, but another solution could potentially be to toggle a class on the element you're animating, and have !important CSS rules in that class that will take priority over the styles set by GSAP. (Not sure if this is good practice, though.)

 

As a side note, saying a product sucks on that product's support forum, as your very first message, might not be the best way to get help with a particular problem – good thing the GSAP community is extraordinarily nice...

 

Hi @Sahil and all i try the above method which working great only when you a single tween in it , if  i add , fromto, from and to tween seprately its not working 

single tween which working great 

See the Pen NyMveG?editors=1111 by fahimegold (@fahimegold) on CodePen

 

add a (To) Tween to object and its not working , 

See the Pen XZqaYg?editors=1111 by fahimegold (@fahimegold) on CodePen

 

Link to comment
Share on other sites

@Bigtreat Lets slow down a little bit, if you are just getting started with GSAP you will have to spend some time experimenting with small simple animations that will build a strong foundation for you to understand what is happening.

 

To be honest with you it is still not clear what you are trying to do. So I am just going to fix your demo.

 

First demo by removing most of unnecessary properties that aren't animating in any way. Also in your both from and to tweens you are passing fourth parameters, but both methods only take 3 parameters. This demo shows how you can use labels to seek certain position in animation.

 

See the Pen JpvrYm?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Further simplifying same demo, here is the second demo that shows you can simply set repeat: -1 to repeat animation infinitely and set yoyo property to true so animation goes back and forth instead of jumping. This demo shows how you can seek progress to jump to end of animation.

 

See the Pen wyjroW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Now it is going to be too hard to explain every tiny bit of what and why. So it is expected from you to reduce your questions to as specific problem as you can. I will suggest you to start with the Get Started with GSAP page. On that page you will also find links to some video tutorials that explain all the basic stuff and some advanced features of GSAP. Start with as little code as possible and only add something to your code if your expected behavior isn't happening it keeps your project and demos simple.

 

Also, we rarely miss any posts so you don't have to message me twice saying you are going to post in forum and then message saying you have posted in the forum. Hope this makes things simple for you and us.

 

 

  • Like 5
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...