darkgr33n

Zach, Absolute Genius! I didn't know you could clamp the mouse direction in that way. Tested this morning on a macbook and imac - both with magic mice - and the reports are that it works perfectly! Buttery even. Thank you so much for this. Those seven lines of code made my day - and means I'm back on track. Cheers!

I kind of fell into the project and hadn't considered much beyond what I was aware of ? I should have researched more. Lesson learnt! That is an interesting option. Not sure how many people have 'alternative' input devices, but I suspect more than I had bargained for! Dragging works quite well, and I do like the 'figuring out' option. Unfortunately the client had seen the buildinamsterdam site which works well for all input devices but i'm not skilled enough to properly decipher how they're doing it. I'd seen they were using GSAP and kind-of assumed I'd be able to do something similar. Close, but no cigar ? I'm thinking perhaps the vanilla wheel object could be the way to go but without manual transforms I'd lose a lot of the polish that GSAP allows. At least easily, anyway. I've seen a few normalising-wheel type scripts to try and cope with the differing deltas etc, but was hoping it wouldn't be necessary. Cheers!

Hey Zach I was afraid that would be the case ? I didn't know Magic Mice existed when I embarked on the project - and it was working beautifully on PC and iOS/Android. Gutted. Less than a week to go before launch - I have no option but to rebuild so I guess I'll have to use some kind of scroll jacking and have a real horizontal scroll. I'll still be able to use GSAP on the internal pages but looks like I'll have to try and find another way for the landing page! Thanks for taking the time to reply though. Cheers!

Hey Zach, Thanks for your reply. No, there is no content before or after this scrolling content. It's basically a landing page, and when you click on any of the sections within the scroller, it then goes to that specific page, so in that sense it's standalone. Hopefully that's a good thing! Cheers!

Hey, I'm getting near the end of my project but have come across an issue I'm not sure how to resolve in the below. I'm a PC user and t's working on PC and also on a Mac with a normal mouse, however during final testing a Mac user with a Magic Mouse has indicated that it doesn't work as expected. As a PC user I had no idea such magical items existed, but in essence, there is no physical wheel on a Magic Mouse and you're able to use it to scroll vertically and horizontally just by swiping the surface of the mouse. As such, they are expecting to be able to scroll the page horizontally by using their horizontal swipe - but of course as we're fake scrolling, they have to swipe vertically to move the page horizontally. The question is: is there an easy fix for this ? Obviously, with a week to go before launch, I'd like to avoid a complete rewrite given my GSAP skills are still in their infancy, but perhaps the only way is to actually use some script to take control of the mouse wheel and change the way the way it fires and have a real horizontal element. It's hard for me to test as I'm not a Mac user, but the demo below works fine for me on PC, and works if you swipe vertically on a Magic Mouse. Are there any Magic Mouse users that have found a solution to this ? https://codepen.io/GreenSock/pen/YzqjGQW Cheers!

@akapowl Wow. Incredible work. I can't thank you enough, and breaking it down the way you did has really helped in visualising what's going on. I was aware of the pin spacing but was having problems really understanding what its doing and being able to hold that in my head while making the decisions you made. Seriously, thank you! One really important thing I hadn't thought about was actually including the times of the various tweens into the equation, but it makes perfect sense. I also loved what you did and learnt quite a bit from the other 'pinning' thread too. Combined, both of these has really helped my increase my understanding. I'll make sure to fork everything. Once again, many many thanks! For mobile, I think I'm going to just wrap to a standard div and remove all the scrollTrigger action as I don't think it's necessary on a small screen. Cheers!

Hey @akapowl Thanks for the quick reply, much appreciated ;) I did have something like that initially but wasn't sure if it was the right way to go as I thought the 'speed' would vary too much depending on the monitor size, so was trying to work out what the best calculation would be. I'm on my laptop right now and not the big monitor but, to be honest, setting it to "+=1000%" does actually seem to work pretty well. Maybe I was overthinking it :/ So, when we are using scrub, the end point can be something completely arbitrary and doesn't have to be related to any element to set the perceived 'speed' ? I think I may need to revisit some of the tutorials again! Cheers!

Hi all, I've used the GS example for pinned layers to try and lay out part of a page, and it's kind-of working, but I think I'm having an issue with setting the correct height. Perhaps. If you scroll down (really slowly!) in the example, the pinned text (that comes up on black) and the second image both seem to come in a lot quicker than the first image. I think I'm missing something in setting the end point of the trigger correctly. I've tried to get the overall height of #container using the row height but I'm missing something here. I'd like so that the scroll speed feels the same (i'm going to use ASScroll to add some smooth scrolling later), but for now I just need a little help understanding where I'm going wrong. EDIT: I haven't yet done anything to cope with mobile yet so unless the pen is full screen the text panel is going to be huge! Cheers!

I know I thought the same! A bit of pure genius. It would have taken me days/weeks to work that out!

Hey Zach, that's amazing, thank you! I had added the draggable call OK but was struggling with getting my head around the proxy and updating. Will break it down during the build and make sure I understand it going forward. Again, many thanks! Cheers!

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!

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!

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

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!

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

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!

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!

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!

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!

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!

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

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

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!

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!

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