Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

autoAlpha and full hiding the item...

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a set of images that go horizontally, depending on the category it shows different ones, and you can scroll left to right...


the trouble I am having is that when I use autoAlpha on items that have been set with visibility:hidden, when I set autoAlpha to 0 the images never fully disappear... so even if the last visible image was at 2000px you can still scroll to 4000 pixels because there is still an image there, even though it is 'invisible'


What is the best way to handle this? set them to display:none after they finished their autoAlpha to 0, or am I missing something?


PS I'm learning so much from this forum, so thanks to everyone who has helped me thus far!



Link to comment
Share on other sites

Hello.. Do you have a code example so we can see what you are describing?


There maybe some other CSS overriding your styles.. so they are not fully displayed. You could try to set display none after the animation.. but i think there is something else that might be causing the autoAlpha:0 element to still be visible.. since with opacity zero and visibility hidden, it should still hide your elements.


Is it possible that you could make a codepen demo example, this way we can see your code in action.


Video tut by GreenSock on How to create a demo codepen example.


Thanks! :)

  • Like 1
Link to comment
Share on other sites

If you add display:'none' to your autoAlpha tween, display will automatically toggle to 'none' at the very end of the tween. Likewise, if you tween from display:'none' to 'block', or 'inline', the toggle will happen at the very start of the tween.

TweenLite.to(foo, 1, { autoAlpha: 0, display: 'none' });
// fades out then sets display:'none' at the end
  • Like 1
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.