Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PARK JAE CHAN

Draggable + ScrollTrigger doesn't work.

Recommended Posts

 

I want to implement an effect when scrolling down like this site.

http://kutani.co.kr/#chef2  

 

 

I tried, but when the 4th point is reached, the letter (Dog) does not move. Why?

Post an example on the codePan.

Thank you for using your precious time.

 

See the Pen gOvzLzx by JAECHANPARK (@JAECHANPARK) on CodePen

Link to comment
Share on other sites

 

Hello @PARK JAE CHAN - welcome to the GreenSock forums.

 

ScrollTrigger does not work with this example, because this example does not work with native browser scrolling, which ScrollTrigger is built to be used with. Instead this example you posted listens and reacts to events like the mouse wheel etc.

 

In the example below, I added an onComplete callback to the tween that makes the panels move, so you could e.g. trigger things after a certain panel comes in to view there maybe. 

 

function slideAnim(e) {
    
    ...
    
    // if we're dragging we don't animate the container
    if (this.id != "dragger") {

      gsap.to(container, dur, { y: offsets[activeSlide], ease:"power2.inOut", onUpdate:tweenDot, onComplete: function(){

        activeSlide === 3 && gsap.to('.sec-ta', { rotation: 360, clearProps: "transform" })

      } });
      
    }
  
}

 

This is just to give you an idea to begin with though - you would e.g. also have to implement something similar for when things are being dragged. And if you want things to start fading in or out earlier or later, you will need to adjust the logic of it, so it will work with what you'd expect.

 

I'm pretty sure it would be possible to get it to work like the example you refferenced above, but as it might require quite some tweaking of the logic until you get it working exactly as you like, that is nothing we can really help with - we love helping with questions directly related to GSAP, though.

 

So If you have any of those, fire away :) 

 

See the Pen vYdjyvm by akapowl (@akapowl) on CodePen

 

  • Like 4
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.
×