Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MrMateo7

"delay" to scrollTrigger

Recommended Posts

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 post
Share on other sites

You should be able to just add a delay: 0.25 to your .timeline object.

Link to post
Share on other sites
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 post
Share on other sites

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)
  • Like 3
Link to post
Share on other sites
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?

  • Like 1
Link to post
Share on other sites

Hi,

 

This is how the position parameter works:

 

 

Happy Tweening!!!

  • Like 5
Link to post
Share on other sites

 

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.

 

  • Like 4
Link to post
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.

×