Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'button'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 13 results

  1. I'm looking to create an effect, but honestly I'm not sure where to start. I'm wondering if I should create a shape with CSS and attempt to animate that or if I should make an svg of both shapes and use morph to change between the two shapes on hover. So basically on hover the shape needs to turn from a circle into more of a pill shape and the opacity needs to change (which should be the easy part). Any suggestions on the best method for accomplishing this would be appreciated! Thanks, Sam
  2. Good evening, I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? any advice appreciate. thank you.
  3. Hi all, I've been wanting to try out a new hover animation for a button. Basically, I'm wanting a generic SVG to be hidden above the button. Once you hover over it, it should animate down until it covers completely and pauses. When you hover off, it should continue to animate down until it is out of sight. My problem is that when you hover off and it animates out of sight, I can't get it to start over/repeat every time you hover over it. I've tried multiple ways to get it to work and have failed. The pen I added for this topic is the simplest/cleanest version I have. Any help is greatly appreciated!
  4. I'm trying to create a specific button effect when you hover over it. See Image Attached Basically once you open hover on the button it opens on the right and the arrow slides out right. Is there a way to open both ends at the same time on hover for the SVG?
  5. Hi everyone, Could someone help me, I want to make a button effect like in this example. Please see the top-left circle menu: http://www.superbeparis.com/#!/ On mouse enter button follow the mouse and scale and on mouse leave animate to the initial position. Thank you guys
  6. Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo
  7. Might not be specific to GSAP, but: You'll notice when the button is clicked and the function is fired, it seems to remove it's functionally. See in example Thanks
  8. Hi folks, I'm really new to all this, but from all your tips I managed to build my first timeline. However, the good old client is turning my banner into a bit of beast and I'm struggling. Think I'm out of my depth a bit, so your help would be much appreciated! I really need your help with following: 1. <button id="infoBtn"> to start my second timeline when clicked 2. <button id="closeBtn"> to go to <div id="f4"> when clicked 3. my buttons to sit above the clicktag My code is probably in a right mess – but please bear with me, I know its a bit of hack (your thoughts would be much welcomed). Anyway, heres the Codepen to all this: http://codepen.io/jimcam/pen/VKaoqQ Thanks in advanced!!!
  9. Be possible to control from most to least the brightness and contrast a movie with TweenLite using two buttons?
  10. I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck... Here is my pen: http://codepen.io/vincentccw/pen/bfojB?editors=101 I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button) Thanks for the help in advance
  11. Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales
  12. 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
  13. Greetings, Thank you for reading, and for any insight anyone can offer. It is appreciated. I adapted the code from this demo on codepen: http://codepen.io/GreenSock/pen/bpezc ... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal). This works: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) ); }); $("#pause").click(function() { //alert("Pause Button"); tl4.pause(); //tl4.play(0); }); } This does not: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); //tl4.restart(); tl4.play(); }); } Nor does this: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); $("#play").click(function() { tl4.play(); }); } It only works if the timeline is put in the function of the button ... but in codepen: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function } Obviously, I am missing something. Thanks for any guidance offered. Steve
×