Jump to content
GreenSock

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

GASP slider with numeric values

Recommended Posts

Hi guys,

 

Making it my goal to learn to make a component in GASP every weekend. One thing I'm always wanted to do is make a slider that can tween values up and down, so I've made that my weekend goal!

 

I made a quick prototype in webflow before I attempt it with GASP so I can show what I'm trying to do.

 

http://slidertestingg.webflow.io/

 

So basically the movements of the slider, background image and reveal transitions are simple enough. I was wondering what's the best way to go to and from numeric values and pictures while keeping them aligned with a profile. I was imagining storing the data & pictures for each artist in variables and tweening two and fro from them while keeping the same transitions on the forward/back button.

 

I've found tons of examples such as the ones below, but yet to find any using GASP.  Could anyone point me in the direction of a codepen that uses it? I'd imagine this question has been asked before, just can't find it on the forums =/

 

Cheers,

Will

 

See the Pen JEXgpj by nathantaylor (@nathantaylor) on CodePen

 

 

Link to comment
Share on other sites

In following demo you can see demo by @OSUblake, it is really great demo and perfect starting point for you.

 

 

You can use that demo to animate those texts. Animating those slides is easiest part, you just have to figure out index of current slide and animate slides using xPercent. Or to save complexity you can slide all slides from one direction only just like those texts.

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

@Sahil - two things.

 

1. Congratulations on achieving 1,000 likes and Superhero status. You're a terrific addition to the Moderating team. Well done!

2. I'm gonna need you to slow down a bit. At this pace you're gonna catch up to me and I'm just too insecure to handle that. :D 

  • Like 2
  • Haha 2
Link to comment
Share on other sites

:D Thanks Craig. Ya I am trying spend less time on forum actually, can't decide yet if I should reduce down to an hour or take break for few weeks. But you should not take any breaks because my eyes are on leaderboard ;) next two spots are target for sure. More people might try to catch up after my next post.

  • Like 1
  • Haha 2
Link to comment
Share on other sites

1 hour ago, Sahil said:

Ya I am trying spend less time on forum actually

 

What? Aw, that spoiled my day. Come on, @Sahil, we love having you around here! Don't let @PointC intimidate you ;) He's only pretending to be insecure. 

 

This place just wouldn't be the same without @PointC@Sahil, @OSUblake, @Jonathan, @Dipscom, @Carl, @Rodrigo, @mikel, etc. And now we've got some others coming on strong as well, like @Acccent, @Visual-Q@Shaun Gorneau and more. Love it! 

 

Battle for that leader board, guys. :) 

  • Like 7
Link to comment
Share on other sites

He's not gonna reduce his forum time. He's just playing Moderator mind games to lull us into a false sense of security. ;)

 

Right now he's planning to overtake @Dipscom and then he's only gotta get through @Diaco and @Rodrigo to take me down. 

  • Like 3
  • Haha 2
Link to comment
Share on other sites

@GreenSock :D Ya but I am trying to control myself. Don't worry I hope I have made your day again.

  • Like 4
  • Haha 1
Link to comment
Share on other sites

On 26/02/2018 at 1:47 PM, Sahil said:

In following demo you can see demo by @OSUblake, it is really great demo and perfect starting point for you.

 

Once again, thank you @Sahil & @OSUblake!

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