Jump to content
Search Community

Animate an element that toggles between scrub: true and scrub false at different times

EdwinSana test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I'm stuck with what I think is something very very simple from Scrolltrigger but I haven't been able to figure it out and would like your help please.

 

I have an element and I want two animations for it:

 

1. Animate the opacity of ".element" from opacity: 0.2 to opacity: 1 but with scrub: false, I mean, its opacity is not progressively animated as scrolling is made, but when scroller-start meet with start, the animation it's completely executes.

 

2. Animate the position of ".element" from x: 0 to x: 300 but with scrub false so that its movement is progressive according to the scroll.

 

I would like the second animation not to happen immediately after finishing the first one, but to be able to apply a "delay" of one or two seconds to it. I have not succeeded and when I have tried to change the values of start and end it does not work correctly (that is why I have commented on them).

 

Thanks for the help!

 

See the Pen BaxmzXj by EdwinSanabria (@EdwinSanabria) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @EdwinSana welcome to the forum!

 

Have you seen the onEnter property of scroll trigger? (see the docs)

 

  Function - A callback for when the scroll position moves forward past the "start" (typically when the trigger is scrolled into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). Example:
onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)

 

3 hours ago, EdwinSana said:

1. Animate the opacity of ".element" from opacity: 0.2 to opacity: 1 but with scrub: false

I've add a onEnter gsap tween that animates when the ScrollTrigger starts

 

3 hours ago, EdwinSana said:

2. Animate the position of ".element" from x: 0 to x: 300 but with scrub false

I think you ment scrub: true?

 

3 hours ago, EdwinSana said:

but to be able to apply a "delay" of one or two seconds to it.

I've add an empty tween to the beging of the scrub timeline that does nothing for 2 seconds. There aren't really seconds in a scrubbed ScrollTrigger it will convert your total timeline duration to the total scroll distance. Your scroll distance is 260px and your total timeline duration is 2.5 seconds, so it will do nothing for about 200px and then animate the rest for the remaining 60px.

 

Right now if you scroll back the box will stay at it's opacity:1, but you could fix that with an onLeaveBack tween, but I'll leave that one for you.  

 

 

See the Pen BaxmpBb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @mvaneijgen ! 

 

Thank you very much for your help!

 

3 hours ago, mvaneijgen said:

 

I think you ment scrub: true?

 

 

Yes! Sorry, I meant scrub: true in that part of my question.

 

And your solution is that what I was looking for. I will review the documentation in detail for other related questions that may arise.

 

Again, thank you very much for your help!

 

  • 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.
×
×
  • Create New...