Jump to content
Search Community

How do get on thing to disappear and the other appear?

namjoonforpresident test

By namjoonforpresident
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

namjoonforpresident test

namjoonforpresident

Posted
Posted

I currently have tow issue:

 

1. I have two divs stacked on top of each other and would like to able to show the content of each at a time by clicking on the tabs on the right. I also want the content to be scrollable as there is a lot of information in each div. It seems that the divs are interfering with each other as scrolling only works if I remove one of the divs.

 

2.  When I click on the second tab, the animation does not completely work

 

(For some reason my code works in my code editor but not in code pen)

See the Pen NVYVOZ by namjoonforpresident (@namjoonforpresident) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hello and welcome! Sounds like a fun time, I wish I could join.

 

As for your code there are several things:

 

  • On CodePen you should avoid putting the <html> and <body> tags as they assume whatever you put in the HTML section is the body.
  • On CodePen you should also avoid putting window.onload in the script because it automatically waits to run whatever is in the script until the onload event (I think).
  • Your artText variable was referencing the wrong element! I fixed it in the demo below.

Other things I changed in the demo below:

 

  • Your margin and padding were pretty funky so I changed them to make more sense. Feel free to change as needed but be careful that the content section's padding doesn't cover the SVG tabs (which it was doing in your demo). 
  • I used display:  none; on the .text::-webkit-scrollbar because setting width to 0 was breaking scrolling.
  • I made a function to switch between the two tabs and content sections, using variables that are passed into it to determine which to show/hide.
  • I used an if statement to check if they should be animated (so that if you click the same tab multiple times in a row it won't keep re-animating). 
  • I rearranged your SVG some so that the text and tab background are in the same group. I then animated that group using GSAP. 
  • I removed your title in the SVG because it was causing it to show up when you hover the tabs.
  • I added a pointer cursor on the tabs to indicate that they're clickable on hover. 

 

 

 

See the Pen GadNLY by ZachSaucier (@ZachSaucier) on CodePen

 

I hope that helps! Let me know if you have any questions!

  • Like 2
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...