Creating an External File Folder with SVGs Drag and Drop images - Please advise!

[SKrishnan202]

 

Hello Guys!

 

I'm new here to Greensock and excited to be a part of the community! I shall continue to contribute as well. I'm new to SVGs and working on some pretty cool stuff. As you can see here from this URL, I have a group of shapes (currently as a cluster) and they are SVGs. Does anyone have experience on how I can create a folder toggle button and it shows the shapes as a collection? I already have the drag and drown functionality built in. 

 

Thanks for the assistance!

See the Pen rNdKVBB by skrishnan202 (@skrishnan202) on CodePen

[Cassie]

Hey there @SKrishnan202

 

Welcome! I'm afraid I'm not quite sure what you mean by this - sorry.

Quote

folder toggle button and it shows the shapes as a collection

 

What's a folder toggle, and what do you mean by show as a collection? Could you elaborate a little?

 

Thanks so much!

[SKrishnan202]

 

Like...suppose you're on a website and you have a button [+] whatever you want to style the button to be. It then shows the collection of shapes where you can click and drag on to a blank slate and then manipulate however you choose. 

[Cassie]

So you want a button you can click that will toggle the visibility of the shapes?

Sure, you could do something like this?

let isVisible

button.addEventListener('click', (e) => {
 gsap.to(shapes, { 
   autoAlpha: isVisible ? 0 : 1,
   onComplete: () => isVisible = !isVisible
 })
})

 

You don't even need GSAP if you're not planning to animate it - It'll help to look into event listeners, you can just toggle a class if you're just simply showing and hiding something, or GSAP if you want to do something more fancy!
 

https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class

[SKrishnan202]

 

Here is an example image that may help illustrate what I'm talking about. 

[SKrishnan202]

what's a good way of doing this if you've done this before? Thanks!

[GreenSock]

I think Cassie already gave you the solution. Maybe try implementing that in your CodePen with whatever button you want and then if you get stuck, post back here with a minimal demo and we'd be happy to answer any GSAP-specific questions. Good luck! 👍