Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sygad1

multiple tweens refactoring

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

Hi All,

 

I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant.

 

I tried creating a timeline but it didn't work at all

 

Would a timeline approach for this work, given I need the instance of the object being hovered?

See the Pen NvPQWd by sygad1 (@sygad1) on CodePen

Link to comment
Share on other sites

Hi sygad1,

 

Some typos in jsline7 - better:

 

TweenMax.staggerFrom(".fish-eye-scaling li", 0.5, {x:-200, opacity:0}, 0.2)

 

Happy fishing ...

 

Mikel

Link to comment
Share on other sites

Hi Sygad1,

 

Thanks for the demo. I don't think there is anything inherently wrong with what you're doing. It appears to work quite well. 

I don't think a timeline is a viable solution as the experience is not linear and being driven by user-interaction the menu needs to react in real-time to many unpredictable conditions. 

 

Some might argue that performance in your approach may be impacted by the fact that multiple jQuery lookups happen on mouseenter and new tweens are created that need to read values from multiple DOM elements. In your usage, I really doubt you would ever notice.

 

@OSUblake came up with a different approach to a similar problem. When the app loads he creates tweens for each element that scales them from a scale of 0 to a scale of 1. As the selected element changes he determines which elements are near by and tweens the progress of those tweens.

 

So if menu item 3 is active, element 3's tween will tween to a progress of 1. Elements 2 and 4 will tween to a progress of 0.5 and all other elements will tween to a progress of 0 (if they aren't 0 already). It produces a very smooth "fish-eye" or mac OSX dock effect.

 

In his example he uses the horizontal scroll position of a div to drive the animation. In the demo below drag the horizontal scroll bar on the text div

See the Pen BZNGyd?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

@Carl

 

Cheers for the detailed answer, very useful and helpful.

 

I'll stick with what i've got as this is not going to be a very long list.

 

Thanks

Link to comment
Share on other sites

@Mikel

 

Cheers for spotting that, sometimes you can spend too long looking at the code ;-)

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