Search the Community
Showing results for tags 'hide'.
Found 3 results
-
html <button class="btn">Show / Hide</button> <br><br> <div class="box"></div> css .box { width: 100px; height: 100px; background-color: blue; opacity: 0; } javascript const btn = document.querySelector('.btn'); const box = document.querySelector('.box'); const showBox = new TimelineMax({paused: true}); //alias for brevity const sb = showBox; const hb = new TimelineMax({paused: true}); //hidebox btn.addEventListener('click', function(){ if(box.classList.contains('active') !== true) { sb.play(); sb.set(box, {opacity: 0, y: 0}); sb.fromTo(box, 0.5, {opacity: 0, y: 0}, {opacity: 1, y: 0}); box.classList.add('active'); } else if(box.classList.contains('active')) { hb.play(); hb.fromTo(box, 0.5, {opacity: 1, y: 0}, {opacity: 0, y: -100}); box.classList.remove('active'); } }); New to the forum. I am looking to be able to show an element with one tweened animation and hide with a different animation by clicking the same button. In this case the show is a fade in and the hide is a fade out with a vertical translate. I tried by toggling the .active class and conditionally show or hide based on whether box has the class or not. I have only got it to work once (toggle on off for two clicks) and then it stops. Can someone tell me where i'm going wrong. I want to be able to keep this vanilla js, thanks. demo
-
Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?
-
Hello.! GreenSock _ _ _ I have two layers. On bottom layer, I have several buttons, on top layer, I have a shape inside "test" MovieClip import com.greensock.*; import com.greensock.easing.*; TweenMax.to(test, 0, {dropShadowFilter:{color:0x000000, alpha:0.6, blurX:5, blurY:5, strength:1, angle:135, distance:4, inner:true, hideObject:true}}); This code works very nice but I can't have access at the buttons of bottom layer. How to complete hide the "test"? - stay visible the inner shadow and access bottom layer buttons? I was testing various properties with no chance Hope there is a solution Thanks Sakar
