Jump to content
Search Community

Overriding MorphSVG loop while on ScrollTrigger Zone

Kkkrxs test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hi @Kkkrxs and welcome to the GreenSock forums!

 

There are mostly two issues in your setup. You have a Timeline with repeat -1 running, which means endlessly looping. Then you have another GSAP instance that morphs the same path using ScrollTrigger. This is what happens:

  • The endless timeline morphs the path over and over.
  • The ScrollTrigger start point is passed and then the other GSAP instance starts. It basically animates the same property on the same element, so it overrides the endless timeline, which is still running.
  • The tween that was triggered by the ScrollTrigger ends and in the next GSAP tick, the timeline, that is still running, takes over and that's when you see the glitch.

The solution is to pause the timeline using the onEnter callback by ScrollTrigger and run the shield morph. Then using ScrollTrigger onEnterBack callback, morph the path to it's starting shape and restart the timeline.

 

Here is a live example:

See the Pen BaOPNEQ by GreenSock (@GreenSock) on CodePen

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

See the Pen poOZJMa?editors=0111 by GreenSock (@GreenSock) on CodePen



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

  • Like 1
Link to comment
Share on other sites

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 :)))

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi,

 

That's because when the repeating timeline is created again the current value of the d attribute on the path is the shield one, so GSAP uses that as part of the loop.

 

The solution I can give you is to morph the path to it's original shape and then restart the loop:

ScrollTrigger.create({
  trigger: ".third",
  start: "-100% center",
  end: "200% center",
  onToggle: (self) => {
    if (self.isActive) {
      // if it's active, kill the current blob animation and morph to the shield shape
      blob && blob.kill();
      blob = gsap.to("#step1", {
        morphSVG: "#shield",
        ease: "power1.inOut",
        duration: 1
      });
    } else {
      // otherwise, go back to the blob
      gsap.to("#step1", {
        morphSVG:
          "m131.6132,18.2754c14.1,10.1,26.8,21.2,34.4,35.3,7.7,14.2,10.3,31.4,6.4,46.5-4,15.2-14.5,28.2-26,39.2-11.5,10.9-23.9,19.7-38.1,25-14.2,5.2-30.1,6.9-44.2,2.6-14.1-4.2-26.4-14.4-37.6-26.2-11.3-11.8-21.5-25.1-24.3-40-2.8-14.8,1.7-31.2,10-44.3,8.3-13.2,20.4-23.2,33.5-33.7C58.7132,12.0754,72.8132,1.0754,87.5132.0754c14.8-1,30.1,8.1,44.1,18.2Z",
        duration: 1,
        onComplete: animateBlob,
      });
    }
  }
});

Maybe Jack can craft a solution that's more elegant and concise, but for now that seems to work as expected.

 

Hopefully this helps.

Happy Tweening!

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