Jump to content
Search Community

Swipe Comic pages start/stop animation if slide/page is visible

Odisej 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,

 

I'm not exactly a coder but would like to use greensock for interactive comic book animation. There was already one question here about comics, but that was about controling the timeline in scrolling. I would like to use divs for slides/pages and you should swipe horizontaly from one to the next. I would like to control the animation within each div when that div/slide/page is visible and stop the animation when you swipe to other page. There should be restart of animation every time you revisit the page. Can I use draggable for swipe animation between slides?

 

Would love to see some easy example of this...

 

Thanks!

Link to comment
Share on other sites

Hi and welcome to the forums.

 

There are a lot needs in your project and GSAP can come up with all of them.

 

Yes Draggable is precisely what you need, the complete gesture control and events callback it has makes it perfect for this. Although you should also might want to consider using Throwprops plugin to get a nice drag and flick type of swipe. In the following link you can see both tools in action and in the third sample (scroll) you can see the difference between Draggable alone and with throwprops:

 

http://www.greensock.com/draggable/

 

Also you might want to check this codepen, it is a briefcase lock simulation so is not the same thing you're after, but imagine it working horizontally and with full size slides:

 

See the Pen 5366f11be0238e46a98cdaf74ae6d882 by rhernando (@rhernando) on CodePen

 

I'll see if I can come up with some simple demo for horizontal slides.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

Thank you for your reply.

I've managed to learn a lot of greensock animation just by following examples. That's why I would like to use these tools more then say motion artis etc. Even if I have to pay full greensock membership:)

As I said I'm not a coder as such and probably that's why I'm really stuck here. Using draggable for instance: when the active/visible slide is swiped to the left I would like to tween it to the left of stage (minus left position) and tween next slide to the visible stage from the right position at the same time. And I would like that/now active page to snap in the zero position, so that the whole page is displayed no matter how hard or soft you scroll/swipe the previous one. But i don't see end x position for the dragging object, there is just bound window or container in the example...

Once the slide/page is visible the specific tween animation for this page should start. I hope that all makes sense.

Yes, a basic two, three page example would do wonders for this:)

Thank you.

Link to comment
Share on other sites

Hi,

 

Sorry for the long wait you caught me in a terrible week, of course it has nothing to do with you.

 

Thanks yo Jamie's help in this forum post, there was a considerable advance to advance one page/slide at a time(I figured that it was an undesired behaviour to jump to further pages without following a logical one page sequence), but I haven't finished the second behaviour you're after, that is start the slide/comic-page animation once the drag/swipe ends.

 

So far I have this:

See the Pen pzIgJ by rhernando (@rhernando) on CodePen

 

I didn't posted a reply because is not the complete work. What's missing is only cosmetic stuff so it should be a completed work between today and tomorrow, but not longer than that.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Looks great already. The one thing i've noticed is, that it doesn't change a page if you swipe before the previous tween/throw/dragg is finished. Maybe just a little faster easeOut would be enough. Other than that - it's awesome and very responsive on iPad also.

Link to comment
Share on other sites

Hi

 

Since you said it was a comic book, I thought that following the storyline is important, that's why the idea is go one page at a time. Also as you said that you want the animations start once the swipe/drag has ended the user won't be able to drag until those animations are over.

 

Although all those behaviors can be changed with some simple code.

 

Best

Rodrigo

Link to comment
Share on other sites

No, no you're absolutly right. It should be this way. I was just thinking that maybe if you would want to swipe fast to a certain page where you left off or smth. But it's not a big deal. It should definitely move one page at the time and trigger the animation on the displayed page. Thank you!

Link to comment
Share on other sites

Mhh perhaps make the feature to wait for the page's tweens to be over a one time thing, so when the user has seen the entire comic there's no need to load all the tweens again.

 

Also add some kind of quick navigation menu to jump to a specific page, also once that page has been seen.

 

Good news is that it can ne done with GSAP, bad news is that it'll take a few more time.

 

Best

Rodrigo

Link to comment
Share on other sites

Well, i'm not sure one time animation is a solution. I was thinking of onSwipe event. When you swipe to next page you stop the tweening on current page and swipe to the next or previous it depends on left or right swipe. That way you still move only one page, but don't have to wait for the animation to be over.

Link to comment
Share on other sites

Rodrigo, I hate to bother you again, but I could really use some kind of solution already. You were very close with your previous example. We just need to establish the active/displayed page and trigger the tweens on that page.

Link to comment
Share on other sites

Hi,

 

Sorry for the delay but last week's nightmare is still doing some damage to my schedule.

 

The codepen is updated:

See the Pen pzIgJ by rhernando (@rhernando) on CodePen

 

Beware that the codepen is working with the latest preview of the 1.11.0 version of the engine. You can download it here:

http://forums.greensock.com/topic/8339-draggable-on-windows-8-touch/#entry32419

 

Basically the idea is to wait for the slide's content animations to end before going to the next one, like that the user can follow the entire storyline.

 

If more doubts arise please post them, I can assure you that it wont take as long a this.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thank you Rodrigo. This is absolutlely awesome. Two things maybe, it's ok that when you go back the whole page is displayed without the animation, when you go back right however I'd like the animation to start over. Also, can you describe how you did the div / pages animation since i can't find them at codepen? I mean are there any if statetments etc, or is just strait to timeline?

 

Thank you again.

Link to comment
Share on other sites

Yeah I posted the full view in order so the codepen will fit in a screen. In the bottom-left corner there's a link that reads: "Edit this Pen" that'll take you to the code which is quite simple actually.

 

Anyway here's the link to the editor:

See the Pen pzIgJ by rhernando (@rhernando) on CodePen

 

As for the slides animations going back to their initial state it'd be as simple as put a call to a function in the onThrowComplete callback to set all the timelines to time zero, this could be done with a loop and using the progress, seek, pause or time methods. I'll check into that.

 

Best,

Rodrigo.

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