Jump to content
GreenSock

vlvgfx

Connecting a 360 slider to HTML input range

Recommended Posts

hello!

 

Just getting starting with JS and GSAP, had a question about what I'm trying to achieve:

 

There's a GSAP 360 slider of a image sprite created here: 

if you swipe / mouse drag you cursor over the sprite, it animates through the sprite creating the 360 view.

 

I wanted to add a input slider such that the input slider could also be dragged / swiped on as an additional way of advancing through the sprite sequence. 

 

The final sequence i'm trying to get to work with the swiping  + input slider is something like this :

https://codyhouse.co/demo/360-degrees-product-viewer/index.html

 

Any way to append a HTML slider to that GSAP 360 mentioned earlier?

 

Sorry about the noob question, any inputs would be super helpful!

 

Thanks!

 

See the Pen IeLGB by jamiejefferson (@jamiejefferson) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

You can create a tween that changes the backgroundPosition with a SteppedEase and configure your slider component to generate a value between 0 and 1 that you can send to the progress() of the tween like:

 

http://codepen.io/GreenSock/pen/dNjYeM?editors=1010

  • Like 2
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.
×