[ScrollTrigger animation stops without finishing]

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 ❤️

[ScrollTrigger animation stops without finishing]

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

 

[Can't even understand what's not working with the scroll or the splittext]

On 3/20/2023 at 2:42 PM, Kkkrxs said:

Hi everyone, I'm trying to implement the first animation text effect in this codrop on my document: https://tympanus.net/codrops/2023/02/22/some-more-on-scroll-typography-animations/ 

 

The person who did the animation used splitting.js to split the elements into spans but since the place I started working at has club greensock i wanted to convert this code and make it work with GSAP Splittext, the facts is that i can't seem to make it work, I divided the elements with the splittext and that works since i could console.log them and they seem to be divided as they should.
Tried replacing the tags with what i thing needs to be replaced but nothing, I can't even get an error on the console(first time i complain about NOT getting errors in the console ahaha).
Can someone help me please and if possible provide me with an explanation so i can learn from my mistakes ?
Thanks in advance to everyone<3

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

I found the solution by myself, I just need to change the function names according to the ones in my document

[ScrollTrigger animation stops without finishing]

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 ❤️

 

[ScrollTrigger animation stops without finishing]

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

[Scrolltrigger on leave works only first time]

Hi everyone, newbie here trying to learn more about this INCREDIBLE language, I'd have a few question to ask to you GSAP GODS

I'm trying to animate the texts on enter with the fancy animation and onLeave disappear with a simple fade, as you can see in the codepen, it works but it has a few problems, first one is that it lowers the opacity to all the other texts below and so the other texts disappear without needing too, second problem is that when i scroll back the text doesn't appear back unless you scroll a little bit down to trigger the original animation again(thing is not needed, just making it reverse the fade would be perfect).

And there's a other thing, how can i make this animation occur on all text blocks independently so they all appear with the first animation and all disappear with the fade independently without fighting each-other, i've tried with a gsap.utils.toArray but the split text counted all the text as one and the other texts didn't do the animation on screen but finished the animation before even seeing them.

I'm getting obsessed with learning this language and would love some explanation on what I'm doing wrong with my code and how I could do it better

Thanks to everyone, love ya<3

See the Pen dyqqNQY by Kr1Xx (@Kr1Xx) on CodePen

[Overriding MorphSVG loop while on ScrollTrigger Zone]

On 3/17/2023 at 10:24 PM, GreenSock said:

Here's probably what I'd do: 

 

 

Hi @GreenSock, you're solution seemed to be working perfectly and doing what it's supposed to do, but I realised now that there is a little bug happening (that i would obviously fix myself if i knew where to start lol), the blobl animation works and stops when on the div BUT after the first time the shield gets loaded it's like it gets injected inside the blob cycle and repeats like it's one of the blobs, why is that happening and how can i fix it?

Thanks :)) ❤️

[Can't even understand what's not working with the scroll or the splittext]

Hi everyone, I'm trying to implement the first animation text effect in this codrop on my document: https://tympanus.net/codrops/2023/02/22/some-more-on-scroll-typography-animations/ 

 

The person who did the animation used splitting.js to split the elements into spans but since the place I started working at has club greensock i wanted to convert this code and make it work with GSAP Splittext, the facts is that i can't seem to make it work, I divided the elements with the splittext and that works since i could console.log them and they seem to be divided as they should.
Tried replacing the tags with what i thing needs to be replaced but nothing, I can't even get an error on the console(first time i complain about NOT getting errors in the console ahaha).
Can someone help me please and if possible provide me with an explanation so i can learn from my mistakes ?
Thanks in advance to everyone<3

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

[Overriding MorphSVG loop while on ScrollTrigger Zone]

Just now, Cassie said:

Heya! Your sections aren't spaced evenly so snapping is a little awkward, if you can adjust the CSS I'd probably do something like this, that's the easiest route.
 

 

Otherwise you can check the progress in the onUpdate callback and pass an array of more custom values. Happy to clarify more on that if you need to go that route. ☺️

 

 

i worked it out thru css scroll snapping at the ends, thank you for trying to help anyway :)))

[Overriding MorphSVG loop while on ScrollTrigger Zone]

On 3/17/2023 at 10:24 PM, GreenSock said:

Here's probably what I'd do: 

 

 

Love it, can't tell you how grateful I am for this forum ❤️

Would it be possible to implement a snap scroll that snaps in the middle of each element? So the user doesn't get a free scroll on the page but every time the user scrolls it snaps on the middle of each block, I've tried adding a snap but it snaps only to the start and end point, I've tried adding snap: 0.5 and it snaps on the start, the end end also the middle how can i work it out to snapping only in the middle of the text blocks?

[Overriding MorphSVG loop while on ScrollTrigger Zone]

Hi, I'm trying make a landing page with an animated blob in the background that morphs infinitely but transforms into specific shapes on some text blocks, in the example let's say i want to talk about security once i get to the security block the blob changes into a shield.
Everything kind off works, the looping blob is working but when i get to the text block that i want the blob to transform into a shield it transforms for a few moments than goes back to the blob like it glitches, i want the shield to stay as long as block is on view and when out of the block to go back to the blob.

 

I'm pretty sure this is something very easy to do but I started learning gsap yesterday because of a new place I started working at
 

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