Jump to content
GreenSock

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

Red Progress Slider

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 recreate a feature of

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

.

 

However, my timeline is configured differently, so I'm having difficulty translating the js over. Basically, I want my slider to change from white to red as the timeline slider progresses. Here's my current setup: https://jsfiddle.net/rymatt94/w9tf2bzw/40/

 

Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP!

 

Thanks in advance.

Link to comment
Share on other sites

It appears you are using a jQueryUI slider. The benefit of using such a tool is that you don't really have to do much programming to get it to work. 

The downside is that if you want to customize it beyond what it was designed to do... it can get really messy.

 

To configure your slider to have a red bar grow as it moves to the right you would have to use javascript to inject a red div into the slider and then tween it's width (or scaleX). Unfortunately, jQueryUI customizations are a bit beyond what we can support here in the forums.

 

Someone around here might have a simpler slider that can be customized and configured to be be Draggable and control an animation.

Unfortunately, I can't build out a component like that for your from scratch at the moment.

 

We offer GSDevTools for controlling animations: https://greensock.com/gsdevtools 

 

 

 

  • Like 3
Link to comment
Share on other sites

Ah I see. And there's no easy way to swap out my jQueryUI slider with a jQuery one? Like I said in my OP, I'm trying to replicate 

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

.

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