Tween starts too late

[Garry6862]

I have added two bottles. one should starts spinning when its section starts and should fade when second bottle comes up.

but right now they both start spinning too late also need the code for fade effects of bottles to make it cooler. Thanks

See the Pen YzLXJKv by garry6862 (@garry6862) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums!!!

 

There is a problem with your syntax basically. The trigger property on the configuration object is only used in ScrollTrigger and not in regular to(), from() and fromTo() methods. If you inspect your browser's console you'll see this:

Invalid property trigger set to .sec1 Missing plugin? gsap.registerPlugin()
Invalid property trigger set to .sec2 Missing plugin? gsap.registerPlugin()

Which comes from these:

tl.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  trigger: ".sec1", // <- HERE
  duration: 1
}, '+=1')
t2.to(airpods2, {
  frame: frameCount2 - 1,
  snap: "frame",
  ease: "none",
  trigger: ".sec2", // <- HERE
  duration: 1
}, '+=1')

Updating your code to this seems to do what you're looking for:

// First Section
let tl = gsap.timeline({scrollTrigger: {
    trigger: ".sec1",
    scrub: 1,
    markers: true,
  },onUpdate: render})
  .to(airpods, {
    frame: frameCount - 1,
    snap: "frame",
    ease: "none",
    duration: 1
  }, '+=1')

// Second Section
let t2 = gsap.timeline({scrollTrigger: {
    scrub: 1,
    markers: true,
    trigger: ".sec2",
  },onUpdate: render2})
  .to(airpods2, {
    frame: frameCount2 - 1,
    snap: "frame",
    ease: "none",
    duration: 1
  }, '+=1')

Happy Tweening!!!