nmarketti

Hmmm. I like simple. I might look into refactoring the setup then for the circle effect. I'm not entirely sure if I want to go this direction either, just pinging the forum to see if there was a simple way. Thanks!

I'm laying out ideas on how to approach an animation that will happen in multiple places across an entire site. While I know I could use DrawSVG...the way I developed these circles for each section was specifically for ease of control of the various sizes across sections, viewports, etc...so I opted for a circle created with straight CSS rather than SVG. Can you do a similar draw effect with the circles on CSS properties, without having to use SVG and DrawSVG?

Ah. This is a great. Thank you.

Update: Was able to get the tab click and fade working. But still struggling to link the tab to fade out their correlated content.

I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them. Thoughts on this?

Ah. This makes sense. I read through the code and understand what's going on now. I'm still fairly new to all this, so thanks for your support! Cheers!

Awesome. Was able to get it setup and working Works great. That article you sent was very insightful. Thanks for sharing. Quick additional question though for you. I am creating this as a button to be re-used throughout several pages. The current setup is using document.querySelector This only selects the first instance on the page. I was looking into different selectors...but to no avail. Does this have to be written differently to activate on any class that has the label "#Trigger"?

I tried forever tinkering with DRAWSvg. Thank you so much!

I'm trying to create a specific button effect when you hover over it. See Image Attached Basically once you open hover on the button it opens on the right and the arrow slides out right. Is there a way to open both ends at the same time on hover for the SVG?

Update: In my case I was able to solve this by removing TweenLite.to("#rect .inner", 0, {y:"0px"}); // first set to 0 All works both easing both ways. Just had to tweak the position settings a tad. Thanks again!

This will be perfect. Thanks for all the help!

HI Mikel, Excellent...I have it working. But for some reason the rotated 90 degree areas are moving at snail pace. They move on click, but I can only get the next "h2" into position after clicking like 20 times. I'll keep looking into this. Cheers, Nolan

HI Mikel, Thanks for that snippet, was very helpful. What I'm trying to achieve is a single page experience, where as you click on a nav item it swaps the header labels as so...and fades in the center content (#4) I was able to use that code snippet to get the top header(#1) moving between labels correctly, but the side labels (#2 and #3) were not swapping. Any thoughts? Screenshot attached

I'm working on a single page design that when I click between the NAV items in a dropdown menu, it tweens all the headers to a new name that are lists. I'm having an issue with Tweens on a click. The codepen has the current example. 1. If you click "clients", it Tweens the top header down and clients appears 2. If you click "profile", it Tweens the top header back and the default Name appears 3. If you keep clicking between the two, it still moves back and forth, but it loses it's Easing effect. I'm trying to do this between four headers, but I was just trying to get the initial setup here.