Jump to content
Search Community

ScrollTrigger animation stops without finishing

Kkkrxs test
Moderator Tag

Recommended Posts

Hi everyone, It's been a week since I started learning GSAP and thanks to all of you that helped me I really learned a lot, although I have still a lot to learn and I'm now having a problem with a morphSVG animation that activates on ScrollTrigger, pretty much I have my main blob that animates and also behind i've put a little circle to morph to other objects based on the scroll.
When I enter the animation from the top the animation plays well, when i exit from the top same thing happens, but when i want to reverse that animation on exit it only works if i go slow, I've made a much higher duration to understand why and I realised that the animation start but STOPS when the end point gets out of view even if the animation hasn't finished yet. Having a scroll snap active the time between the animation start and the sudden stop is really low and the shape almost doesn't move at all and that causes problems for the next animations, this thing is driving me crazy because it has no meaning for it to stop midway.

In the codepen I've set the main blob to transparent so the little dot can be seen for the animation if you want to see the main blob simply change in the css the color from Transparent to somthing else.

Thanks in advance for the help ❤️

See the Pen by pen?template=gOdQZZR (@pen?template=gOdQZZR) on CodePen

Link to comment
Share on other sites

Hi,

 

There is a lot of code there, over 200 lines of JS and I don't know which animation you're referring to. I see the blob-shield-banana animation and a triangle behind. Which animation is not working? How is it working now? How it should work?

 

Please be as specific as you can and also point us to the part of your JS code where said animation can be found. That will expedite the process.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

19 hours ago, Rodrigo said:

Hi,

 

There is a lot of code there, over 200 lines of JS and I don't know which animation you're referring to. I see the blob-shield-banana animation and a triangle behind. Which animation is not working? How is it working now? How it should work?

 

Please be as specific as you can and also point us to the part of your JS code where said animation can be found. That will expedite the process.

 

Happy Tweening!

Hi Rodrigo, thanks for coming in to help me :)

The problem is that as you can see the triangle appears behind from the blob and is supposed to disappear again after scroll but it stops midway:
Anyway I already found the problem but I don't know how to resolve it, the problem is at line 52 with the gsap.globalTimeline.clear()  function since in fact the timeline clears when you get to that section, however i can't just remove it because if i simply do so the blob animation continues to loop and the shield morph doesn't stay as long as i stay in the div, it stays only for a second or so and then goes back to the blob looping.
I tried to do something with blob.kill() and others but it either isn't the way to go or I might even be using it the wrong way and I need to work it in a little different way, can you please help me to find the right way :)

 

Thanks,

Kris ❤️

 

Link to comment
Share on other sites

I don't have much time to dig into this, but I'm having a hard time understanding why you were doing gsap.globalTimeline.clear(). That would literally wipe out every animation and delayedCall in the entire system. Why not just do blob.kill()? You said that "isn't the way to go" but please explain why you think that. 

 

See the Pen QWVzBBN?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

On 3/24/2023 at 8:54 PM, GreenSock said:

I don't have much time to dig into this, but I'm having a hard time understanding why you were doing gsap.globalTimeline.clear(). That would literally wipe out every animation and delayedCall in the entire system. Why not just do blob.kill()? You said that "isn't the way to go" but please explain why you think that. 

 

 

 

Well, check this codepen, this is my code without any retouches, the first time it enters the 2nd block it transforms into a shield then when you go to the next block it becomes a banana for only a moment and then goes back to the original loop, the only thing that fixed that was the gsap.globaltime.clear(), with Blob.kill the blob loop animation continues to loop even tho it should stop.

See the Pen by pen?template=VwGgNeq (@pen?template=VwGgNeq) on CodePen

 

Link to comment
Share on other sites

1 minute ago, Cassie said:

Could you maybe explain what your visual end result is?

 

e.g.
I want x to do y until z - then...

It will likely be easier for us if we understand what you're trying to achieve here!

When entering a specific text block the looping center blob should morph in a specific shape that changes based on the topic of the text block, so let's say in that text block I will talk about security I want the blob to transform into a shield, if the next text block talks about bananas the blob should transform into a banana and so on for like 6 topics, then when i scroll to a text block with no topic it should go back to the original lopping blob animating.
That is the first step, now with the main blob I want to attach like 5 other blobs behind to add details to the shape, so let's say one topic talks about fruits the main blob would transform into a basket and other 5 blobs hiding behind the main blob should transform info fruit that will then go inside the basket and when no topic is needed just go back to being a little dot behind the original blob.

Hope everything is clear :)

Thanks ❤️

Link to comment
Share on other sites

Hi,

 

If you have different sections and on each section you need a different animation why not just use the approach discussed in this thread?

 

As Jack already mentioned no need to clear the global timeline or any other timeline actually. Just create different animations and run them in the expected sequence.

 

This seems like the perfect time to get rid of ScrollTrigger and focus on creating the animations first. Trying to create and run everything in one go with ScrollTrigger could be adding more complexity to this. Just focus on creating and running the animations (maybe use some buttons or something like that to animate different stages of your sequence) and once you have everything working as you expect, add ScrollTrigger back to the mix. So first focus on the blob loop (you have that working as expected), then the shield/basket morphs. Then on the stuff getting inside the basket.

 

Hopefully this helps.

Happy Tweening!

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...