ilike.idontlike

You english too? I find toast and teas to be *the* thing to get me through figuring out anything JS hahaha. Thankyou so much @Cassie I'll look into this!

@GreenSock. Thanks for taking the time on this. I love that it scrolls smooth from left to right but I'm trying to get it to do that when the user scrolls up and down. Sort of like a combination of yours and Cassie's code if that makes sense?

So Ive used this solution already but It doesn't work with the snapping that I'm after where the image would snap to the center of the viewport. I was hoping to find a solution in native smooth scroll sine Locomotive scroll library doesnt work with snapping for some reason.

hey @Cassie. I'm not planning on having set width containers. Its so I can do horizontal scrolling on an entire page of images, which will all have variable widths (height defined though). https://codepen.io/jo02/pen/dyWQzaM Here's my pen where I restyled for horizontal and switched out height for width and y for x.

Hey @GreenSock sorry for the delay, I;ve been a bit unwell lately. This is great thankyou. I've been trying to get the smoothScroll to work horiziontally by switching all the height's to widths and y's to x's but no dice. Is there something I'm missing here?

hey @GreenSock, this solution looks fantastic as I really would like to not have to use another scroll library and stick with just GSAP, but in all honesty it's a bit over my head. I am trying to update this snapping function so that it would snap the '.box' to the centre of the "viewport" but I can't get it to work right, I've read the documentation on utils.snap() and still not much help there for me either. Can you please point me in the right direction?

Hahaha! I thought you'd say that. Yeah I tried your earlier suggestion with my horizontal locamotive scroll and it didn't work. I don't know why though, guess there must be a conflict like you say! I wonder if maybe it would work using scrolltrigger to horizontally scroll the whole container combined with your method snapping the sections? Alternatively I've been trying to hack together a way of using the scrollTo plug in to scroll the it to the center when it lands on one but I don't know if Locomotive scroll plays nice with this either. I'll let you know how I go

I actually just hacked around from google for that fix. and don't apologise please! I appreciate your help all the same! Thankyou so much! Last bit thought is I really would like to get these snapping to the center of the viewport (after a delay, similar to the demo). I can't use the typical way because like I said earlier is they will all be variable widths (being images nd whatnot). I've tried a few different methods but nothing seems to work (like at all hahaha). Any suggestions?

I got it to work!! I did this to the start and end positions so they would update from the center with the viewport height; start: () => 'left center+=' + window.innerHeight*0.4, end: () => 'right center-=' + window.innerHeight*0.4, This meant the trigger worked at all resizes of the browser now just to figure out why when i scroll all the way to the end. The horitzontal scrolling breaks ?

Hey @akapowl Thanks so much for getting back to me. the tip on the easing solved a massive headache I could not figure out before (i just expected default to be linear!). Im still seeing the same issue though on smaller sizes where the background isn't centre with the imger? I have no idea why though and im scratching my head over it. The only thing I can think is that the scroller-end and scroller-start positions are throwing it off somehow? I've attached a screen grab so you can see what I'm getting at my end. (the first .imger should have a blue background and the second should have a yellow when the .imger boxes are in the middle of the viewport)

Hey everyone! I'm having some issues with getting my horizontal scrolling to time up right and have been scratching my head on this for a while now. As you can see Im using Locomotive scroll to create the horizontal scroll on mousewheel down and have scroll trigger timed up to my sections that wrap where my images would go (called .imger) and a background colour. What I would like to achieve is that the center of the background colour matches the center of the .imger when they are in the middle of the viewport. This works on certain screen sizes but since the imger is defined by the Vh the effect goes completely out of line at small or large screen sizes. I don't want to sync the animation of my .bg layer to Vh as the images will be different dimensions (some landscape and some portrait etc.) is there any other way of doing this? Thankyou so much in advanced! Click 'edit on codepen' to see the pen - I have no idea why it breaks when embeded? perhaps someone can also help with this?

