MrMateo7 Posted May 14, 2021 Share Posted May 14, 2021 Hi! I'm working with Threejs, and with scrollTrigger to 'animate' certain meshes. So I want to scroll an certain amount at the beginning (for example 200px) as a delay to scrolltrigger effect, and also at the end, you scroll certain amount after the cointaner scrolls up, because since you start scrolling the can start to move. I want to add a delay to that movement BUT keeping the container pinned. gsap.registerPlugin(ScrollTrigger) let t = gsap.timeline({ scrollTrigger: { trigger: containerPoker, // The canvas start: '100px 100px', // trigger viewport end: '100% top', markers: true, pin: true, scrub: 0.5, toggleActions: "restart pause resume pause" } }) t.to(lRegular.rotation,{ y: Math.PI * 2, z: Math.PI / 4, }) There is a live example.https://poker-skus.larealidadaumentada.com.co/ Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 14, 2021 Share Posted May 14, 2021 You should be able to just add a delay: 0.25 to your .timeline object. Link to comment Share on other sites More sharing options...
MrMateo7 Posted May 14, 2021 Author Share Posted May 14, 2021 1 minute ago, elegantseagulls said: You should be able to just add a delay: 0.25 to your .timeline object. That don't work. Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 14, 2021 Share Posted May 14, 2021 Yeah, I just saw that when testing... repeatDelays work, so that's what I was thinking of. For this, you can just add a position parameter to your tween: t.to(lRegular.rotation,{ y: Math.PI * 2, z: Math.PI / 4, }, 0.25) 3 Link to comment Share on other sites More sharing options...
MrMateo7 Posted May 14, 2021 Author Share Posted May 14, 2021 3 hours ago, elegantseagulls said: For this, you can just add a position parameter to your tween: Thanks, this work for the beginnig, gives that 'delay'. Can you explain me a little better, what did you mean with 'position parameter' And to give that little delay at the end? any idea? 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 14, 2021 Share Posted May 14, 2021 Hi, This is how the position parameter works: Happy Tweening!!! 5 Link to comment Share on other sites More sharing options...
akapowl Posted May 15, 2021 Share Posted May 15, 2021 You'll have to get an understanding of how durations and the position parameter work with scrubbing ScrollTrigger tweens and timelines though. So you could technically add empty tweens at the beginning and end of your timeline to 'pad' the animation. See the Pen 8d6ce67c198c0bc6acd63bcc060f66b2 by akapowl (@akapowl) on CodePen Here, the end of the scrollTrigger is set to "+=600%". The tween on the box has a duration of 4 whereas the empty tweens have a duration of 1 each - thus for 100% at the beginning (the window's height) and the end of the timeline there will be no visible tween. Hope this helps. Sidenote: The toggleActions in your code-snippet does not do very much - when you have a scrub, that is what will control your tween. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now