[Clear horizontaloop helper function when resize]

10 hours ago, Rodrigo said:

Hi @Jumaworks,

 

In fact with the latest update of the Horizontal Loop helper function Jack made, there is no need for convoluted conditional logic blocks like the one you have in your demo:

useGSAP(
  () => {
    const boxes = gsap.utils.toArray('.box');
    gsap.set(boxes, {
      backgroundColor: gsap.utils.wrap(colors),
    });
    
    const mm = gsap.matchMedia();
    
    mm.add('(min-width: 769px)', () => {
      const loop = horizontalLoop(boxes, {
        repeat: -1,
      });
    });
  },
  {
    scope: boxesContainer,
  }
);

Just let MatchMedia and GSAP Context do the reverting work and heavy lifting for you! Simple, easy and clean (like we love our code around here! 😉) Here is a simple demo:

https://stackblitz.com/edit/vitejs-vite-wunbqy?file=src%2FApp.jsx&terminal=dev

 

Happy Tweening!

Yes, you right. I'm following your structure, it look cleaner and work perfect. Tysm ❤️

[Clear horizontaloop helper function when resize]

10 hours ago, Rodrigo said:

Hi @Jumaworks,

 

In fact with the latest update of the Horizontal Loop helper function Jack made, there is no need for convoluted conditional logic blocks like the one you have in your demo:

useGSAP(
  () => {
    const boxes = gsap.utils.toArray('.box');
    gsap.set(boxes, {
      backgroundColor: gsap.utils.wrap(colors),
    });
    
    const mm = gsap.matchMedia();
    
    mm.add('(min-width: 769px)', () => {
      const loop = horizontalLoop(boxes, {
        repeat: -1,
      });
    });
  },
  {
    scope: boxesContainer,
  }
);

Just let MatchMedia and GSAP Context do the reverting work and heavy lifting for you! Simple, easy and clean (like we love our code around here! 😉) Here is a simple demo:

https://stackblitz.com/edit/vitejs-vite-wunbqy?file=src%2FApp.jsx&terminal=dev

 

Happy Tweening!

Wooho, it work like a charm, thank you so much. 

[Clear horizontaloop helper function when resize]

Hello GSAP, 
 

Currently I'm using the horizontal loop helper function to create horizontal drag, I have a problem: I only want it to work at breakpoints of 768px or less. When I'm at 768px (tablet breakpoint) I start dragging and when I resize the window it's higher than the tablet breakpoint. How can I completely cleanup that function?!

 

I could clearProps and kill the draggable instance but it doesn't seem possible. You can test the demo by resizing the window for better clarity. Thank you

Link stackblit: https://stackblitz.com/edit/stackblitz-starters-ebfeuj?file=app%2Fpage.tsx

I'm using useGSAP, and Nextjs. 

[Morph svg multiple path]

9 hours ago, GreenSock said:

You can't just point at an entire <svg> file and tell it to morph into another entire <svg> file, no. Each morph occurs on a single <path> element (it's animating the path's "d" attribute). Does that answer your question? 

 

If all your artwork in a particular <svg> has a single fill style, then you should be able to merge all the paths into a single <path> that you could morph. Most editors allow you to do that.

Got it, that's what i was wondering. Thank you so much, have a nice dayy ☺️

[Morph svg multiple path]

36 minutes ago, mvaneijgen said:

Hi @Jumaworks welcome to the forum and thanks for being a club member! 

 

I'm not completely sure what you're asking, but MorphSVG is to morph between two shapes and these need to be two <path>'s, best is to morph between two elements with the same amount of points for the best results

 

Our own @PointC has some great tutorials on how to export SVGs for morph SVG getting your files ready for animation is the hard part 

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Right now you're looping through 4 workitems and you have  11 qd items in total, so I'm not sure what suppose to happen right now. I see indeed four shapes morphing to four other shapes, but the loops stops at 4 so nothing more will happen. If I'm guessing what is is you want is that you'll have to duplicated your work items until you have as many as your qd items (eg 11) and then just morph the duplicate items to the other shapes?

 

 

 

 

 

Thank @mvaneijgen for reply. 

Yeah i know this plugin possible morph between two shapes. What you are guessing is completely correct to me.

But idk if we can morph between two svg i currently have? Like morph "Work" svg from "QuangDinh" svg

 

[Morph svg multiple path]

Hello Greensock. I'm playing arond with the MorphSVG Plugin but i'm having some problems.

How  can i morph between two svg with different number of path?! (please see the codepen for more details)

I can also select the entire of path in each group but that's not the way. I will attach two svg also.

Hope i can get the help. Thanks!

work-svg.svg qd-svg.svg

See the Pen wvOGgJv by mchanh (@mchanh) on CodePen