Share Posted June 14, 2020 Hi! Can you explain what is the best practice animate one element with multiply triggers (ScrollTrigger) (different animations for one element)? Example (watch codepen): 1. pin parent div and fade-in box animation 2. if we scroll to 1/3 of parent height of pinned element - move box to right 3. if we scroll to 2/3 of parent height of pinned element - rotate box On my codepen demo i have some issues: 1. onRefresh (switch tabs on your browser) - broke my animation 2. i try to use toggleActions, but can't specify play("label") and reverse("label"), seek('label') or duration(1) 3. i think that control one timeline (nested timelines) harder than three timelines, but i try to use three timelines and three ScrollTrigger's and have much more issues with animation What i do wrong? What is the best practice to animate one element with different triggers? Thank you! See the Pen ZEQOqgr by -greg- (@-greg-) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted June 15, 2020 Maybe somone have examples with few animation to one element with controlled with ScrollTrigger Link to comment Share on other sites More sharing options...
Share Posted June 15, 2020 Hey Nekiy2. I'd a few things about your approach. I'm not sure why you're trying to use a master timeline and seek through it. If you want different animations to fire at different points, then use different animations that aren't connected? You can use percents with start/end so you don't need to calculate things yourself. In fact, calculating things yourself like you did is likely to not work well on resize. I'd separate your fade in and pinning into two ScrollTriggers. Something like this: See the Pen zYrKqqw?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 15, 2020 Thank you! 11 minutes ago, ZachSaucier said: You can use percents with start/end so you don't need to calculate things yourself. In fact, calculating things yourself like you did is likely to not work well on resize. Wow, greate, i don't know about that! 13 minutes ago, ZachSaucier said: I'm not sure why you're trying to use a master timeline and seek through it. If you want different animations to fire at different points, then use different animations that aren't connected? i read https://css-tricks.com/tips-for-writing-animation-code-efficiently/#tip-8-modularize-your-animations that's why i write this post, i don't understand how to better use. Thank you, at last i find the answer! Link to comment Share on other sites More sharing options...
Share Posted June 15, 2020 Typically you wouldn't need something like this because you'd engineer things differently like Zach pointed out, but just for the record if you really need to wire up a ScrollTrigger so that it just animates between two labels, you can pause() the master timeline and use a tween of that timeline's playhead! let master = gsap.timeline({paused: true}); master.to(...); // do whatever master.addLabel("label1", 2).addLabel("label2", 5); let labelTween = master.tweenFromTo("label1", "label2"); ScrollTrigger.create({ animation: labelTween, ... }); 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 16, 2020 15 hours ago, GreenSock said: master.tweenFromTo("label1", "label2"); Thank you! This is good example! Link to comment Share on other sites More sharing options...
Author Share Posted June 18, 2020 On 6/14/2020 at 11:45 PM, Nekiy2 said: but i try to use three timelines and three ScrollTrigger's and have much more issues with animation If i use two timeline for one element, second timeline overwrite attributes Timeline on view: tl_inview .fromTo('.slide01 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}) .fromTo('.slide01 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "-=0.5") Timeline for chage slides: tl_slides .fromTo('.slide01 .box1', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .fromTo('.slide01 .box2', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .addLabel('start') .fromTo('.slide02 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") .fromTo('.slide02 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") On page load i have <div class="slide01"> <div class="box1" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> <div class="box2" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> </div> See the Pen qBbqvPQ by -greg- (@-greg-) on CodePen I want that tl_inview play only once (only if scroll from top) Link to comment Share on other sites More sharing options...
Share Posted June 18, 2020 I think you're looking to use immediateRender: false? See the Pen XWXNLYY?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 18, 2020 1 minute ago, ZachSaucier said: I think you're looking to use immediateRender: false? @ZachSaucier thank you for your answer. Something like that, but in your codepen demo if you scroll from bottom to top, boxes inside .slide01disappearing Link to comment Share on other sites More sharing options...
Share Posted June 18, 2020 In general it's easiest if you affect different elements so there's no conflict. I'd create an empty container around each box and use that for the into animation. Link to comment Share on other sites More sharing options...
Author Share Posted June 18, 2020 12 minutes ago, ZachSaucier said: In general it's easiest if you affect different elements so there's no conflict. I'd create an empty container around each box and use that for the into animation. Like that? <div class="slide01"> <div class="box1-wrapper"> <div class="box1"></div> </div> <div class="box2-wrapper"> <div class="box2"></div> </div> </div> I think i understand it wrong See the Pen dyGOxYP by -greg- (@-greg-) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 18, 2020 No, you are understanding it correctly. You should remove the immediateRender: false that was added and then you just have to fix the CSS: See the Pen xxZRvjb?editors=0100 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted June 18, 2020 Thank you, @ZachSaucier! Sorry for my Newbie questions So better use wrapper than try to kill tween and clear property for prevent conflict? I try to learn GSAP i want to know how to do it right. Link to comment Share on other sites More sharing options...
Share Posted June 18, 2020 There's usually multiple ways to do things when it comes to frontend. I think it's cleaner to use a container than to try and manage the state of different animations in situations like this. Ultimately if it works then do what makes the most sense to you. 1 Link to comment Share on other sites More sharing options...
Share Posted June 19, 2020 On 6/14/2020 at 3:45 PM, Nekiy2 said: On my codepen demo i have some issues: 1. onRefresh (switch tabs on your browser) - broke my animation This was indeed an issue for non-scrub ScrollTriggers that had an animation associated with them. If you scrolled to a point where the animation was played and switch tabs and came back, the animation would have reset. That should be resolved in the upcoming release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you might need to clear your cache). Better? 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 23, 2020 Thank you @GreenSock On @ZachSaucier demo its broken again 1 Link to comment Share on other sites More sharing options...
Share Posted June 25, 2020 Should be resolved now in the latest beta. Sorry about any confusion there. 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