chrisi51 Posted November 19, 2020 Share Posted November 19, 2020 Hey there, i just struggle a bit with ScrollTrigger. I have an animation similar to my posted pen. Animation is on scroll ... on end of the animation there are clickable elements which change attributs of the main element (on pen its just the fill). The fill is also changed to yellow in the animation before you can click to prepare the clickable elements for their actions. (on my real animation there is content which have to disappear before the controls can make other content visible ) when i scroll back top those changes are also going reverse but the yellow fill is also reanimated instead of going to black directly. hope you understand, what i mean Thanks for your help in advance. See the Pen xxONJGx by chrisi51 (@chrisi51) on CodePen Link to comment Share on other sites More sharing options...
chrisi51 Posted November 20, 2020 Author Share Posted November 20, 2020 The same problem i have with function calls via .add() in that timeline. To start section animations i build some function which init the local animation and remove them if you passed the section. This is working from top to bottom but in reversed direction the functions also get called in the reversed direction. I used a second scrolltrigger to address that problem, what is working but is less comfortable at changes on the main timeline. So i thought the way to use .add is the better way but it seems to not know something like enter or enterBack. I've updated my pen. At this point, where the 3 circles get out of the big black one, it should say "animation started" and after the circles are in final position, it should say animation stopped. Thats what works. But on the way back it should be in reversed order. So stopping have to say started and so on. Do you have any suggestions? Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2020 Share Posted November 20, 2020 So you want to CHANGE the timeline that's getting scrubbed? So the tween to yellow should be updated to whatever circle color you click? You could just keep a reference to that tween, make it a fromTo() so that it's sure to use the correct starting and ending values, and update its final value. Then call invalidate() to force it to flush its internally-recorded starting/ending values and snag them again on the next render, like this: See the Pen a7644bb629503ac2484b664b609ad37a?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? If you don't really need scrubbing enabled, this could be even easier. But what's tricky about your scenario is that you're asking it to scrub a timeline that you actually want to CHANGE on-the-fly, so a lot of it isn't about scrubbing an existing timeline but rather creating entirely new, dynamic tweens. 4 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 20, 2020 Author Share Posted November 20, 2020 i don't know wether changing it is really the right way. i understand your pen, even if i did not knew, that there are stuff like that At least the functions createAnimation and stopAnimation are in wrong direction on the way back. could i add a function, which is checking, in which way we scroll and then call the propper function instead of calling them directly? on that way i also could handle the color switch, i guess. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 20, 2020 Share Posted November 20, 2020 2 hours ago, chrisi51 said: At least the functions createAnimation and stopAnimation are in wrong direction on the way back. could i add a function, which is checking, in which way we scroll and then call the propper function instead of calling them directly? The easiest thing to do would probably be to detect the direction of the ScrollTrigger within one of those functions. To do so create the timeline and ScrollTrigger separately (using .create() for the ScrollTrigger) and save the reference of the ScrollTrigger for us later. 3 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 20, 2020 Author Share Posted November 20, 2020 gonna check this tomorrow ... thx for pointing that out Link to comment Share on other sites More sharing options...
chrisi51 Posted November 21, 2020 Author Share Posted November 21, 2020 19 hours ago, ZachSaucier said: The easiest thing to do would probably be to detect the direction of the ScrollTrigger within one of those functions. To do so create the timeline and ScrollTrigger separately (using .create() for the ScrollTrigger) and save the reference of the ScrollTrigger for us later. seems like i only can use the self object with information about direction in a separat scrolltrigger object, what u already mentioned. Isn't there a way to use it also on a timeline add function? @GreenSock @ZachSaucier at the moment i actually have a separate scrolltrigger object but the point is, that its very unflexible to handle according to the very long timeline. there is a central element following the scroll down animation so its always in the point of view. i have to start and stop an animation very precisely according to the position of my central element, what made me thinking about putting those functions into add() of the timeline. but then i get the described problem and there seem to be no way to determine the direction. I guess that would be a nice feature if its not already there and i just don't understand how to use it But i can go with your suggestion for the moment. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 21, 2020 Solution Share Posted November 21, 2020 @chrisi51 I read your post a few times and I'm not quite sure what you mean. It should be quite easy to determine the direction of scroll from within any function (regardless of if it's add()-ed to a timeline). Every ScrollTrigger has a "direction" value. And you can get the ScrollTrigger on a particular timeline with timeline.scrollTrigger. let tl = gsap.timeline({ scrollTrigger: {...}}); ... tl.add(() => { console.log(tl.scrollTrigger.direction); }); Is that what you're looking for? 2 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 21, 2020 Author Share Posted November 21, 2020 2 hours ago, GreenSock said: @chrisi51 I read your post a few times and I'm not quite sure what you mean. It should be quite easy to determine the direction of scroll from within any function (regardless of if it's add()-ed to a timeline). Every ScrollTrigger has a "direction" value. And you can get the ScrollTrigger on a particular timeline with timeline.scrollTrigger. let tl = gsap.timeline({ scrollTrigger: {...}}); ... tl.add(() => { console.log(tl.scrollTrigger.direction); }); Is that what you're looking for? outch ... that is EXACTLY what i was looking for xD sorry, im so new to gsap and have to lean all those properties and stuff you can use in different contexts + broken english expertise Thank you @GreenSock for your help and especially for gsap and all its components! PS: this is by far the fastest and most active community i've ever seen when it comes to such individual questions. gsap and its forum helpt me so much the last days and only on that way im able to accomplish my project. i really appreciate that! 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