moody

I’m trying to stop scrolling in a certain section of my page using GSAP ScrollTrigger. Specifically, I have a GTLF model that I want to display in a section called “section-four” and I need to disable scrolling while the model is visible. I’ve tried using endTrigger but it didn’t work. Can you suggest the best way to achieve this using GSAP ScrollTrigger? I’m sharing an example of my code below:

how to implement GSAP MATCHMEDIA with more options like this examlpe : isDesktop: `(min-width: ${breakPoint}px)`, isMobile: `(max-width: ${breakPoint - 1}px)`, isiphone12pro: `(max-width: ${breakPoint - 410}px)`, isiphoneSE: `(max-width: ${breakPoint - 425}px)`, and how i can gsap it ? my way its not working , /////////////////////// gsap.to(model.position, { z: isDesktop ? 1:-1 // isMobile? 5 // isiphone12pro? : // isiphoneSE? : }); thank you all

@Rodrigo , Rodrigo thank you for your replay , i think i understand your sulotion but !! when i implment your sulotion it didnt work if you look at the (codepen code) still it dosent work its the same as you see ?

hi , hope you all doig fine ; i succeed to run one animations in one section using using gsap scrolltrigger as you guys seeing on the example however: i have two animatios here , animation[0] and animation[1] , i need to run the two animatioins in two separate sections based on scroll , thanks you all

const assetLoader = new GLTFLoader(); var mixer; var model; assetLoader.load("https://cdn.glitch.global/5213cd0b-d594-4b34-9064-2f1f38b42c78/cube33.glb?v=1665271977633", function(gltf) { gltf.scene.traverse(function (node) { if (node instanceof THREE.Mesh) { object.frustumCulled = false; node.castShadow = true; node.material.side = THREE.DoubleSide; } }); model = gltf.scene; model.scale.set(1,1,1) model.position.setY(-1); model.position.setX(2); model.position.setZ(-2); model.rotation.x = Math.PI / 2; model.rotation.y = Math.PI / 2; model.rotation.z = Math.PI / -2; scene.add(model); camera.position.z = 4; /// MIXER&ACTION CONFIG/// mixer = new THREE.AnimationMixer(model); var action = mixer.clipAction(gltf.animations[1]); action.play(); var actiona = mixer.clipAction(gltf.animations[1]); action.play(); createAnimation(mixer, action, gltf.animations[1]); } ); var clock = new THREE.Clock(); function render() { requestAnimationFrame(render); var delta = clock.getDelta(); if (mixer != null) mixer.update(delta); renderer.render(scene, camera); } render(); function createAnimation(mixer, action, clip) { let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; /// GSAP CONFIG/// function GSAP(){ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ scrub: 3, }) gsap.set(model.position, {x:-0.70,y:-1.80 ,},) gsap.to(model.position, { scrollTrigger: { trigger: ".section-four", start: "top top", toggleActions: "restart play none reset", //onLeave: myLeaveFunc, //onLeaveBack: myLeaveFunc end: '+=2000px', }, x:-1, y:-3 , }); let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: ".section-four", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL.to(proxy, { time: clip.duration, repeat: 0, }) /// I NEED TO RUN ANIMATION [1] HERE /// let scrollingTL1 = gsap.timeline({ scrollTrigger: { trigger: ".section-five", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL1.to(proxy, { time: clip.duration, repeat: 0, }) } GSAP() }