Jump to content
GreenSock

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

Find nearest label to current position (TimelineMax)

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,

 

I'm spinning a three faced pyramid object using rotateY.  I've set up a TimelineMax consisting of three tweens with labels correspoding to points where each face of the pyramid is fully in front of the user. 

 

When the pyramid is hovered on, I'd like to tween to the nearest label, such as to reveal the nearest "face" of the pyramid completely.

 

On the codePen, I'm using the "currentLabel()" method which tweens the rotation to the "previous" label successfully. However, if a tween is past it's "midpoint", I'd like to tween to the next label, which is "closer" to the current position (it will take less rotation to reach it). 

 

Maybe there is some already established / most elegant way to retrieve the "absolutely nearest label"  to current transform ? :) Hope this makes sense, thanks !

 

 

 

 

 

 

See the Pen xLrqQe by Kasparas (@Kasparas) on CodePen

Link to comment
Share on other sites

You can round the progress of the timeline to a 1/3, and then multiply that by the timeline's duration to get the time to tween to.

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

 

  • Like 5
Link to comment
Share on other sites

Thanks OSUblake! I used your approach. 

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