Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by darkgr33n

  1. Thanks both! yes, really good points, and perhaps it's no big deal with regards to UX to be able to have draggable across the board. I've not really used it yet, but I can see that you can play with the minimum movement required to recognise a click from a drag, so that probably covers my main concern with that. I'll try and use the @PointC demo a I edited a couple of posts up as reference to allow me to add draggable to my original scroll-trigger powered pen, which I can see never showed up in the post for some reason. https://codepen.io/darkgr33n/pen/RwaJEvj Thanks for your help guys - i've just been given a four week deadline so better get my a** moving! Cheers!
  2. ah ok. i was hoping to turn off dragging on desktops but if it's not insignificant i may just have to go with it. Cheers!
  3. Thanks Zach; I think I see what you mean on option 2 - although are you thinking that i would use scrollTrigger for desktop, matchMedia to turn it off for touchscreens, and then some kind of device using Draggable to cope with tablet/mobile ? I must admit I don't really recall coming across many examples of horizontal scrolling that also work on ipad. As per my other thread, I did also look at @PointC horizontal scroller, which does work on iPad, but wasn't using scrollTrigger. Perhaps I'd be better off trying to get scroll trigger working in there. I'll have a go but dragging works well: https://codepen.io/darkgr33n/pen/WNwJEOL
  4. Hey all, I've had a lot of help (thanks Visual-Q!) to get to this stage, but I'm a little bit stuck again [o.O]. I thought I'd start a new thread to keep things focused. I've built a horizontal scroller, which works pretty well on desktop, but I can't get my head around what i need to do to be able to swipe horizontally in order to move the scroller on tablets/mobile. Currently, you have to swipe up/down and the scroller with move horizontally which is bad ux obviously. I've tried messing with horizontal:true but I'm not able to quite grasp what's going wrong and and i hoped someone could give me a shove in the right direction. If you're using dev-tools and set the pen to ipad size you can see the effect. https://codepen.io/darkgr33n/pen/RwaJEvj I assume because we're setting the height in the createScroller function, this screws up the mobile as when markers are true i can see them going vertically, but I just can't get my head around a solution. I have tried resetting the body.height inside the ScrollTrigger.MatchMedia calls but that fails miserably. I've looked through a ton of horizontal examples but they all seem to work the same on tablets - swipe vertically to move horizontally. for example: https://codepen.io/GreenSock/pen/jOWvgjV Any ideas ? Cheers!
  5. Still playing with ScrollTrigger, and by setting horizontal: true and changing the start and end props, I think I may be able to achieve what I'm looking for without using draggable. Setting markers: true helped me see that I should be able to sort it. I'll post something if I get there
  6. good shout I just tried that and it does actually work ... but there's no inertia or anything, so it feels a little dead - and nothing like the chrome dev-tools version of scrolling which works quite well, but on the actual tablet, as soon as you stop swiping the scroll stops dead too. I had look at the post on draggable that you indicated, and i can see that it may work well. I can't quite work out the "bounds" setting yet. If i set no bounds at all, it does work but, of course, with no bounds i can drag in any direction whatsoever, so not quite what i want, but any other setting seems to restrict me to only being able to scroll to the right which just moves the container off screen, but I think it could work .... with a little more persuasion! The only thing is I don't want draggable active on desktop sized screens, only on touchscreens and i couldn't see a matchmedia in the docs similar to the one scroll trigger has, but I need to read more and experiment a bit before I even know if that's just me being stupid or not. I love the feel of draggable, it really is spot on -- i just need to reign it in a bit. Cheers!
  7. Thanks for the link. I had read a few posts on implementing draggable, but I wasn't sure if I needed to, as it does scroll horizontally without it, its just you have to drag vertically in order to move horizontally on a tablet. I guess I don't really yet understand exactly how scroll trigger is doing what its doing. will keep reading! Cheers!
  8. Yes, thank you, really appreciate your help getting me going. It seems to work pretty good so far with what I have at the moment! I have today started looking at getting it to work on touchscreens - tablet/mobile. Using MatchMedia I can turn off the scroll trigger on mobile - and alongside a css change - can make it so the you swipe vertically on a mobile as you would in a normal long page, but I can't yet get my head around what I need to allow you to swipe horizontally on the iPad. I'm guessing I need to add draggable maybe ? or should I be killing something ... o.O At the moment I have it so that iPad does work but you have to swipe vertically on the iPad to get the scroller to move horizontally. Perhaps there's a setting I'm missing ? I can post a pen, but my iPad is too old for codePen so have been messing locally - i just thought someone may recognise the signs and know a simple answer! Cheers!
  9. Thanks Zach, that's reassuring to hear! Thanks V-Q The idea of stop positions was really helpful and thanks for forking the pen to show. Also adding an id to the scroll trigger i can see is helpful and didn't know you could do that. I had a play with your updated pen but it seemed to lose the prev position on occasion. for example, when cycling right to the end and then clicking back, but it gave me a kick in the right direction . I tried a few different methods, but I ended up with a function that finds the closest two stop positions to the current scroll position and then works out which one is closer and uses that as the basis for buttons. it seems to work better visually that way - so if you've scrolled over halfway past a section, it will move three sections from the right x of that section; if you've scrolled under halfway, it uses the left x. https://codepen.io/darkgr33n/pen/rNevPqG I think it seems to work OK but I'd still be interested to find out what that equation was EDIT: ... actually, I've just realised I also need to reset the stop positions in the event of a resize. Added a quick function to do this but I might have been able to do it a bit better. Onto trying to get it to work on mobile/tablet next. The fun never stops! Cheers!
  10. Well, I'm not sure where that week went! I've been fighting with scrollTo, trying to get my page acting in an expected fashion, and I'm kind-of there - I think. It needs a little more finesse around the final positioning of the sections - so the three sections shown are always centred - but compared to where i have been this week, it's a step forward at least. I've been out of the coding game for a while and it's taking more time than i had originally hoped 😕 BUT, I'm still not sure about rocking two timelines and then hacking them so they (almost) keep up with each other, so the question is: is it valid to have two timelines controlling one container -- or is there a more efficient way of controlling it ? Here's an updated codepen using scrollTrigger expanded from my original posts: https://codepen.io/darkgr33n/pen/poyVwLK As part of the journey, I've tried to look at other possible methods of achieving what I'm looking for. I spent a fair bit of time with something based on @PointC's very helpful Fullscreen sliders horizontal and vertical. It only had one timeline, so I adapted it to the three-section design. I like that it uses the wheel event as I find it easier to visualise whats going on, however I'm not experienced enough to be able to code it so that, when the wheel is used, it moves smoothly across the width of the container -- rather than snapping one section at a time. It also has draggable which is nice and smooth and also works on touch devices, which the scrollTrigger one above doesn't yet do. I need to read about MatchMedia. But anyway, here's a codepen using 'wheel' with buttons and drag: https://codepen.io/darkgr33n/pen/WNwJEOL Before I embark on trying to work out how to get my scrollTrigger version working on mobile/tablet, I just wanted to make sure that I'm not barking up the completely wrong tree!? For a bit more context, in case there's a whole other way, I'm trying to emulate the quite fantastic buildinamsterdam.com, albeit rather crudely. Cheers!
  11. I assume by indicators you mean the markers; to show the markers, just add "markers: true" to the scrollTrigger object. I only started learning in the last few days so can't help with the fade though o.O
  12. Just given the ScollToPlugin a go, and it seems to work pretty well I'll need to work on the actual math a little to get it spot-on, but it certainly gets me a lot closer! I may actually have a look at #2 ScrollTrigger scroll() as well as that sounds like it could be a little easier to be precise, but thanks for your help, it's given me the push I needed I think. Here's an updated pen: https://codepen.io/darkgr33n/pen/zYqpMoY Actually, it seems touch isn't working on iPad and i'm unable to swipe. Will have to look at that as well. * EDIT: swiping does work, i have to swipe vertically in order to scroll horizontally on the iPad so I definitely need to fix that! Cheers
  13. Ah yes, of course - I hadn't taken into account the actual document scroll position. A fundamental error - just a different one than the one I thought I'd made, lol. Thanks for the pointer - and the links. I'll do some reading and re-think my approach a little, Cheers!
  14. Hi, This is my first GSAP project - a horizontal content page with scrolling and next/prev navigation. The idea is to have a variable width container holding a number of sections (each section @ 33%.3 vw) that can be scrolled with either the scroll wheel or on click. Movement via the scroll wheel is free, whereas the buttons should advance (or retreat) three sections at a time (screen width) except if the width is not divisible by three, then it would just move by the remaining amount. Using the various posts on the forum, I thought I was progressing reasonably well, and I've managed to get both navigation options working, however I've just realised that during the various battles I've been fighting, I made a fundamental error. I've ended up creating two separate timelines for one scroller 😕 And, of course, they don't play nicely together. If you advance using the buttons and then switch to the scroll wheel - or vice versa - as they are obviously not aligned. I think I need a way of allowing the button clicks to know what the current position of the scroller is. Or I might have gone down the wrong track completely!! Could anyone steer me in the right direction please ? Thanks!
  15. darkgr33n


    Hi Priyank, I'm just starting out with GSAP and I was interested in this effect as well. From reading a few different posts, i think this effect is actually WebGL. Codrops has some good examples, but one in particular looks very similar. If you mess with the width and X/Y scales, you can see it here: https://tympanus.net/Development/webGLImageTransitions/index.html
  16. no problem - i've got a fair bit of work to do before I get to that stage anyhow! Cheers!
  17. Hey Zach, Many thanks for your quick reply and confirmation! Yes, that makes perfect sense. I thought that was the case after reading through the docs, but just wanted to make sure. I'd not used GSAP until about two weeks ago and have been playing about in CodePen and, really, it's a must-have for me. I had tried to mess with css transitions before but found them rather laborious, but GSAP puts the fun back into the dev I'm sure I will be asking some coding questions in the next few weeks as I try to get my head round everything. I'm going to be using it alongside barba.js, and I seem to remember reading on one of the posts that you were doing a demo of this as part of the learning section. Is that still on the cards ? Many thanks again!
  18. Hi, Could I just clarify which particular licence I require please. I have read through a few posts regarding licencing, and I think I've got it, but just wanted to double-check before I purchase. I'm a web developer. I have a client who wants a website and I'm planning on using GSAP for, well, you know what its for! Access to this new website that will use GSAP will be via a member-only area, however there is no charge or fee for being a member - it's just a way of the client verifying their membership. I do need some of the bonus plugins, Split Text etc, so I think Shockingly Green is the correct licence here, as there's no fee being charged for anything. Once I've finished this project, I am hoping to create a website for a totally different client. There will be no member area or charge for accessing this site (its a record label). So, the question is: if I personally maintain the yearly payment for the licence, am I covered for both of the above sites (and hopefully more in the future), or do I need the Business Green licence straight away ? Actually, assuming that Shockingly Green is correct to build and deploy the first website, could I then upgrade to Business Green if I need to, in order to add additional clients (providing they're not charging for access to the area that uses GSAP) ? I hope that makes sense! Thanks