Jump to content
Search Community

GASP slider with numeric values

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

: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

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