Jump to content
GreenSock

Garry6862

Tween starts too late

Recommended Posts

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

Link to comment
Share on other sites

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

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