Jump to content
Search Community

Multi-part slider

Jloafs test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Does anyone have any ideas on how to approach this slider concept? (See screen recorded video on dropbox)

 

Each element in the slider has an image and 2 text elements that all animate in different directions. I've only ever done a simple slider that translates a whole slide out of view as another slide comes into view.

 

Appreciate any help at all on this, however small - I literally can't even think how to start it lol.

 

Link to comment
Share on other sites

Hey Jloafs. This looks like a fun challenge! Glad to see you're a club GreenSock member too, you've got *all* the eases and fun stuff at your disposal for this.

 

Right, so let's get an approach sorted - In my opinion the best place to start here is with a pen and paper.

1) Slow the video right down, or drag through, and draw or write out the steps. I'm visual so I sometimes print out screengrabs and doodle over them. If you're more of a logical person maybe pseudo code or step by step instructions.

 

2) Get the layout nailed. You have text that's being 'masked' so you'll need the text in overflow:hidden containers. Same for the images.


3) Make an animation timeline, get the easing sorted - don't worry about interaction.

 

4) Hook up the buttons - they look to be just playing and reversing the timeline, but even if you need to skip to certain labels or points in the timeline this is all manageable with timeline methods.

 

Does that help?

 



 

  • Like 2
Link to comment
Share on other sites

Thanks Cassie

 

I think the part I'm struggling with is I'd normally have list items for a slider either stacked horizontally or vertically (depending on the direction of the slider) and hide them using overflow hidden, then scroll them into view using a transform. The big difference I guess in this case is that while the image slides in from the right as I'm use to, the text is coming from a vertical position. I guess I'm trying to figure out how my list of slides would have to stack - like how would they appear if the overflow wasn't hidden - as each slide seems to contain element that come into view but from different directions. 

 

Even as I write this I think it's difficult to explain. Does this make any sense?

Link to comment
Share on other sites

I wouldn't approach that like a typical slider. Yes, there is a slider in the background layer, but then you would have absolutely positioned text elements over the background slider that aren't children of a particular slide. It might easier if you focus on the text part first, get those animating first, and then worry about the slider background layer last.

  • Like 1
Link to comment
Share on other sites

Making some progress ( a little).

 

I'm focussing on animating the text element on the left.

 

I think I have the slide-in working OK but struggling with sliding the text out of thee bottom of the container.

 

Ideally the first text should slide in from left then out of the bottom before the next item slides in from left and so on.

 

Is there an easy way to add this to my timeline?

 

Codepen here: 

See the Pen bGrWarv by Jloafs (@Jloafs) on CodePen

 

Many thanks for any help.

Link to comment
Share on other sites

  • Solution
17 hours ago, Jloafs said:

Ideally the first text should slide in from left then out of the bottom before the next item slides in from left and so on.

 

I'm a bit lost - I'm watching your animation and it appears to do what you described. Each element comes in from the left, waits a while, then goes out the bottom, then the next comes in from the left, etc. What exactly isn't working the way you expect? Are you talking about the animations at the bottom (the ones that come in from above)? Maybe you want those to come in after the other one comes in from the left? If so, just add a delay to that timeline accordingly. 

 

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