Search the Community
Showing results for tags 'show hide'.
Found 3 results
-
Hi! Im new in gsap. I have an object in css. Initially i hide this object using display none & opacity 0 in css. Now in animation i want to show the object for a few seconds & hide it back smoothly. Now i have done the show animation using tweenmax. But the problem is, I cant hide it back smoothly... Can u give me any solutions? //CSS #skills .screens .small-box #hide { display: none; opacity: 0; visibility: hidden; } //Javascript var show_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, { delay: 2.5, display: "block", opacity: 1, visibility: "visible" }); -
Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.
-
So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.
