Jump to content

Search the Community

Showing results for tags 'buttons'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 4 results

  1. Hi there, I am trying to make some fancy hover action on my buttons. At the moment I have two buttons side by side and the animation already works as intended. Neverthless I have the problem that once I hover one button the other button animates aswell. I would like just to animate the button, which the user hovers. Could you check my code below, which is orienated on this topic (https://greensock.com/forums/topic/13384-timelines-are-objects-or-values/) and tell me where I am wrong? (function($){ var button = $('.irp_button'), a = $('.inner1'), b = $('.inner2'), c = $('.inner3'), d = $('.inner4'), e = $('.inner5'), m = 0, n = 50, o = "center", p = null; // loop through element button.each(function(i, el) { // create timeline for this element in paused state var tl = new TimelineMax({paused: true}); // My Timeline - create tween of the timeline in a variable var t = tl .set(el,{willChange:"transform"}) .set(c, {width: 200,right: 500}) .set([e, d], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20}) .set(e, {rotationZ: "45deg"}) .set(d, {rotationZ: "-45deg"}) .to(a, .2, {opacity: 0,left: 15,ease: Sine.easeIn}) .to(c, .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1) .to(c, .5, {width: n,ease: Expo.easeOut}, .3) .to([e, d], .2, {opacity: 1,ease: Sine.easeOut}, .35) .to(e, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) .to(d, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) // to right animation tl.addLabel("midpoint", .8), tl.add(function() { tl.stop() }, "midpoint"), tl.set(a, {left: -15}, "midpoint0.31"), tl.to([c, d, e], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"), tl.to(a, .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"), tl.to(a, .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"), tl.stop(); // store the tween timeline in the javascript DOM node //el.animation = t; $(el).data('someTimeline', t); //create the event handler $(el).on("mouseenter",function(){ //this.animation.play(); null !== tl && (tl.seek(0), $(this).data('someTimeline').play()) }).on("mouseleave",function(){ //this.animation.reverse(); null !== tl && (tl.time() >= tl.getLabelTime("midpoint") ? tl.play() : tl.reverse()) }); }); })(jQuery); Thanks in advance
  2. Link: http://higherskies.com/v2.1/ First time submitting to the forums. Real quick want to say I'm loving GSAP. If you follow the link provided, the page loads and I have a timeline controlled welcome text and continue button animate onto the screen. What I'm trying to achieve is when I click the continue button it will then scroll to the next section of the page, the "Who We Are" section... In my sidebar when I click on "Who We Are" button it smoothly scrolls to the appropriate Anchor tag. How can I get the same result with the timeline function: continueBtn() here is my timeline code: <script> var introText = document.getElementById("introText"); var introBtn = document.getElementById("introBtn"); var welcomeText = document.getElementById("welcomeText"); var logo = document.getElementById('logoBtn'); var welcomeBtn = document.getElementById('welcomeBtn'); var whoWeAreBtn = document.getElementById('whoWeAreBtn'); var servicesBtn = document.getElementById('servicesBtn'); var contactBtn = document.getElementById('contactBtn'); var t1 = new TimelineLite(); t1.staggerFrom([introText,logo,welcomeBtn,whoWeAreBtn,servicesBtn,contactBtn],0.25,{ x:950, opacity:0, ease: Expo.easeOut,delay:1},.25 ); t1.to(welcomeText,.02,{transformPerspective:800}); t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut}); t1.from(introBtn,.75,{ rotationX:-90, transformOrigin:"left top", ease: Bounce.easeOut} ); function welcomeTextHover() { t1.to(welcomeText,.75,{rotationY:0,overwrite:"all"}); } function welcomeTextHoverOut() { t1.to(welcomeText,.75,{rotationY:20,overwrite:"all"}); } function continueBtn() { t1.to(introBtn,.25,{ x:-900, ease: Expo.easeOut} ); t1.to(introText,.25,{ x:900, autoAlpha:0, ease: Expo.easeOut} ); // wait for animations to play out then scroll to next section. } </script> Thanks for any help you can offer. I hope I was descriptive enough. ~Nick
  3. Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });
  4. Hi all. I've been using GSAP with flash for a bit so I understand the basic functionality, but I can't seem to figure out how to interact with buttons in html5 (I'm also not very familiar with javascript.) On all the demos I've seen, there are just buttons that just randomly are on the page to trigger animations. How do I make buttons/trigger my functions and tweens? (in Flash I could just make anything a button and name it, I've tried do a similar thing with giving elements id's but to no avail) And follow up, how do I make a button move? (If anyone has a simple file with a button that you click and it moves across the page that would be very helpful.) Thanks