kobro Posted October 6, 2021 Share Posted October 6, 2021 Hi. I have the structure where all the elements are in "position: fixed" and animate them with ScrollTrigger. My problem is when I want to play animation to label or position in timeline on click. Timeline plays, but page scroll does not move. I thought to try to calculate scroll position but all elements are fixed so it doesn’t work. Is there any possibility to create timeline that doesn’t depend on scroll page but plays on scroll? Or something that will scroll and play at the same time? Press button "Go to BLUE" and scroll after animation stop. See the Pen MWoNoWZ by KoBro (@KoBro) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted October 6, 2021 Share Posted October 6, 2021 Hey @kobro If you want the scroll-position and tween to stay connected, it's best to just use the ScrollTo-Plugin, which you are already loading. In your case you could e.g. slap an ID onto the container you are using as the trigger (which in your example is .hero - but there is no such element in your markup, so I changed that to your .scroll-wrapper container), tell the ScrollTo-Plugin to scroll to there and add a negative offset-y representing the actual scroll-duration of your ScrollTrigger. Something like this maybe: See the Pen fb808f83f02f26987887df876c22ceeb by akapowl (@akapowl) on CodePen 5 Link to comment Share on other sites More sharing options...
Method Zero Posted November 1, 2021 Share Posted November 1, 2021 On 10/6/2021 at 10:58 PM, akapowl said: Hey @kobro Thanks for your answer. Maybe I have explained wrong. Is there a Scroll to label mode like snap to label in scroll trigger option, but on click? ? In your example scroll reaches the end and ignores labels. Or did I misunderstand and your solution has a way to configure scroll position? Here is an example with more scroll timeline animations. See the Pen gOxGBag by KoBro (@KoBro) on CodePen In real project I have a lot of animations on scroll and I need to have a scroll on click option. Link to comment Share on other sites More sharing options...
akapowl Posted November 1, 2021 Share Posted November 1, 2021 I could be totally mistaken, but I don't think there is such an option. You could create a re-usable function of your own though, without too much effort. Something like this maybe - it is not 100% bulletproof (e.g. if in a scenario like yours, you'd have two scrubbing timelines triggering in different spots with regard to the same trigger-element, it wouldn't work) but it works decently enough... See the Pen 2cbbb02d6fd8294091d64e2573ce0064 by akapowl (@akapowl) on CodePen ...even in scenarios where things wouldn't be positioned fixed/absolute but in a 'natural' flow with pins. Maybe that'll help you. See the Pen 615aeef95a8994782328ab0edb2284a3 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 2, 2021 Solution Share Posted November 2, 2021 Here's a helper function that'll let you feed in a timeline and label, and then it'll return the associated scroll position (assuming that timeline has a ScrollTrigger attached): function labelToScroll(timeline, label) { let st = timeline.scrollTrigger; return st.start + (st.end - st.start) * (timeline.labels[label] / timeline.duration()); } And here's a fork of your demo with it working (assuming I understood your goal correctly): See the Pen ExvbZXg?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 5 Link to comment Share on other sites More sharing options...
Method Zero Posted November 2, 2021 Share Posted November 2, 2021 19 hours ago, akapowl said: 5 hours ago, GreenSock said: Does that help? Thank you so much guys. It's really what I needed and completely solved my problem. 1 Link to comment Share on other sites More sharing options...
Ninthony Posted October 20, 2023 Share Posted October 20, 2023 Is there a way to do this without the SmoothScroller? Link to comment Share on other sites More sharing options...
Ninthony Posted October 20, 2023 Share Posted October 20, 2023 Scratch that, I needed to include the ScrollTo library in my code, didn't realize it wasn't a part of ScrollTrigger itself. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 20, 2023 Share Posted October 20, 2023 Hi @Ninthony, What exactly you mean by that? The ScrollSmoother Plugin is not actually being used in the latest example Jack added to the thread. The example uses the ScrollTo Plugin in order to animate the scroll position of the window object to the specific scroll position returned by the method used for that. The other thing that could lead you to think that is the fact that the ScrollTrigger configuration uses scrub: 1. This is what the ScrollTrigger docs say about that: scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. Maybe if you change it to scrub: true you'll get the effect you're looking for. If not please provide a minimal demo that clearly illustrates the issue you're having. Hopefully this helps. Happy Tweening! 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