Draggable + ScrollTrigger doesn't work.

[PARK JAE CHAN 0 Likes (Newbie)]

 

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

[akapowl 5,130 Likes (Superhero)]

 

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