imjs Posted August 26, 2020 Share Posted August 26, 2020 I want to slow down the speed of equation elements ('methods', '+', etc) coming into their final position. I tried changing the duration and y values, they have no impact. If I change the markers start and ending position. The final image will then clash into the section that comes after. Any suggestions? See the Pen VwaPROm?editors=0010 by imjs (@imjs) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted August 26, 2020 Share Posted August 26, 2020 Hi @imjs Welcome to the forum. I assume you'd like the elements to animate over the same duration as the opacity tween, right. The problem is you've set the opacity tween to DUR * 5 which in this case is 5 seconds. The elements have the default of 0.5 so they complete before the opacity tween. You'd want that timeline to have the same duration as the opacity tween. I switched your timeline a little bit to use a stagger. We can then set the amount of the stagger to match the opacity tween. Here's a fork of your demo with those changes. See the Pen 7c90e3f13788e220763de534e0925d8d by PointC (@PointC) on CodePen Note: you can give all those targets a common class and target them that way instead of an array of IDs. I also only changed the animation for window widths > 600. You'll need to adjust the other one. Hopefully that helps. Happy tweening. 4 Link to comment Share on other sites More sharing options...
imjs Posted August 26, 2020 Author Share Posted August 26, 2020 Hi @PointC, Thanks for your reply and the tips. Thanks for fixing the duration. The issue I intended (sorry it was not clear) to fix is...how to make the scroll "harder" . Now, the whole animation speed is depending on how fast I scroll. The faster I scroll, the faster the animation ends. And with a normal user's scrolling speed, the animation ends quickly. I want to slow down that scrolling speed. You almost have to work for it, (like you have to scroll two strokes to make the element move a bit), really scroll a lot to make the elements of the equation come to their final position. It is a bit hard to explain, sorry about that. A good reference would be typeform.com on the scrolling speed. Link to comment Share on other sites More sharing options...
PointC Posted August 26, 2020 Share Posted August 26, 2020 If you don't want the animation to be based on the scroll speed then you wouldn't need to set scrub:true. You could use any duration you like in the tweens and they would just play at their normal speed once you hit the trigger. Is that more what you wanted? 2 Link to comment Share on other sites More sharing options...
akapowl Posted August 26, 2020 Share Posted August 26, 2020 Hey @imjs You could adjust the end of your trigger there, maybe to something like end: "+=" + (window.innerHeight * 2) and accordingly set the height of the #wrapper that is being pinned, so it fits the adjusted 'duration' of that pin. Is this what you were thinking of? See the Pen 316fc300e313a57ffda7b23db66d1c53 by akapowl (@akapowl) on CodePen Here's one little more 'aggressive example of that: See the Pen 5dcacdc8264a28c899b4d4c26e297ed4 by akapowl (@akapowl) on CodePen Edit: I also added anticipatePin: true, to your ScrollTrigger because I was experiencing some flickering issues onEnter and onEnterBack. Edit 2: And if you wanted to smoothen out the animation of the text-bits a little, you could of course just set scrub to 1, instead of true scrub: 1 Cheers, Paul 6 Link to comment Share on other sites More sharing options...
PointC Posted August 27, 2020 Share Posted August 27, 2020 oh... after reading the question again, I think that's right. Nice work @akapowl. 2 Link to comment Share on other sites More sharing options...
imjs Posted August 27, 2020 Author Share Posted August 27, 2020 @akapowl Yes, it is what I wanted! Thank you so much Paul😊 1 Link to comment Share on other sites More sharing options...
akapowl Posted August 27, 2020 Share Posted August 27, 2020 What might be even better, though, is setting the pin to pin: "#wrapper" so the pinSpacing, ScrollTrigger applies automatically, is being applied to that div accordingly. This way you could keep the height of your #wrapper set to 100vh in your CSS and simply just play around with the end of your ScrollTrigger without having to care about setting the right height in your CSS. See this pen: See the Pen 975a831b48fc012ff08dcd060818ec05 by akapowl (@akapowl) on CodePen 5 1 Link to comment Share on other sites More sharing options...
wokshok Posted January 10, 2021 Share Posted January 10, 2021 On 8/27/2020 at 2:23 AM, akapowl said: What might be even better, though, is setting the pin to pin: "#wrapper" so the pinSpacing, ScrollTrigger applies automatically, is being applied to that div accordingly. This way you could keep the height of your #wrapper set to 100vh in your CSS and simply just play around with the end of your ScrollTrigger without having to care about setting the right height in your CSS. See this pen: I just created an account to thank you for this! @akapowl 1 Link to comment Share on other sites More sharing options...
akapowl Posted January 10, 2021 Share Posted January 10, 2021 How kind of you @wokshok I'm glad it helped. And welcome to the non-shadowy side of the forums 4 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