Jump to content
Search Community

Opacity problems with ScrollTrigger

77ideas test
Moderator Tag

Recommended Posts

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

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. 

  • Like 3
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...