Jump to content
Search Community

Beginner question

munky test
Moderator Tag

Go to solution Solved by Carl,

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

Hello,

 

I'm completely new to GSAP and I'm about to start a new project with an animated menu.

 

In response to either clicking on a menu item or using the mousewheel, the menu will scroll up/down - I imagine a simple tween, changing the y position will achieve this. However, I want the items to move in a sort of quadratic curve (y = ax2 + bx + c) but in the x-direction so my question, is there some kind of "enterframe" event or something similar, where I can modify the X position of the menu items as they are moving, based upon their current Y position or is there a better way to do that? Sample image attached. Thanks for any advice.

 

 

 

 

 

 

post-21966-0-88451600-1408993329_thumb.jpg

Link to comment
Share on other sites

  • Solution

Hi and Welcome to the GreenSock forums,

 

You may be a beginner but this effect would require some fairly advanced techniques.

 

To answer your question directly, yes TweenLite's ticker has a tick event that you can use.

TweenLite.ticker.addEventListener("tick", myFunction);

more info on ticker: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/

 

Likewise you could also run an onUpdate function just when a tween is running

TweenLite.to(el, 1, {y:200, onUpdate:myFunction});

In both cases myFunction could handle your change in x position.

 

However, you may also want to consider that you could create a timeline of tweens that has each element following the same curve. It would then be possible to control the timeline to move all the elements as once. Again, this would be fairly involved to set up properly so you might want to just start with what you are comfortable with.

 

Below is an example of multiple items following the same Bezier curve

http://codepen.io/GreenSock/pen/iKcrD?editors=001

Link to comment
Share on other sites

Thanks Carl, exactly what I needed.

 

Are there any advantages/disadvantages of the 2 methods that I need to be aware of? I'm assuming that the "tick" event runs even when a tween is not in progress and the "onupdate" event only runs during a tween, is that correct?

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