Paz Posted July 7, 2021 Share Posted July 7, 2021 Hiya, I've been working on this animation and have again issues with the autoAlpha. I basically have 3 blue tiles that should disappear on scrolling reverse (screenshot attached), but are still visible. It should be: In Step 1 visible In Step 2 they disappear In Step 3 they appear In Step 4 visible I've tried many different ways but cannot make it work. In my code they are commented as: // 3 blue tiles issue // "#tile6-2", "#tile4-2", "#tile8-2" Also, I fist added durations to and between tweens, but then I realised that since it's a scroll animation the different 'steps' need to happen quite quickly. Is there any general advice for these kind of animations, so I can do things better next time? Any help is appreciated!! See the Pen oNWxoqm by mar-a (@mar-a) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted July 7, 2021 Share Posted July 7, 2021 I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline: tl2 .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 }) .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 }) Link to comment Share on other sites More sharing options...
GreenSock Posted July 7, 2021 Share Posted July 7, 2021 2 hours ago, Visual-Q said: I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline: tl2 .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 }) .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 }) A slightly shorter version to write that: .fromTo("#tile6-2, #tile4-2, #tile8-2", { autoAlpha: 0 }, { autoAlpha: 1 }) 👍 Link to comment Share on other sites More sharing options...
Paz Posted July 8, 2021 Author Share Posted July 8, 2021 Hi, Thank you both for your help. The fromTo seems a good option to use here. But I'm afraid I'll need to go through all the animations again. If I add the code suggested, I get unwanted effects on other timelines. Before I continue with this, I would greatly appreciate your opinion. What I'm trying to achieve is that each Headline section triggers a timeline. You can see an example here -down the page-: https://www.blendingpoint.com/about/ I can see that in that example the animations are shorter and abstract, whereas the ones I'm making are possible too long and with a narrative. e.g magnifying glass has to be visible on Step 2 only. So if people scroll down / up too fast the magnifying glass catches-up, and ends up being visible at other points of the scroll. Same with the faces or the lines at the end. I know there's errors in my animation, but I'm unsure if my problem is in the errors I've made or in the design of the animation (too long for scrolling where you cannot control the speed used by the user). Any comments would be immensely appreciated. THANK YOU! Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2021 Share Posted July 8, 2021 You could get around this by adding scrub to your animations? Then no matter how fast the user scrolls the animations will happen synchronously. Either that or add more space in to the design to allow for room to scroll. See the Pen MWmeerp?editors=0010 by svganimationworkshop (@svganimationworkshop) on CodePen 3 Link to comment Share on other sites More sharing options...
GreenSock Posted July 9, 2021 Share Posted July 9, 2021 Yeah, you're up against some logical impossibilities. If your user scrolls really fast and you don't have scrub, you're gonna have animations stacking up. You could force the previous/next ones to complete by using an onToggle, sorta like: ScrollTrigger.create({ trigger: "#step-2", start: "top center", animation: tl2, onToggle: self => { if (self.isActive) { tl1.progress(1); // previous should be at end tl3.progress(0); // next should be at start } } }); 2 Link to comment Share on other sites More sharing options...
Paz Posted July 9, 2021 Author Share Posted July 9, 2021 @Cassie Yes I agree that would be the simplest solution, but the person who designed it doesn't like the option of having the animations paused mid-way. @GreenSock Thanks for showing this option. I'll re-do the whole thing, give it another shot and see if it works. But agree it has logical impossibilities! Thank you all for your time. 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