scrollTrigger with morphing shapes in 4 stages

[sirhclluk]

In this I'm using scrolltrigger with a million different shapes morphing in 4 stages. If you scroll slowly there is no issue.

But scrolling up and down several times the shapes start flying off.

I have the scrolltrigger on the master timeline, with 8 timelines within it.

Thanks for any help.

Chris

 

See the Pen 2f6c10b227f0609c04548b6222d25d8a?editors=0010 by sirhclluk (@sirhclluk) on CodePen

[mvaneijgen]

Hey, you've disabled forks of you pen, makes it harder for us to tweak your code, maybe you can enable it. 

 

Also you know you can just pass in the `rect` and `circle` elements to the `.convertToPath()` instead of having to list out all the elements by name. 

 

The problem is with your `.vibrating` animation, if you disable that the items will behave. I don't have a solution yet, but I wanted to share my finding so it maybe helps the next person.

 

Edit: I have the feeling it has to do with transforming the elements that them selfs already gets transformed. What a possible solution could be is to group (lets say three elements per group) some elements in a `<g>` and add the vibrate animation to that `<g>` tag,  then you're not animating the same element twice. 

 

See the Pen vYpMmQB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Edit 2 unrelated: I knew it had to be easier . You can morph all your elements with the following piece of code. No need to list them all out. Example for all triangles. Here is an example pen codepen.io/mvaneijgen/pen/OJzGmeR

  .to("#prima_positive_triangles *", {
    morphSVG: (index) => `#prima_pos_tri_b${index + 1}`
  });

 

Edit 3: I've moved the vibrate animation to the whole group (so the effect is not the same) and then the items will behave them selfs. It has to do with animating the same element multiple times. I would suggest wrapping them all in their own `<g>` tag and animating that tag or group a few together also in a `<g>` tag, this maybe safes you some performance.

 

See the Pen ZEvZyKm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

[sirhclluk]

Wow mvaneijgen, you are a magician. As you can see I know just enough to be dangerous. 

I didn't know I could target all rect and circs in the svg.

What is this clearing? console.clear();

 

Thank You.

You deserve a reward.

Chris

[OSUblake]

18 minutes ago, sirhclluk said:

What is this clearing? console.clear();

 

It just clears the dev console. You'll typically see that in CodePen demos because it doesn't reload the page when you make changes, so the console might have a bunch of old console.log messages showing.

 

https://developer.mozilla.org/en-US/docs/Web/API/console

 

[mvaneijgen]

13 hours ago, sirhclluk said:

As you can see I know just enough to be dangerous. 

Great quote! 🤣
 

The animation looks great. I myself have the tendency to optimize my code before it works, it's better to do that after the fact. But know that when you have to repeat your self you can usually reduce some lines of code.

 

Would love to see the animation when it's complete, so feel free to post back here if you've the time!