Jump to content
Search Community

Path animation and Device Events

retropunk 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

Hi everyone. 

 

I am looking to use the Device Events (DeviceOrientation or DeviceMotion) to move and object along a predetermined path with GSAP.

Right now I have 2 demos. 

Demo1: Animate to path

See the Pen VEzMbg by SnapToPixels (@SnapToPixels) on CodePen

Demo2: Device Orientation that uses TweenMax += on the Y axis. **iOS only for now, Android later

http://retropunk.com/play/sensors/drag.html

 

I want to combine these 2 ideas.

So that when I tilt the phone and hold between specific values (Demo2) the animation will start/stop along the predetermined path (Demo1).

Right now my Demo2 only pushes along the Y with +=* depending on the position. It's hard coded for now until I find a more dynamic solve.

 

I know how to make a Timeline tween with GSAP but is it possible to increment through the timeline?

I saw the GSAP article on Function-based values, but I'm hitting a wall at the moment. 

I'm counting on some fresh code eyes to help me out.

 

Hope that makes sense.

Thanks everyone!

 

 

Link to comment
Share on other sites

4 hours ago, retropunk said:

is it possible to increment through the timeline

 

Hm, I don't quite understand what you mean by that. 

 

Are you wanting to have a pre-determined animation that kicks off as soon as the user tilts beyond a certain threshold, and make it relative to that start position (I noticed you made it draggable)? Or are you maybe trying to link the tilt to the timeScale() of the timeline so that it speeds up more when you tilt more? And do you want it to go backwards too? Sorry, I just don't quite understand what your goal is here. 

  • Like 1
Link to comment
Share on other sites

yeah the draggable was just for fun. Probably confused it. :)

 

You basically summed it up with the 2 statements. 

A pre-determined animation that kicks off as soon as the user tilts beyond a certain threshold, and make it relative to that start position.

Linking the speed of the animation to the value of the tilt would be ideal.

Going backwards wouldn't be necessary.
....

I forgot about timeScale!  DOH!

I think I understand now that I could use the tilt value to control the timeScale. I need to create a sample using that.

 

On mobile devices the DeviceEvents are constantly firing so starting/pausing/resuming the animation seems tricky. It's not just a simple animation start.

Maybe I need a boolean to check if the animation state?

 

I probably need sleep. :)
...

ok, so I got it working closer to what I want. The code for the timeScale is not pretty. Ideally it would be tied in to the deviceOrientation beta value so it's more granular.

http://retropunk.com/play/sensors/tween.html

My SVG path is wacky too, but for now this hack shows my idea.

 

Time for sleep!

 

Thanks guys

 

 

 

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