77ideas Posted July 14, 2020 Share Posted July 14, 2020 Hi, another problem which I'm dealing with. I've got two timelines hero which is only played and that's all, and the second one is hero_out which should be controlled by ScrollTrigger object. The point is, that all is almost perfect, but I've found some issues with opacity of a button. When I use opacity: 0 in second timeline buttons just disappear like display: none, not fading out like its fading in the hero timeline. Attached the codepen where you can see moment when button disappears. Hero timeline just to play on entering the page looks like this: hero /* some other stuff before button animation */ .from('.carousel-caption .btn-secondary',{ y: 20, opacity:0},'-=0.25'); And basically same code but different direction (hiding elements on scrolling down), but controlled by ScrollTrigger hero_out // some other stuff animated before button .to('.carousel-caption .btn-secondary',{opacity: 0, x: -100, duration: 1},"<"); ScrollTrigger.create({ animation: hero_out, trigger: '#main-slider', start: '80% 50%', end: '100% 50%', scrub: 1, pin: true, id: 'hero_out' }); I can't understand why opacity is ignored in this animation when I create scrollTrigger, why the .btn-secondary or .btn-primary animation doesn't work. Thank you for any helpful answers See the Pen abdaBKr by 404ideas (@404ideas) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Hey 77ideas. You made one of the most common GSAP mistakes related to relative tweens. Let's take a look at what is happening: When the script first runs, this line sets the opacity to 0: .from('.carousel-caption .btn-primary',{ y: 20, opacity:0}) Then the scroll trigger animation is created: .to('.carousel-caption .btn-primary', {opacity: 0, x: 100, duration: 1}) Which animates from the current opacity of 0 to an opacity of 0. Then the first animation plays, animating the opacity to 1. Then once the ScrollTrigger animation runs when it's scroll to, it will fire the second .to() which uses the cached start value of 0 and animates it to 0. That's why it "sets" it instead of animating to that value. Does that make sense? The common mistakes article shows more examples and adds more description behind why this happens. To fix this you could use a .fromTo() instead. 3 Link to comment Share on other sites More sharing options...
77ideas Posted July 14, 2020 Author Share Posted July 14, 2020 O my ... thanks a lot, that's not what I thought its working. I thought it's saving latest value after animation, so when I animate from 0->1 it saves 1 as a latest value. According to this case of latest cached values, could you @ZachSaucier tell me how can I get latest values after animating an element? E.g. I move some object to x:200 from it's css defined position, how can I get coords of this element after / during animation? I'd like to move some element from it's position to exact position (x,y) of other element. Is there any property responsible for that or should I try to catch these coords outside gsap lib using jquery / javascript ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Sorry, I'm having trouble understanding what you're asking. Can you please try to create a minimal demo that shows your issue? Building the demo from the ground up really helps in simplifying things: 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