jimmy-a

Hi there! I'm trying to make this horizontal section to "stick" or "snap" the next or prev slide based on the scroll wheel event, but i'm unable to do so. The main goal is, no matter how long the scroll event lasts, it should simple move/scroll to the next or prev slide. Am taking the wrong approach for that (using scrollTrigger and end())? https://codepen.io/jimmyadaro/pen/jOWaZZV I've tried copying this Codepen since it achieves what i'm looking for, but had no success with that. https://codepen.io/mikeK/pen/eoyrWK?editors=0010

I understand, but try to create a Minimal, Reproducible Example. It would be easier for us to help you.

Hi there. Could you please share a Codepen with a simple example/demo of what you have done so far?

Hi there! Sorry for my delayed response, just delivered some projects I replicated the HTML and CSS structure from the iPhone's website. With GSAP I used scrub and a simple from + scrollTrigger. Here's an example in case this is eventually useful to someone. https://codepen.io/jimmyadaro/pen/JjGLRoq

Hi there! That worked like a charm. Had to change a little bit the HTML & CSS, but it's working. https://codepen.io/jimmyadaro/pen/KKVvrBY

Hi! I'm trying to replace the "pinned" images effect when scroll (like, those images "going up"), to a "fade in" effect in the images. So, if you scroll from the page top, the next image should appear with fadeIn, and so on with the other images, until the "scroll zone" (.main-wrapper in the Codepen) ends and then comes the "normal" scroll over the other content. I cannot find the way to do it, so I'll share a previous Codepen.

For some reason I do have some issues with that approach: 1) The elements that are not inside the .side-scrolling-wrapper element seem to not being affected by this new start() value. 2) Idk why or how, but it doesn't work on my real project, which is 99% similar to the Codepen's code (I use different class names but still the same structure). I'll try to debug this from my side but any idea about why this may happen would be great.

Hi Zach! 1) Now using GSAP's animations seems like it doesn't do that anymore, which is great 2) I don't get it, how do I "add their horizontal offset to the start value"? I'll check the intersection observer API tho. 3) Awesome, I tried something like that after publishing this post, but your coding is even better, thanks!

Hello! After the previous issue with the "scroll size" –thanks Zach for assisting me with that!– now I'm dealing with other issue (3 issues, actually). 1) I'm trying to make different elements appear on "fadeInUp" when they're in the viewport, or add that class if the scroll position is >= to the items position, so those items should be already visible if the user scrolls up –e.g. the user has entered the website following a link with a hash/anchor link in it and it takes them to scroll position "Y" instead of "0"–, avoiding play the transition/animation again. 2 ) Same goes for scrolling the horizontal scrolling; the elements inside each horizontal slide are "showing up" without applying the transition/animation. 3) In the same Codepen, if the element is visible (already has the "fadeInUp" class), and you switch the browser tab to another one (like Google or whatever) and then go back to the Codepen, it plays the same transition/animation again (only on the items inside the "horizontal section"), which I don't want to. This happens even checking if the element hasClass and adding that class only if the element doesn't have that class already. Again, I'm not sure if this is the right approach for this, so any improvement is very welcomed.

Awesome! Didn't think about that. I divide it by 8 in my real project and works like a charm. Thanks again ?

Hello Chris! I'm not a pro using GSAP, your general idea sounds like one that would use the scrollTrigger plugin, but maybe you may resolve that using the CSS property position: sticky – Have you read about that one? It'd be great if you could provide a visual example (e.g. image explaining what should happen in this homepage of yours), maybe even a reference link. A Codepen demo would be awesome.

Hello there! I'm trying to create an horizontal scrollable section inside this mainly-vertical scroll site, which works fine so far, but now I need help to make the slides move easier when scrolling. What I mean is, right now you need to scroll almost the full width size of the current slide in order to go to next or prev slide, but I want to make the slides go/move/snap forth and back with less scrolling time, using either a mouse or a trackpad. I tried different snap values without the desired result. I don't know for sure if the approach made in my Codepen is the right one, it's the same as in this official example: https://codepen.io/GreenSock/pen/YzygYvM Thanks again for this support space

Hi @mikel! I know clip-path, how may I use it along GSAP?

Hi there! I want to create an effect like this, which sources should I search for? I'd like to make the effect in both text and images.

Hello Mikel! Thanks for your response! Really useful. I didn't know about autoAlpha, I've seen that being used on TweenMax, didn't know if was compatible with GSAP's core. Thanks again, have a great day