Search the Community
Showing results for tags 'show'.
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
-
For some clarification: Sorry didnt translite the id's to english. rood1 = circle2 rood2= circle2 lijn1 = the line i want to animate and reveal the part slowly.
-
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?
