prjbios

Oh wow, this might be it! it works just as i was hoping. and how you're achieving this is an entirely different path than i was looking at. thank you so much! im going to test it shortly. i have another question. i've looked it up a bunch and it doesnt appear to have an "easy" solve. if i wanted to remove pin spacing an just have that horizontal scroller lock in the center of the screen vs doesnt full screen. is there an easy solve for that? the white padding that appears around some of my elements (such as the scroller) is really a bit frustrating.

i also found this example that i also cant seem to get to properly lock my horizontal scroll. but you can see how it nicely moves from slide to slide (aside from the scrolling up and down problem) https://codepen.io/projectbios/pen/JjOzyEj

Hi Cassie, thank you so much for responding. i think what needs to happen it's basically putting each slide in a scrolltrigger and giving it a pin (stays on screen for a second before releasing to the next slide) effect. right now the continuous scroll of the horizontal slider doesnt feel very good. and snapping doesnt either. But i found a post buried here, that i can no longer find that had a solution that was exactly what i needed. and it's the below code. my only problem is i couldnt figure out how to integrate into my page flow like you see in my codepen. because the below code acts as if the horizontal slider is the only main element on the page. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. ScrollTrigger.create({ start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });

is anyone able to assist with this?

Hi Obaidnadeem, here is the codepen https://codepen.io/projectbios/pen/ExbMXxo . thank you for your time.

does anyone have a couple of paid hours to spare to do a zoom call and trouble shoot a couple of things? i made a post here regarding one of the issues.

Good afternoon, i have a very long page that utilizes scrolltriggers in several modules. one of the modules on my pages has a horizontal scroll with a few slides and within each slide is an animation. everything works pretty well except we have found during beta testing that the user can scroll and very quickly through and past the horizontal "slider" into the regular vertical page. overall the horizontal portion doesnt "feel" great and breaks the user experience. we've tried doing "snap" points- but they snapped in odd ways that didnt feel natural. i've googled this, searched the forums, tried on my own but nothing is working or is overly complex to the point of getting overwhelmed at the complexity of some of these other "snap" solutions. what im wondering is is there a way to add a bit of a "click" feel as each slide finishes. or some sort of anticipation and "pause" after each slide so the user doesnt whip trough the horizontal scroll? i''d be very thankful for any assistance i can get on this, as it's become quite frustrating. const tl2 = gsap.timeline({ scrollTrigger: { trigger: '.module_3_wrapper', start: "center center", end: "center center", pin: '.module_3_wrapper', scrub: 1, pinSpacing: true, } }); let container = document.querySelector('.module_3'); let sections = gsap.utils.toArray(".module_3 .slides"); let scrollTween = gsap.to(sections, { x: () => -(container.scrollWidth - document.querySelector('.module_3_wrapper').clientWidth) + "px", ease: "none", duration: .1, scrollTrigger: { trigger: ".module_3_wrapper", pin: true, start: "center center", scrub: true, invalidateOnRefresh: true, end: `+=${container.offsetWidth}`, } }); I found someone did something like this with a nest scrolltrigger, but i can't figure out how to merge what i have and what this does. but it has the exact effect im looking for. where it nicely locks between slides. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. ScrollTrigger.create({ start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });

Hi Everyone, I've had a great time playing with GSAP lately (it had been awhile). I've been able to do everything ive wanted to accomplish except for one thing a smooth frame by frame animation loop without any delays on the first frame. no matter what i've tried i eventually get a skip or a delay. I've settled on two methods of achieving this goal. but again, neither have been ideal. One attempt is this <div class="bgs"> <img src="img/key/5.jpg" > <img src="img/key/3.jpg" > <img src="img/key/2.jpg" > </div> var imgs = document.querySelectorAll('.backgrounds img'); var facelooptl =new TimelineMax({repeat:18, yoyo: true}) .staggerFrom(imgs,0,{opacity:0,ease:Linear.easeNone},0.2) the other attempt i made was something like this. //the other attempt is something like below facelooptl = new TimelineMax({repeat:-1}); facelooptl.add('background2') .from('#background2', 0.3, {opacity: 1, ease: Power4.easeInOut }, 'background2+=0'); facelooptl.add('background3') .to('#background2', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background3') .from('#background3', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background3+=2'); facelooptl.add('background4') .to('#background3', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background4') .from('#background4', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background4+=2'); //these backgrounds have images set in the css. <div class="backgrounds" id="background1"> </div> <div class="backgrounds" id="background2"> </div> <div class="backgrounds" id="background3"> </div> <div class="backgrounds" id="background4"> </div> <div class="backgrounds" id="background5"> </div> <div class="backgrounds" id="background6"> </div> both of these attempts were found off of this forum. Can anyone offer insight?