Jump to content
GreenSock

lumuxd

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

Go to solution Solved by Cassie,

Recommended Posts

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!

Link to comment
Share on other sites

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. 
 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

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];
  }
},

 

  • Like 4
Link to comment
Share on other sites

  • nico fonseca changed the title to https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger

Hey @OSUblake

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

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