Jump to content
Search Community

Menu 3D transform animation

failure13 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

Got some problems.

 

See the Pen LwCgt by failure13 (@failure13) on CodePen

Here's pen, in codepen everything is fine, but when i test in Firefox 25 got this strange little margin:

 

R8Rg24VC.jpg

 

Strange thing about it, is that it comes only between 1st and 2nd menu button, between other there are none, if i delete gsap lines from js code, everything is back to normal...So is this known bug, or i'm doing something wrong?

 

And also i got this problem, which is almost impossible to reproduce in codepen (since when you press on link page disappeare), but problem is like this, when you press links too fast, you can actually visually select 2 or 3 menu items at once, like this:

 

Sa5QoeK3.jpg

 

Is there a way to avoid it in my case?

Link to comment
Share on other sites

Hmm I can't get that effect to happen for me in Firefox 26 (win7), so maybe it's been fixed already? My thoughts:

 

You could try clearing the transforms once they are done to see if this is just a quirk in FIrefox's transform rendering e.g.

TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4, function() {
  TweenMax.set('ul#menu li', {clearProps:'all'})
})

Also, perhaps try removing all the pie stuff and seeing if it still happens? I know we've seen pie causing unpredictable behaviour before (was that with you as well?) so it wouldn't hurt to rule it out.

  • Like 1
Link to comment
Share on other sites

jamiejefferson

Wow, it seems that you're right man!

1. clearProps works with FF 25

2. I have VM with XP, tested on FF20, everything works fine without clearProps

3. This time it was not pie strangely :)

 

So, would you recommend to keep clearProps as a good practice anyway, or just beat it (as it appears to be only in 25)? (i mean, wouldn't it hurt or slowdown anyhow to use clearProps?)

 

P.S. Problem about clicking is still open, i feel like maybe my logic is faulty...

Link to comment
Share on other sites

clearProps has its uses but is by no means required. In general if I'm doing a 3D transform that finishes on a 'non-transformed' state (i.e. rotation,x,y etc are all 0) then I usually prefer to clearProps, but that's just me. You can also target specific properties to clear so you can remove some/leave some e.g.

// removes transform, but foo is still red
TweenLite.to(foo, 1, {rotation:0, background:'red', clearProps:'transform'});

 
Performance wise, I suppose the clearProps will probably cause a repaint, but on the other hand removing transforms should remove the need for a GPU layer (assuming the browser used one) which is probably a good thing too (it's really hard to quantify performance - it really depends on how the site is sturctured, what browser and hardware etc).
 
Also I guess it depends on if you plan to tween the element further or if it's just going to remain static for the life of the page. If it's something to be tweened a lot, the clearProps probably doesn't have much benefit.
 
----
 
As for the click stuff, its because you have existing tweens to the active class that aren't being cleared by removeClass i.e the tween completes and adds .active after the click. The hover class can also interfere here. Try this:

// menu active
var links = $('#menu li a').click(function(e) {
  // link goes nowhere in codepen
  e.preventDefault();
  
  // leave 'this' out so it can have a direct transition
  var others = links.not(this);
  
  // kill active '+=hover' and '+=active' tweens
  TweenLite.killTweensOf(others, true);

  // clear classes and leftover, in-progress styles
  TweenLite.set(others.removeClass('active hover'), {clearProps:'all'});

  // set single link to active
  TweenLite.to(this, 0.3, {className:'+=active'});
});
  • Like 3
Link to comment
Share on other sites

jamiejefferson

Thanks for clarification man, it helps a lot!

 

As for this tricky method of clicking, it works absolutely great, never fails like before!

 

But is there any way to make something solid and unmistakable like it is now (super fast click & go to right section), except previously selected menu entry would fade with tween animation after beeing pressed, not disappear immideately?

 

I guess it would be something liek creating var for selected class before killTweensOf?

 

See the Pen LwCgt by failure13 (@failure13) on CodePen

Link to comment
Share on other sites

It gets a bit messy at that point since its simple to tween the complete active/hover state back to the start (className:"-=active"), but the in-progress ones are much more difficult to deal with (the class isn't applied yet, so you want to tween from the current values to the 'clearProps' values, which isn't as simple to solve with this method.

 

Instead of the killTweens of and clearProps, maybe you could do a getTweensOf, loop over them and reverse them all?

 

You might also consider coming at this from another direction e.g. save a tween for each button that goes to and from the 'hover' state and play()/reverse() that tween with the mouse events. Put in some logic to 'lock' the tween at complete ('active' is the same effect anyway) if it's the actual 'active' state and then you don't need to manage killing tweens and stuff like that.

// untested
links.each(function() {
  this.tween = TweenLite.to(this, 1, {className:"+=hover", paused:true});
}).click(function() {
  others.each(function() {
    this.active = false;
    this.tween.reverse();
  });
  this.active = true;
  this.tween.play();
}).hover(function() {
  if (!this.active) this.tween.play();
}, function() {
  if (!this.active) this.tween.reverse();
});
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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