https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger

[lumuxd 6 Likes (Newbie)]

Hey @GreenSock,

 

thank you for your tip!

The option with the timeline sounds easy, do you have a resource about how to place callbacks on a timeline or something similar?  

 

Thanks!

[nico fonseca 518 Likes (Leader)]

48 minutes ago, lumuxd said:

Hey @GreenSock,

 

thank you for your tip!

The option with the timeline sounds easy, do you have a resource about how to place callbacks on a timeline or something similar?  

 

Thanks!

You can add callbacks on your timeline like this:

const tl = gsap.timeline({
onUpdate:...,
onComplete:...,
onStart:...,
...
});

Or you can use eventCallback() or call() , depending on what you need. 
 

[GreenSock 18,878 Likes (Superhero)]

8 hours ago, lumuxd said:

The option with the timeline sounds easy, do you have a resource about how to place callbacks on a timeline or something similar?  

 

Yeah, I was thinking about .add() of a function in a timeline:

let tl = gsap.timeline();
tl.add(() => console.log("1"), 1) // insert at exactly 1 second into the timeline
  .add(() => console.log("2"), 2) // exactly 2 seconds into the timeline
  //...etc.

Of course you'd likely have other tweens in the timeline too (although that's not necessary). I'm just trying to focus on the .add() stuff here. 

 

You can use .call() too if you need to pass parameters.

[lumuxd 6 Likes (Newbie)]

@nico fonseca, @GreenSock thanks to both of you, I'll try this in the upcoming days!  

[lumuxd 6 Likes (Newbie)]

Hey @GreenSock, thanks again for your last tip.

 

But If I get this right, your code is adding a different function each second - is that correct? In this case I am not looking for a time-based solution, but for something which is triggered as soon as a specific element is being snapped / in center of the viewport..

 

Do you maybe have a similar solution for me, but not time-based?  Thanks!

[OSUblake 18,534 Likes (Superhero)]

What was wrong with using the onComplete callback? It shouldn't be too hard to figure out the index of the element that is snapped.

 

Some pseudo code.

snap: {
  snapTo: 1 / 33,
  duration: 0.5,
  onComplete: (scrollTrigger )=> {
    let index = Math.round(scrollTrigger.progress * 33);
    let currentElement = arrayOfMyElements[index];
  }
},

 

[lumuxd 6 Likes (Newbie)]

Hey @OSUblake

sorry for getting back so late, thanks you for you code, this would work perfectly for me.