Jump to content
Search Community

SVG Hovers Cont. -

squxd test
Moderator Tag

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

Hey all - 

 

As you may or may not have seen my previous post, this one has a few different issues I was unsure of how to fix.

I am pretty satisfied at this point. The only other things I was struggling with were...

 

1) When hovering over the "U" or "D" to highlight the other svg's (U-X-D) blue. I was using the ':not' some in

$(".blue-uxd:not(#diamond)").hover(function(){
  joinButton.hide();
  uxdButton.show();

2) This line works but there are still some issues where the diamond does not return to a full 100% and stops mid-hover. And when animating back up it still fades quickly from black to blue. Could I use a switch or something that only activates if the diamond reaches the top/floating step?

TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 

3) And when I hover over the "X/A" the " join button fades out and the "What are you waiting for?" fades in right after...

$("#xa-flip").hover(function(){
button.hide();
uxdButton.hide();
joinButton.hide();
hiddenButton.hide();
joinButtonActive.show()
TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0});
TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0});
joinButtonActive.hide();
hiddenButton.show();
}, function(){
joinButtonActive.hide();
hiddenButton.hide();
button.show();
joinButton.show();
});

thank you very much,

nick

See the Pen VaoVJB by squxd (@squxd) on CodePen

Link to comment
Share on other sites

hmm, this isn't valid:

TweenLite.from("#diamond", 1, {fill:"#00bbd3", progress:0}) 

"#diamond" does not have a progress property. Not sure what you are trying to do

 

Sorry, but I'm just trying it very difficult to decipher what your questions are and I'm having a rough time with the code.

 

For instance:

 

$("#xa-flip").hover(function(){
button.hide();
uxdButton.hide();
joinButton.hide();
hiddenButton.hide();
joinButtonActive.show()
TweenMax.to("#joinButtonActive", 6, {delay: 2, autoAlpha:0});
TweenMax.staggerFrom("#hiddenButton", 2, {autoAlpha:0});
joinButtonActive.hide();
hiddenButton.show();
}, function(){
joinButtonActive.hide();
hiddenButton.hide();
button.show();
joinButton.show();
});
 
 
You are doing hiddenButton.hide() and hiddenButton.show() in the same function (at the same time)
Likewise you're doing joinButtonActive.show() and joinButtonActive.hide() at the same time
The code in red shows you trying to tween both those elements also at the same time.
 
I think you may need to take a step back and focus on some of the JavaScript logic and structure. 
Perhaps look at my answer here: http://greensock.com/forums/topic/14440-convoluted-code/ and try to figure out how you can rollover each SVG letter and change the state of the big button. 
 
Unfortunately I just don't have the time to dig into all the code, track down all the elements you are trying to target and figure it all out. It really helps us to be able to look at reduced demos that only have enough code and assets needed to illustrate a problem related to GSAP. 
  • Like 3
Link to comment
Share on other sites

Carl,

 

I honestly do appreciate the time you have taken to reply. As you can probably tell, JS and GSAP are very new languages to me. This is actually my first "project" and with very basic knowledge/understanding of JS, I have been attempting to piece this together fairly rapidly... which is definitely not the recommended approach I'm sure, haha. I am way more Visual/Interactive/UX Designer than Developer at the moment but I am very excited - and see so much potential - for bridging these two gaps. Very thankful for what Greensock has to offer and look forward to our future encounters!

 

Also, thank you for pointing me in the right direction!

  • Like 1
Link to comment
Share on other sites

On another note... Do you think this would be able to be inserted into a wordpress theme? Or know of any previous posts that relate to inline SVG's in WP?

 

thanks!

 

Edit:

I can get the svg's in the right position, but I'm having trouble creating a custom JS file from my codepen...

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