scrollTrigger

[Flying Kid]

Hello,

 

Does someone see why the scrollTrigger doesn't work on my page. 

 

www.ppgames.fr/accueil-new

 

thank you !

See the Pen zYqzYPa by Flying-kid (@Flying-kid) on CodePen

[GreenSock]

If you open the console on your web page, you'll see that there are a ton of errors being thrown. Uncaught TypeError: a.target.className.indexOf is not a function
 

That's not anything related to GSAP. 

 

The problem with your CodePen is that you nested the scrollTrigger inside the motionPath object. 

//BAD
gsap.to("#bee", {
  duration:2,
  motionPath: {
    path:"#cpath",
    align:"#cpath",
    alignOrigin:[0.5, 0.5],
    autoRotate:true,
    scrollTrigger: "#bee"
  }
});

// GOOD
gsap.to("#bee", { 
  duration:2,
  scrollTrigger: "#bee"
  motionPath: {
    path:"#cpath",
    align:"#cpath",
    alignOrigin:[0.5, 0.5],
    autoRotate:true
  }
});

Also, your code is just telling it to play your animation when "#bee" enters the viewport, but you've got it at the top of your page so that basically means it's always gonna play right away (I see no purpose in even adding a scrollTrigger like that). 

[Flying Kid]

Thank you ! problem solved !

 

i added a spacing bar to simulate the future content that will be added.