lewisSME

Drag/swipe navigation with timeline and Angular

Recommended Posts

Hi,

 

I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good.

 

However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load.

 

Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again.

 

Any help greatly appreciated!

 

NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.

Share this post


Link to post
Share on other sites

I don't really understand what you mean by "the progress of the sprite".

Unfortunately, I don't know Angular and with 200+ lines of JS in your demo it makes it very difficult to even begin to figure out what needs to be done.

 

It would really help if you could reduce your demo to just the functionality you have an issue with it. 

 

The good news is you can control the progress() of any animation. We typically use jQueryUI Sliders or HTML5 input controls to to scrub through animations.

 

http://codepen.io/GreenSock/pen/jEEoyw

 

If you can track the coordinates of what you are swiping you should be able to convert that to a progress().

  • Like 2

Share this post


Link to post
Share on other sites

Hi Carl, thanks for your feedback it's been really helpful. I've tidied up the code a little, and commented the relevant parts.

 

I've included a jQuery UI slider and got it working so that it controls the timeline (thanks for that!). The only remaining issue is that I want to use the draggable area (the big colourful section with the sprite image) as the draggable controller. So instead of sliding the slider handle to control the timeline, I want users to be able to slide the entire coloured section to control the timeline, if that makes sense?

 

A similar example of the desired functionality can be seen here: http://beta.rallyinteractive.com/

 

Thanks again for your help!!

Share this post


Link to post
Share on other sites

That looks like just what I need! Will give it a go, cheers!

Share this post


Link to post
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.