duty47 Posted April 8, 2020 Share Posted April 8, 2020 hi, I would like to do such a slider, video link: https://www.screenmailer.com/v/Ofz2KvYmamNjEUg link to the page where it is located: https://www.open-wear.com/?v=9b7d173b068d you have to go down for half the page. However, I have a little lack of ideas on how to go about it. I am asking you for help and some tips. Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 8, 2020 Share Posted April 8, 2020 Hey duty47. Here are some steps to get you started: Make the cards, lay them out so that they don't wrap. Create an animation that move the cards to the left. Have the cards wrap perhaps using the modifiers plugin like the thread shows: Create a scaling animation for the tweens and pair that with the animation above. When a card is hover, tween the timeScale of your master timeline to 0. Happy tweening! 4 Link to comment Share on other sites More sharing options...
duty47 Posted April 9, 2020 Author Share Posted April 9, 2020 Thanks a lot for the tip. When I finish, I will provide codepen here Link to comment Share on other sites More sharing options...
duty47 Posted April 10, 2020 Author Share Posted April 10, 2020 @ZachSaucier Hi, I have a problem with y, I don't know how to calculate it in such a way that it repeats as in the animation above. I have tried several ways however nothing works this way. Do you have any idea for this? Thanks! See the Pen WNQbEON by duty47 (@duty47) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 11, 2020 Share Posted April 11, 2020 2 hours ago, duty47 said: I have a problem with y, I don't know how to calculate it in such a way that it repeats as in the animation above. I have tried several ways however nothing works this way. Do you have any idea for this? What do you mean? I see no y animation in your demo. Link to comment Share on other sites More sharing options...
duty47 Posted April 11, 2020 Author Share Posted April 11, 2020 @ZachSaucier I'm sorry I didn't notice it. I updated the demo. As you can see, the only thing I have achieved now is that the elements alternately move up and down. In the animation of the example, they move more in half circles. Link to comment Share on other sites More sharing options...
duty47 Posted April 12, 2020 Author Share Posted April 12, 2020 Hi @ZachSaucier I was able to get a similar y animation effect, but I have a problem with timeScale I haven't used it before and it's hard to find out what I'm doing wrong. I did the mouseenter and mouseleave event on the individual box and I reduce the timeScale to 0.2, but the animation jumps strongly, it looks like progress is changing, are you able to see why this is happening? Thanks! See the Pen WNQbEON by duty47 (@duty47) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2020 Share Posted April 13, 2020 Looks like you're using a very old version of GSAP - update to 3.2.6 and it seems to work fine, right? 2 Link to comment Share on other sites More sharing options...
duty47 Posted April 13, 2020 Author Share Posted April 13, 2020 @GreenSock thanks, works great. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now