Thankyou for your response @akapowl. So I had a go at integrating the css tricks mousehweel plug-in with scroll trigger and it doesn't work. The two just dont play together it would seem (either that or my js isn't as far reaching as you might think haha ). I would prefer to use scroll tigger to do the whole lot I reckon as it seems to under complicate what I'm trying to achieve. Is there a way of getting the images to snap in the center by using client bounding rather than their offset? It seems like calculating the offset for each image (where I won't know the width of each, only the height as the aspect ratio's will change in random order), is a bit over my head and not something i can achieve with my limited knowledge

Thanks @akapowl for some pointers there. I actually would prefer to use 'real' horizontal scrolling but would need to still use some scroll trigger animations - is there a way to do this so that I can still implement scroll based animations? (btw when i refer to horizontal scrolling I am talking about mousewheel being used up & down not left & right). I'm guessing what im currently doing is not possible with lazy loaded images am i right?

Hi @mikel I have another codepen for the horizontal scroll. I'm having some difficulty with this one too. https://codepen.io/jo02/pen/wvomdVr Essentially, i have a row of images, they won't all be the same width so the horizontal scroll needs without a fixed width in the container (unlike the demo example). I took this code from another user on this forum and found that the section actually cuts off at the end, and also snap doesn't work with it either. Ideally I'd like to combine this scroll trigger with the one you've been so helpful with so far and also have snap enabled so that the image wrapper (full-wrap in my example) would land in the centre of the screen when the user stops scrolling. Is this possible?

Sorry for the spam, but also Ive noticed that the tween breaks if the user scrolls too fast, is there anyway of ensuring it isn't triggered unless the user stops scrolling?

I'm also trying to set this up with horizontal scrolling sections (again, using scroll trigger), is it possible to combine the two actions into one scroll trigger or better to have two seperate triggers do you think?

LEGEND!! Thankyou so much!!

Hi There, I'm loving Scroll trigger and find it super easy to use and have found some really amazing tricks throughout this forum I love about it. But Im having difficulty replicating this effect I've done with Intersection Observer using Scroll trigger. It's quite simple but basically each section has its own dynamic color value and as the user scrolls the value styles the fixed background div in that color. I have a site that has lots of these sections and the color values are dynamic so I can't just write the values in each scroll trigger. Is there a way to rewrite this without Intersection observer and instead use Scroll trigger? Many thanks for your help

Hey ZachSaucier! Thanks man but tbh there are parts of this layout in the article I don't understand which has so far made combining these files kind of....well I'm struggling to say the least hahaha. I honestly just want to know how to replicate the animation part of it that uses GSAP to target any div I would like on the page. so far reading this code has made it very hard for me to actually find out how to do that.

Hey Greenock! So I hope it doesn't come across like I'm asking anyone to specifically DO anything for me, just help point me in the right direction as to what this particular code is doing. In terms of working within web flow, its not hard to insert your own code by any means, it just can be sometimes a bit more limiting as your working within webflow's own CMS rather than your own <img> tags for example (if you were custom coding your own site from scratch). also to reference your own .js file is quite tricky so most (including me) tend to write in their own js on the page within a <script> tag. Also I haven't crated a codepen because I don't know how to with this code that's in the codrops tutorial (hence my post here I guess). In this article they use a layout in the (multiple) js file(s) that I genuinely don't understand so it kind of obscures how I can read the code to understand the animation part of it (which I'm sure is actually not that tricky, because so far GSAP has made animations very very simple for me to execute (thank you GSAP!!)). To re-iterate, I want to create a GSAP animation that alternates in direction depending on the movement of the cursor on a specific axis. In this article the cursor movement on the x-axis rotates the image (that is attached to the cursor) to either the left or right depending on if the mouse is moving left or right. I just want to replicate this part is all, but have no idea where to start in terms of making a tween that alternates direction in relation to the cursor movement. If you or anyone is able to point me in the right direction to learn this I would really appreciate it Hope that makes sense and clears up my question, sorry about the post so far.

Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much