Jump to content
GreenSock

JoePham

Members
  • Posts

    11
  • Joined

  • Last visited

JoePham's Achievements

  1. https://codepen.io/phm-thanh-li-m-the-animator/pen/ZEvZjeM hi this is my minimal code with the extra code but look like its not working right can you tell me why ? thanks my extra code is for reduce speed of the object without using height because in my project if use the height to reduce it create another conflict ..
  2. https://codepen.io/phm-thanh-li-m-the-animator/pen/ZEvZjeM hi this is my minimal code with the extra code but look like its not working right can you tell me why ? thanks
  3. i found this scroll code ... and my question is how can i combine demo code with this code below this code below can control speed of the object thanks for you times ! let anim = gsap.to("#cat", { paused: true, immediateRender: true, ease: "none", motionPath: { path: "#text-curve", align: "#text-curve", alignOrigin: [0.5, 0.5], autoRotate: true, } }); let progressTo = gsap.quickTo(anim, "progress", { duration: 0.5, ease: "expo" }); let catTo = gsap.quickTo("#cat", "rotationY") Observer.create({ type: "wheel,touch,pointer", wheelSpeed: -1, onUp() { progressTo(anim.progress() + 0.1); }, onDown() { progressTo(anim.progress() - 0.1); }, onToggleY(self) { let rotation = self.deltaY < 0 ? 180 : 0; catTo(rotation); } });
  4. Hi everyones I got stuck at the rotation so my question is how can i Overwrite the rotation ? ?? please go to the Codepen dont know only show the mobile version ... thanks for your time !
  5. Thanks for your information alot by the way is there any way to make a checkpoint like when object go throgh that checkpoint(mark by id) then run a function ?
  6. Hi OSublake Can we reduce the space of the scrollbar every time user scroll ?? For Ex: window.scrollTo(0, window.scrollY + 5)
  7. As you can see in my codepen the Scrollbar scroll too fast so that the character cannot see after few scroll from user is there any way to fake height or freeze the screen ? https://codepen.io/joe-pham-patroids/pen/BaJMVxW
  8. Hi oh i did it but i have a question can i create a fake height ? because if i reduce the speed but the scrollbar still scroll fast ? so the problem is the character move slower than Scrollbar ... if can create a fake height is there any something to define when character at the end point then can move to the next section ?
  9. hi Here's my code on https://codepen.io/joe-pham-patroids/pen/BaJMVxW about the point A > B mean space between the start point to the second point when user scroll once times please help me this or at lease share me some keyword to take the research thanks !
  10. This is my demo link https://tool.baotramcompany.com/animation/v2/ and this my Gsap Code so 1. Can i reduce the space between point A -> B ? 2. Can i reduce the speed of the character movement ? Thanks for you times. Sory i cant push my code to codepen (something was wrong!) var animation; gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); gsap.set("#cat", { scale: 1, autoAlpha: 1 }); gsap.set("#cat", { transformOrigin: "50% 50%" }); animation = gsap.to("#cat", { scrollTrigger: { trigger: "#motionPath", start: "top left", endTrigger: "body", end: () => ScrollTrigger.maxScroll("html"), scrub: true, markers: false, timeScale: 10, onUpdate: self => { gsap.to("#cat", { rotationY: () => self.direction === 1 ? 0 : 180, overwrite: 'auto', onscroll: function () { if (self.direction === 1) { jQuery("#increaseTrans").trigger('click'); //console.log("progress", self.progress); } else { jQuery("#increaseTrans").trigger('click'); } }, //=> self.direction === 1 ? jQuery("#increaseTrans").trigger('click'); jQuery("#moveDown").trigger('click'); : console.log("up"), }); } }, duration: 0.5, ease: "none", immediateRender: true, motionPath: { path: "#text-curve", align: "#text-curve", alignOrigin: [0.5, 0.5], autoRotate: true, } });
×