Jump to content
Search Community

Control an animation without Slider!

Alpenist 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 All,
I'm trying to control a simple move to x using TimelineMax (GSAP) animation with swipe (touch events) using TouchSwipe , what I need to do is to control the animation progress to respond to the swipe. TouchSwipe can set maxTimeThreshold and threshold to fixed values. but I'm not able to figure out how to set these to work together with GSAP.
Maybe a better explain to what I want to do is something similar to the first demo on http://www.greensock.com/gsap-js/ but instead of using ui slider to control the playback I want to use the object swipe values (distance and duration) to move the object to x.
Hope it makes sense to anyone can walk me through this.
thanks in advance

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. I'm not entirely clear on what you are trying to accomplish but perhaps the following will help. You can tween the progress() of TimelineMax directly.

var tl = new TimlineMax();tl.to(someElement, 2, {left:200})//add more tweens to timeline
Once you calculate the duration and the progress value of where the tween should end do this:
TweenLite.to(tl, duration, {progress:SomeValue});
Here is an example of a Timeline's progress() being adjusted via mouse scrolling:

See the Pen mbrqt by adrianparr (@adrianparr) on CodePen

And here is an example of the progress() being adjusted via a tween:

See the Pen aBGDw by GreenSock (@GreenSock) on CodePen

Hopefully this gives you an idea of how the progress() of a timeline can be manipulated without a slider component.
Link to comment
Share on other sites

Hi Carl,
Thanks for the welcome and your time.
I think the first example

Timeline's progress() being adjusted via mouse scrolling


is close enough to what I'm trying to accomplish. but I'm afraid the codePen link for the example is incorrect I would really appreciate if I could look at the example code ..
meantime I will prepare a codePen example myself and post it here in case someone else needs a pointer for something similar.

 

Update: I noticed a space at the end of the link for your first example, after removing it I was able to see your example. it's awesome thanks this is exactly what I was looking for 

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