Jloafs Posted October 20, 2021 Share Posted October 20, 2021 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 More sharing options...
OSUblake Posted October 20, 2021 Share Posted October 20, 2021 Hi Jloafs, It looks like your video isn't working. Link to comment Share on other sites More sharing options...
Jloafs Posted October 20, 2021 Author Share Posted October 20, 2021 Thanks for spotting that - might be related to sharing preferences in dropbox. I've edited the link - hopefully it works OK. Many thanks. Link to comment Share on other sites More sharing options...
Cassie Posted October 20, 2021 Share Posted October 20, 2021 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? 2 Link to comment Share on other sites More sharing options...
Jloafs Posted October 21, 2021 Author Share Posted October 21, 2021 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 More sharing options...
OSUblake Posted October 22, 2021 Share Posted October 22, 2021 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 22, 2021 Share Posted October 22, 2021 Yeah, 100% - Blake's right, absolutely positioned text on top. Don't think of it like a slider. Just think of it as an animation timeline and break down what each part is doing individually. 1 Link to comment Share on other sites More sharing options...
Jloafs Posted October 26, 2021 Author Share Posted October 26, 2021 Thanks guys - I've been putting this part of the site off for a while haha. I think I have an idea of how to go about it. Should be fun. thanks heaps. 1 Link to comment Share on other sites More sharing options...
Jloafs Posted October 27, 2021 Author Share Posted October 27, 2021 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 More sharing options...
Solution GreenSock Posted October 27, 2021 Solution Share Posted October 27, 2021 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 More sharing options...
Jloafs Posted October 27, 2021 Author Share Posted October 27, 2021 Yeah, apologies. I carried on and got it working. Many thanks - really helped me to get my head around how to start it all off. 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