Jump to content
Search Community

How can i combine these code in to demo code ?

JoePham test
Moderator Tag

Recommended Posts

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);
  }
});

 

See the Pen wvzYxjE by codribble (@codribble) on CodePen

Link to comment
Share on other sites

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat.

 

Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

Link to comment
Share on other sites

22 minutes ago, mvaneijgen said:

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat.

 

Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

See the Pen ZEvZjeM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

 

hi this is my minimal code with the extra code but look like its not working right can you tell me why ? thanks 

Link to comment
Share on other sites

25 minutes ago, mvaneijgen said:

@JoePham can you create a minimal demo for us? The demo you've posted is not yours right? And if I check your code there is no element in the demo with an id of cat.

 

Right now I can't see how this block of code has anything to do with this demo. If you can put it in relation to the rest if the code you will be using and put that in a demo, even if it is not working we'll have a better understanding of what you are trying to do and it will be easier to help you.

See the Pen ZEvZjeM by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

 

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 .. 

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...