Jump to content
GreenSock

SKrishnan202

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

Recommended Posts

 

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

 

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. 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

 

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

example-green sock.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! 👍

  • 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.
×