Jump to content

Search the Community

Showing results for tags 'trigger'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 15 results

  1. With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip
  2. Hello, I'm a newbie, I'm working on a push menu, but it doesn't trigger menu item animation on the first click. I need some help Thank you!
  3. Guest

    ScrollMagic - TweenMax vs Timeline

    I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You
  4. Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
  5. Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan
  6. Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport?
  7. Hi, I'm new at JS and would appreciate if someone could take a look how can i start the animation auto on web page load? I tried to implement trigger at the end but it did not work. $(tTog).trigger("click"); I think this is the key part of code: $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); All code: var sun = $("#sun_3_"), cloud1 = $("#cloud1"), cloud2 = $("#cloud2"), cloud3 = $("#cloud3"), gauge = $("#gauge"), wheel = $("#wheel"), city = $(".city path"), tTog = $("#top-toggle"), sTog = $("#side-toggle"), bkFar = $("#bk-far"), bkMid = $("#bk-mid"), but1 = $("#button1"), but2 = $("#button2"), controls = $("#controls path"), mult = [controls, bkFar, bkMid, city, extras], body = $("body"), extras = $(".extras path"); TweenMax.set(wheel, { transformOrigin: "50% 50%" }); TweenMax.set(city, { visibility: "visible" }); //animation that's repeated for all of the sections function revolve() { var tl = new TimelineMax({ repeat1: -1 }); tl.add("begin"); tl.to(sun, 15, { transformOrigin: "50% 50%", rotation: 360, repeat: -1, ease: Linear.easeNone }, "begin"); tl.to(cloud1, 10, { x: -110, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud2, 10, { x: -70, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud3, 10, { x: -50, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); return tl; } var repeat = revolve(); //bring it in function cityIn() { var tl = new TimelineMax({ paused: true }); tl.add("in"); tl.from(tTog, 3, { rotation: -30, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "in"); tl.staggerFrom(city, 0.75, { y: -50, scale: 0, cycle:{ x:[300, 100, 200], opacity:[0.5, 0.3, 0.2, 0.8], rotation:[50, 100, 150], }, transformOrigin: "50% 50%", ease: Back.easeOut }, 0.02, "in"); tl.staggerFrom(extras, 2.5, { x: 300, scale: 0, transformOrigin: "50% 50%", rotation: -30, ease: Elastic.easeOut }, 0.1, "in"); tl.from(bkFar, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in"); tl.from(bkMid, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in+=1"); tl.from(gauge, 2, { rotation: 180, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "in"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "in+=3"); return tl; } var fullIn = cityIn(); //side toggle perspective function perspective() { var tl = new TimelineMax({ paused: true }); tl.add("per"); tl.from(sTog, 1, { rotation: -30, transformOrigin: "100% 50%", ease: Circ.easeInOut }, "per"); tl.to(bkFar, 1, { y: -30, scaleY: 0.8, opacity: 0.4, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.to(bkMid, 1, { scaleY: 1.6, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.from(gauge, 0.5, { rotation: 60, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "per"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "per+=0.5"); return tl; } var side = perspective(); //button hue function hued() { var ch1 = "hsl(+=110%, +=0%, +=0%)", tl = new TimelineMax({ paused: true }); tl.add("hu"); tl.to(mult, 1.25, { fill: ch1 }, "hu"); tl.from(gauge, 2, { rotation: "-=70", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "hu"); tl.to(body, 1.25, { backgroundColor: ch1 }, "hu"); return tl; } var hue = hued(); //button saturation function saturation() { var ch2 = "hsl(+=5%, +=2%, -=10%)", tl = new TimelineMax({ paused: true }); tl.add("sated"); tl.to(body, 1, { backgroundColor:ch2 }, "sated"); tl.from(gauge, 2, { rotation: "-=100", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "sated"); tl.to(mult, 2, { fill:ch2 }, "sated"); return tl; } var sat = saturation(); $(document).ready(function() { Draggable.create(wheel, { type: "rotation", bounds: { minRotation: 0, maxRotation: 360 }, onDrag: function() { fullIn.progress((this.rotation)/360 ); fullIn.pause(); } }); $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); $(sTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('s-pers'); if ($(this).hasClass('s-pers')) { side.restart(); } else { side.reverse(); } }); $(but1).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-s'); if ($(this).hasClass('a-s')) { sat.restart(); } else { sat.reverse(); } }); $(but2).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-h'); if ($(this).hasClass('a-h')) { hue.restart(); } else { hue.reverse(); } }); });
  8. I'm trying to customize my Mailchimp validation Upon successful form validation, a 'thank you/almost finished' overlay is revealed with .show(), but i wanted to animate how it appears with GSAP. How can I call/trigger a GSAP animation from this mc-validate.js ? if (resp.result == "success"){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').css({"width": "80%", "padding": "3% 5%"}); $('#mc-embedded-subscribe-form').each(function(){ this.reset(); }); }); Thanks so much.
  9. i can set up a trigger area and get it to work, but if there are more than one draggable elements on a page then moving one item using the trigger area move both items together, things i have tried that have not worked trigger area as class (div header) only having one div having a trigger property setting two unique ids for trigger areas loading the div separately any ideas of what else I could try???
  10. Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
  11. I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?
  12. I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <!-- these 2 were added after page load, but don't work like the others do as a trigger --> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding? Thanks!
  13. Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before
  14. Hi guys, I am working on a drag and sort thing with draggable and i have an issue that i can't find a way around it. Actually it looks like a bug. Items are in an unordered list so they are all identical in terms of child elements and class names. Draggable seems to work find with a class selector. Here's a code pen with just a simple setup. There is no drag trigger. http://codepen.io/ap-o/full/CEHBo But, once i pass a trigger selector everything goes wrong. Try to drag the little black box. http://codepen.io/ap-o/full/qfKtm Thanks in advance for your time *Apo
  15. Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi