pOri_A

Hey... I can't create a demo for this problem cause in my local version every things are fine but in my online version gallery section messed up when I scroll from the top of the site this problem will happened ( image ) but when I refresh page or resize page everything gets fine again . this is the cod of the section that don't do the job // some pic window.addEventListener('load', function() { ScrollTrigger.saveStyles("#somePic,#imgMain "); const somePic = document.querySelector('#somePic'); const imgmain = somePic.querySelector('#imgMain'); gsap.fromTo(imgmain,1,{scaleX:3.3, scaleY:3.3,y:100 },{scaleX:1, scaleY:1,x:0,y:0, scrollTrigger:{ trigger:somePic, start:'top top', end:'bottom+=1500 top', pin:true, scrub: 1, markers:true }}); }); Edit: I realize that there is another part effecting on this galleryImg and that is three moving img before this part .... is it ScrollTrigger Refresh effect? $(".collection").each(function() { var tl = gsap.timeline(); var miniPic = $(this).find(".mini-pic"); var miniPicDiv = $(this).find(".mini-pic-move"); var tl2 = gsap.timeline(); tl2.to(miniPicDiv,{ y:50, scrollTrigger:{ trigger:this, start:'top center', end:'bottom+=500 center', scrub: 2 }}); tl.to(miniPic,{scale:1.2 ,scrollTrigger:{ trigger:this, start:'top center', end:'bottom+=500 center', scrub: 1 }}); }) at the end Sorry For My Bad English

Thank You Dear @mikel your answers are very helpful

hey @mikel I'm very glad that you spend your time for this issue I update your cod to something like this onUpdate: self => { if (self.direction > 0 ) { console.log("velocity: "+ self.getVelocity()); let velo = self.getVelocity(); let speed = velo*0.01; if (speed > 4){ speed = 4; } else if (speed < 1 ){ speed = 1 } console.log("speed: "+ speed); action.timeScale(speed) } } that try to move slider when scroll down but the problem is when I stop scrolling I want slider keep moving with minimum speed not last velocity I try to use this code but its not working ScrollTrigger.addEventListener("scrollEnd", function() { master.duration(2).play(); }); ** And is there any way to make slider move Smother when we scroll down?

thank you @mikel for your solution can you help me with this problem?? Im looking for a way to mix this slider with scroll trigger when we scroll down slider move faster i have try to do something like this but its not working and obviously its wrong.. can you help me how to use scroll trigger here with auto play slider .to(no01, {x: dirFromRight, modifiers: { x: x => mod(parseFloat(x)) + "px", }, duration:time, ease:'none', repeat:-1, scrollTrigger:{ trigger:'.landing-wrapper', start:'top top', end:'bottom center', markers:true, scrub: 1 }, },1)

hey @mikel thanks for your clear example but is there any way to use some stager before slider make move? I used this cod before but with position: absolute its not working var tl = gsap.timeline(); tl.fromTo(".box",{x:1900,y:-400},{duration:1.5,x:0,stagger:0.1}) .staggerTo(".box",1.5,{y:0} ,0.2,"-=0.4")

I cant find how to do that ... But thanks for your help

hey @ZachSaucier thank you for your advice I update my code to Gsap3 but my problem is I don't want to use position absolute in my box but all the example in that topic are using position absolute can you help me about this issue? https://codepen.io/perada/pen/pobzVze

hey guys I have a problem with my slider I want to create a looping slider but as you see in codepen it is not working thank you and sorry for my low level Problem