EdwinSana Posted September 25, 2022 Share Posted September 25, 2022 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 More sharing options...
Solution mvaneijgen Posted September 25, 2022 Solution Share Posted September 25, 2022 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 1 Link to comment Share on other sites More sharing options...
EdwinSana Posted September 25, 2022 Author Share Posted September 25, 2022 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! 1 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