Jump to content
GreenSock

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

Tween to and from progress of a timeline upon click and scroll function

Go to solution Solved by GreenSock,

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

Hello all,

 

I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock.

 

I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/

 

As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress.

 

 

 

ideally I would Like this to tween to the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function.

 

The box2Timeline also should not animate the full way through as it currently does but function like waaark

 

once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked.

 

Any help would be greatly appreciated.

 

Kind regards,

 

Ryan 

See the Pen rWLNLN by Ryan84 (@Ryan84) on CodePen

Link to comment
Share on other sites

if Anyone could point me in the right direction i'd be so grateful,

 

Kind regards,

 

Ryan 

Link to comment
Share on other sites

  • Solution

Is this more like what you want?:

http://codepen.io/anon/pen/woWeXR?editors=0010

 

Keep in mind that tweenTo() accepts either a number (in seconds, as the time you want to tween the playhead to), or a string (label where the playhead should animate to). It looks like you were trying to feed in a progress value (which is always between 0 and 1). So I just multiplied that value you had by the duration to get the correct number. 

 

I also used tweenTo() to initially just make the timeline animate to that first dot. Is that what you wanted? 

  • Like 2
Link to comment
Share on other sites

Really appreciate your feedback Jack. this is fantastic thank you ever so much for taking a look. 

  • Like 1
Link to comment
Share on other sites

No problem. Happy to help. Good luck with your project. 

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