Search the Community
Showing results for tags 'vanilla'.
Found 2 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
-
Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable plugin and this is my achievement by now I am trying to replicate this Drag & Drop Library: http://sunpietro.github.io/dragster/ -1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element -2) Smooth drop animation -3) CloneBase -> Only draggable option / Copy elements from here, no possible to drop options -4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted -5) Trash zone -> Only drop zone to remove elements So i started by the point 1 & 2, and it gets weird how the element is dropped. Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my slots, i guess i have to move into the slot after the transition. as i said, the animation is weird, not smooth like this one, and the code is basically the same. So i have a clone-base at the top, and the elements would be draggables & copies from there, to put into my grid. Can you help me first with the Weird animation & the cloneZone. Or if there is a sample case ( i didn't find it i would love to use it as a guide ) thanks in advance.
