Search the Community
Showing results for tags 'toggle'.
Found 18 results
-
Hi, I’m new here and I’m trying to have a fixed header fade out upon scrolling down, with a button to have it fade in and out manually (if scrolled down). I’ve got the fade-on-scroll part working but I’m struggling with the fade toggle. I thought I would create some tweens and two independent timelines to which I add the tweens (with different timing in each timeline), and then I associate one timeline with ScrollTrigger and the other one will be executed on click of the button but somehow this doesn’t work. Note, I’m using this in combination with jQuery This is the code I have so far: var anim_header = gsap.timeline({ scrollTrigger: { trigger: $('body'), scrub: true, //markers: true, start:'top top', end: '+='+$('body > header').outerHeight()*1.75+'px' } }), toggle_header = gsap.timeline().pause(), fadeHeader = gsap.to($('body > header'), { opacity: 0 }); anim_header.add(fadeHeader); toggle_header.add(fadeHeader); toggleButton.click(function() { if(!$('html').hasClass('header_active')) { toggle_header.reverse().then(function() { $('html').addClass('header_active'); }); } else { toggle_header.play(); $('html').removeClass('nav_active'); } }); I thought I could just add the same tween to different timelines and they would work independently but apparently this isn’t working; it seems like one timeline overrides the other one.
-
Hi. Im porting over an example created in this forum demonstrating toggling an animation using Gsap 2.1.3/TweenMax.min Im trying to recreate the same toggling function using with Gsap 3.4.2/gsap.min. I've kep the code the same except change new TimelineMax() to gsap.timeline() , but im getting a jump at the neginning of the animation. Original pen here Hope you can help.
-
Hello guys, i need some help for a "simple" script that's driving me crazy... I've put an example on my code on codepen: https://codepen.io/SaverioGarzi/pen/wvMLYMJ The example is simulating the final results, but the code is messy, i would like to have a Timeline, instead of a simple tween, i have to add more feature with the click... The timeline should be play when i click on the accordion head, and reversing when i click again on the same accordion... But it shoud also reverse when i click on another accordion... I can't figure out the logic. This is what i'm using now: var togg = document.getElementsByClassName("service-card"); var i; for (i = 0; i < togg.length; i++) { togg[i].addEventListener("click", function() { $('.service-card').not(this).removeClass('service-active'); var $this = $(this), icon_plus = document.querySelectorAll('#services-plus'), actual_icon_plus = $this.find('svg#services-plus'); gsap .to(icon_plus, { rotate:0, duration:1, ease: "elastic.inOut(1, 0.5)" }); this.classList.toggle("service-active"); if($(this).hasClass("service-active")){ gsap .to(actual_icon_plus, { rotate:45, duration:1, ease: "elastic.inOut(1, 0.5)" }); } else { } }); } i've searched in the forum, and i found this snippet, tl.reversed() ? tl.play() : tl.reverse(); but i was not able to implement it... Can someone give me a hand with that? Thanks Petar
-
I have a React component that I'm trying to toggle the width of when a button is clicked. When the button is clicked again, it goes back to the original width. The problem is the original width could be anything, depending on the viewport size as it's responsive. On small devices it's 75%, large it's 25% with a few others in the middle. There's also another animation that animates the opacity and position of the element I'm targeting here. Here's what I have so far; useEffect(() => { const tween = gsap.to(slashRef.current, { width: '100%', ease: 'power3', paused: true, }); if (menuOpen) { tween.play(); } else { tween.reverse(); } }, [menuOpen]); I've tried starting it as paused, and when the `menuOpen` is true it animates the width fine. When it's `false` it's not reversing it back to its original position as I would expect — clearly I'm missing something. I've tried a bunch of different approaches using state and ref to set the original width and trying to access that but I've had no joy so far. I'm sure it's something simple I'm missing. Thanks for any help, Chrish
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too. Watch the video Explore the demo See the Pen Toggle Play Pause by GreenSock (@GreenSock) on CodePen. Core code tl.pause() // pauses the animation tl.paused() // gets paused state, returns true or false tl.paused(true) // sets paused state to true tl.paused(!tl.paused()) // sets paused state to inverse of current paused state. // reverse methods tl.reverse() // reverses the animation tl.reversed() // gets reversed state, returns true or false tl.reversed(true) // sets reversed state to true tl.reversed(!tl.reversed()) // sets reversed state to inverse of current reversed state. -
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
-
Hi all, i've a little problem i tried to resume in the attached codepen. Say i've layout made of many containers, and i have an image i want to be displayed with an animation, a vertical toggle. The very same code, only works if i've set, at JS line 29: .from($target.find(".myImage"), 0.5, { width: 0, ease: Power3.easeOut }) while it does not, most of the time, if i try: .from($target.find(".myImage"), 0.5, { height: 0, ease: Power3.easeOut }) What am I missing?
-
Hello fellow animators. I've been learning g sock for about a week now and I got stumped. So, I figured I'd join you guys who are all way smarter then me In my first project, I'm working on a hidden navigation that reveals on user interaction. My codepen is what I've got so far. I have my first animation button that opens fine, but I can't quite figure out how to get my timeline 3 to close it back to its initial state. ('tl3.reversed(!tl3.reversed())' is not working for some reason.) Any way, I thought I'd give these forums a try, thanks for reading, gregg
-
I am trying to add a class into an SVG object, inside a foreign object area. The purpose is to add a class at the trigger point and tell that class to fade the section in (see css for .foreigntext and .foreigntext.fade-in). http://codepen.io/c308marketing/pen/WRVyzv It works great in Chrome, but it doesn't work in Safari. Is there a known issue with safari? Or do I have my code stated incorrectly. Any help would be appreciated. You will see the CSS style
-
Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!
-
Hi, Newbee here, I'm looking for the simplest way to toggle back and forth [ morph ] between two svg icons. That's it... Thank you for your time!!!!! -
Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });
-
Hello and thanks and congratulation for this amazing tool. Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working: http://codepen.io/Rofizzle/pen/myGyJM So, I ended up using a snippet from a greensock demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?
-
Is there a way to use TweenMax to repeatedly toggle a property between two values without tweening intermediate values? Let's say I want to continuously toggle an img tag, used as a sprite sheet, between top:0% and top:-100%? I've achieved this by using delayedCall, but it's cumbersome and requires three separate functions.
-
Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!
-
So I'm wondering how I can create a menu like this (Yes, I did kinda copy stagger example from GSAP sorry) but for the .btn elements to initially not display (ie; display:none instead of just no size). then when the 'Click' button is pressed, the .btn elements animate onto the screen. I can get it to work once but after i have clicked one of the buttons and they off, they will not come back. Any help would be greatly appreciated.
-
The code below drives a button that toggles various div s on the page on and off, and changes it own visible state - from dellie to tellie: It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear. Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states. $("#dellie").click(function(){ TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut}); TweenLite.to("#dellie", 0.0, {opacity:0}); TweenLite.to(".inacc", 0.5, {opacity:0.4}); TweenLite.to(".note", 2.5, {display:"block", ease:Back.easeOut}); }); $("#tellie").click(function(){ TweenLite.to("#tellie", 0.0, {opacity:0}); TweenLite.to("#dellie", 0.5, {opacity:1}); TweenLite.to(".note", 2.0, {display:"none", ease:Back.easeOut}); TweenLite.to(".inacc", 0.5, {opacity:1}); }); Thanks
-
Hi guys! I'm basically new to JS. I want to know how can I make the element unclickable while the tween is ongoing? Thanks!! <script> function init() { var r = document.getElementById("test"); var rh = document.getElementById("test").offsetHeight; var rh2 = document.getElementById("test").offsetHeight; r.onclick = function tog(){ if(rh <= rh2){ TweenMax.to(r, 1, {width:"-=100", ease:Cubic.easeOut}); rh2 = document.getElementById("test").offsetHeight; } if(rh > rh2){ TweenMax.to(r, 1, {width:"+=100", ease:Cubic.easeOut}); rh = document.getElementById("test").offsetHeight; } } } </script>
