Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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

  1. Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on. The problem: I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I push it doesn't move again. Surely is a much more simple problem than how I think but I would really want to know if is normal that doesn't work more than once. Here there is the code of the Tweens: $('#frecciaDx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:-200}}); }); $('#frecciaSx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:200}}); }); $('#frecciaSu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: 600 }); }); $('#frecciaGiu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: -600 }); }); Thank you really much guys!
  2. Hey everyone, I have hit a snag in my development. I have created a new timeline that i want to repeat once it finishes.It seemingly works but for some reason it doesn't start the repeat from the first tween but instead the second tween in the list tlMain = new TimelineMax({repeat:-1}); tlMain //I WANT the repeat to start from here in the timeline and play ALL tween below BUT... .fromTo(Pocket, 0.5, {scaleX: 3, scaleY: 3, autoAlpha: 0}, {scaleX: 1, scaleY: 1, autoAlpha: 1}) //Repeat seems to start here in the timeline instead, skipping the first part of my animation .fromTo(Pocket, 0.1, {scaleX: 1, scaleY: 1}, {scaleX: 1.04, scaleY: 1.04}, '-=0.05') .fromTo(Pocket, 0.15, {scaleX: 1.04, scaleY: 1.04}, {scaleX: 1, scaleY: 1}, '-=0.05') .fromTo(Crumbs1, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.15") .fromTo(Crumbs2, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.2") .fromTo(Crumbs3, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.3") .fromTo(LogoContainer, 1, {y: '-175px'}, {y: '0px'}) .fromTo(line1, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line2, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line3, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .repeat(-1).repeatDelay(2)//Repeat Call can anyone see why it repeats starting after the first tween instead of starting from the very beginning of the timeline?
  3. I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page. Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back Kind regards, Ryan
  4. Hey, I'm having some trouble with GSAP and the .staggerTo. The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! Here the code : for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseenter', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat"; videosBg.style.backgroundSize = "cover"; if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:-20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } else { tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } }, false); } for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseleave', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } else { tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:-20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } What i'm doing wrong ?
  5. Hello all, In my project, there will be many gsap timelines for different elements, and I will call them at different times. For these timelines will be used for many times, I want to save them in a global variables instead of calculated them each time. But it works with an unexpected behavior. It just run to the end state of the timeline directly without any animations. Does the timeline will be destoryed after animating each time?Any help very much appreciated! Just like the simple code below: var Timelines = {}; function getTimeline(_element, _props){ var tl = new TimelineMax({paused:true}); tl.to(_element, 1, _props, 0); Timelines[elementId] = tl; } $(el).click(function(){ var tl = Timelines[elId]; if(!tl){ tl = getTimeline(el, _elProps); } tl.play(); }) Looking forward to your reply. Thank you very much.
  6. Hi All I'm sorry if this is an easy solution but I couldn't find it and I'm totally new. I have several elements with an infinite rotation but for some reason is working only the first one. Here is my code: (function($) { var green = $('.green'), red = $('.red'), brown = $('.brown'), // tl = new TimelineLite(); tl = new TimelineLite(); tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15") .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15"); })(jQuery); Thank you so much for your help!
  7. Hi, all. I just started to learn GSAP, and I got a problem with the connection MorphSVGPlugin library. I use these plugins <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script> But when I watching moving about MorphSVG I could not connect properly library. Can you help me to fix this problem?
  8. im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance
  9. Hey guys, I just started using GSAP and so far I am very impressed. I am running into some performance issues though, so I could really use some help! I am working on creating a web application that is kind of like a guitar hero for piano. I need the application to be able to animate a bunch of rectangles downward at a constant rate (each rectangle represents a note in a song). I am running into some performance issues though, since a song can contain thousands of individual notes. I have created a codepen that demonstrates what I am talking about. There is a stutter once and a while that I cannot stand. Here is a link to the codepen http://codepen.io/MicahHauge/pen/EyJjGA?editors=0011 Let me know if you see a better way of doing this that will prevent the stutter. Thanks, Micah Hauge
  10. Hello guys, I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle... even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle due to this issue the animation isn't the same on both sides and it looks really weird. does someone know how to fix this issue? i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/ kind regards
  11. I am new to the study of GSAP. In the study a ready example of a HTML5-game ( GSAP ) I have a question. The method onComplete is passed to one callback function: ... onComplete: oneFunction Is it possible onComplete method to pass multiple callback functions? ... onComplete: firstFunction secondFunction For example, I have a task to hang on one event call multiple functions. Or is this way impossible and the only solution in this case is to call the callback functions in the chain - at the conclusion of one function this function calls another function and so on?
  12. I'm new to GSAP. I'm learning to work with the Draggable plugin. I can't understand the principle of the x and y properties of the Draggable plugin. I gave an example on Codepen to illustrate. Why when you click on the element block in the console returns a 0 value on the X-axis and the Y-axis? Because this unit is set to 20 on both axes. How is the calculation of the coordinates for this block?
  13. Hi guys, I just an article on the GSAP Blog about the "will-change" and Chrome issue with scaling images and after copying the codepen provided in the article I started to play around a solution that possibly could help lots of devs around. So, if you read this article http://greensock.com/will-change, you will see that the first image get blurry when scaling. I added "transformPerspective" and "z" properties on the animation and the scaling goes smoothly and works well. I have been using it for a while now and I hope you guys can find it useful as well. See the codes modified here: http://codepen.io/fernandofas/pen/jVyEpg Kind regards, Fernando Fas
  14. 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?
  15. Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
  16. Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner. I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow. have a look at my codepen to see what i am trying to achieve here: https://codepen.io/Caderial/pen/LbYRVZ What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops? Please advise. I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution. thanks everyone!
  17. Hi guys! I have been browsing through your banner inspirations: http://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?hl=html5%20banner and found this really nice particle animation created by user Oliver15Years: http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ I am refactoring it to create a steam animation but can't figure out how to kill the particle engine ("spawnSteam") in my timeline. I would like to ensure that the generator is being killed in my playEnd function. I tried adding spawnSteam.kill(); // but it didn't work.. Thanks so much everyone!
  18. Hi, I'm not an expert in GSAP and I have some troubles with my SVG animation. Indeed, I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547 My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes. Here is my JS code (the link to my codepen) : $(window).load(function () { $(function () { var first = $('#firstletter'), second = $('#secondletter'), competences = $('.competence'), // Sample script for Tweening on a Timeline tl = new TimelineMax({ delay:0, paused: false, yoyo: false }); tl.fromTo([first, second], 3, { drawSVG: "100% 100%" }, { drawSVG: "0% 100% ", ease: SlowMo.easeOut }); tl.fromTo(competences, 1, { opacity: 0, top: 0 }, { opacity: 1, top: "50%" }); }); $('#loader-overlay').delay(5000).fadeOut('slow'); // 5 sec de délai avant que la div ne disparaisse }); Thank you for your help
  19. The basic functionality: when a button is clicked, that button's corresponding target div animates in. Each button has it's own unique animation. Animations are declared outside of the click function, and the targeted animation elements should populated the animation when the click function is run. Problem is, it's not quite working for me... <ul> <!-- Search Trigger --> <li> <span class="trigger" id="search-trigger" >Search Trigger</span> <div class="reveal-recipient-container" id="search-container"> <div class="reveal-recipient" id="reveal-recipient-search">Target to reveal when I press Search Trigger </div> </div> </li> <!-- Nav Trigger - Target element sits outside ul --> <li> <span class="trigger" id="nav-trigger">Other Trigger</span> </li> </ul> <div class="reveal-recipient" id="reveal-recipient-nav" >This recipient is intentionally outside the ul containing the triggers</div> Here is my GSAP code. /// I want to store my animations OUTSIDE of the click function to keep the code clean var searchAnimation = new TimelineLite({paused:true, reversed:true}); var navAnimation = new TimelineLite({paused:true, reversed:true}); var duration = .3 searchAnimation.set(recipientContainer, { display:'block', autoAlpha:1}) .fromTo(recipient, duration, { display:'none', yPercent:'-100%', autoAlpha:0, ease: Back.easeOut.config(1.7)},{ display:'block', yPercent:'0%', autoAlpha:1, ease: Back.easeOut.config(1.7) }); navAnimation.fromTo(recipient, duration, { display:'none', yPercent:'100%', autoAlpha:0, ease: Back.easeOut.config(1)},{ display:'block', yPercent:'0%', autoAlpha:1, ease: Back.easeOut.config(1) }); $('#search-trigger').click(function() { recipientContainer = $('#search-container') recipient = $('#reveal-recipient-search') searchAnimation.reversed() ? searchAnimation.play() : searchAnimation.reverse(); }); $('#nav-trigger').click(function() { recipient = $('#reveal-recipient-nav') navAnimation.reversed() ? navAnimation.play() : navAnimation.reverse(); });
  20. So, I know this is going to be a huge wall of code (so maybe just go through to the codepen) but I'm having a very minor issue. For the most part, everything that I've coded works (albeit, likely very bloated and ugly code)... except: the very first animation when "Trigger 2" is pressed doesn't work. Every subsequent one does. The first, doesn't. My html is as follows: <ul> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-1">Trigger 1</span> <div id="reveal-recipient-1" class="reveal-recipient">Target to reveal when I press Trigger 1</div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-search" id="search-trigger">Trigger 2</span> <div class="reveal-recipient-container" > <div id="reveal-recipient-search" class="reveal-recipient">Target to reveal when I press Trigger 2 <input id="boom" type="text"> </div> </div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-3" id="nav-trigger">Trigger 3</span> </li> </ul> <div id="reveal-recipient-3" class="reveal-recipient">This recipient is intentionally outside the ul containing the triggers</div> CSS: .open { background-color:green; } li { float:left; list-style-type:none; } .reveal-recipient-container { //border:solid 1px red; height:120px; display:none; overflow:hidden; position:relative; } .reveal-trigger { padding:1em 2em; display:block; background-color:hsla(110,60%,50%,1); border-radius:3px; margin:5px; cursor:pointer; &:hover { background-color:hsla(110,60%,70%,1); } &.active { background-color:hsla(130,60%,40%,1); color:white; } } .reveal-recipient { position:absolute; width:100px; transform:translateY(-100%); display:none; background-color:white; padding:1em; box-shadow:0 2px 0 rgba(0,0,0,0.05); border:solid 1px rgba(0,0,0,.1) } And then, my loyal javascript: $(document).on('click', function(event) { if (!$(event.target).closest('.reveal-recipient').length){ if (!$(event.target).closest('.reveal-trigger').length){ TweenMax.to($('.reveal-recipient'), .3, {display:'none', y:'-100%', autoAlpha:0}); //remove open class from any open $('.reveal-recipient').removeClass('open'); $('.reveal-trigger').removeClass('active'); $('.reveal-recipient-container').hide(); } } }); $('.reveal-trigger').click(function(e) { //remove active class from other triggers $('.reveal-trigger').not(this).removeClass('active'); //toggle active class on this trigger $(this).toggleClass('active'); //get target element var triggerId = $('#' + $(this).attr('id')); var target = $('#' + $(this).attr('data-target-id')); var targetContainer = $($(target).parent().closest('.reveal-recipient-container')); // Animations if($(this).is('#search-trigger')) { var animation = TweenMax.to(target, .3, {display:'block', yPercent:'0%', x:'0%', autoAlpha:1, onComplete:function() { //once animation is complete, if the target has an input, focus on that input if(target.find('input').size() > 0) { target.find('input').focus(); } }}); } if($(this).is('#nav-trigger')){ var animation = TweenMax.to(target, .3, {display:'block', y:'0%', x:'100%', autoAlpha:1}); } //hide all elements of "target" class, except the current target if($('.reveal-recipient.open').not(target).size() > 0) { //TweenMax.to($('.target.open').not(target), .1, {display:'none', y:'0%', autoAlpha:0}); TweenMax.to($('.reveal-recipient.open').not(target), .3, {display:'none', yPercent:'-100%',x:'0%', autoAlpha:0}); //remove open class from target elements that are now hidden $('.reveal-recipient.open').not(target).removeClass('open'); $(targetContainer).delay(300).hide(0); } //if this element is now active if($(this).hasClass('active')) { //show current target element animation.play(); //indicate that this target class element is now open target.addClass('open'); $(targetContainer).show(0); } //if the element is no longer active else { //hide the target TweenMax.to(target, .3, {display:'none', yPercent:'-100%', x:'0%', autoAlpha:0}); //remove open class from newly hidden target element target.removeClass('open'); $(targetContainer).delay(300).hide(0); } });
  21. http://codepen.io/anon/pen/WGdWqL If I remove addPause line, the animations end as they should. With it, for some reason red (stalled) block goes nuts Could be that this is a bug? If I want to use addPause and modify red block in end of it's tween, how can I get around this?
  22. Hello! I am trying to figure out why this codepen (included), even though I have told it "force3D: true" in both the set() and to() methods, is not using "matrix3d" for the transform. I can't seem to figure out what the difference is between my codepen and the GreenSock codepen here: https://codepen.io/GreenSock/pen/kingu. Can anyone point me to the difference? Maybe I just keep missing something simple... Thanks, Frank
  23. Hello there, I am trying to call 3 different functions to animate 3 different animation in one shot through init() function. How I can achieve this properly. function init() { TweenMax.set("#object", {alpha: 0}); a(); b(); c(); } function a() { TweenMax.to("#object1", {x: "+=100px"}); } function b() { TweenMax.to("#object2", {x: "+=200px"}); } function c() { TweenMax.to("#objec3", {x: "+=300px"}); } Hopefully I will know the solution as soon as possible thanks gsap masters!
  24. I have code that looks something like this http://codepen.io/anon/pen/XjgVWN . The problem is, that addPause overwrites previous added addPause (with same time), and the callback is gone. Any tips how to make this work? How can I get both callbacks in same time? P.S. I cant create a Master function, with sub-functions in my case :/, my real project code is very dynamic.
  25. Is there any way to less this code? var tl = new TimelineMax({delay: 1}), visible = 1, hidden = 0, aveDur = 1; tl.to("#txt1", aveDur, {alpha: visible}) .to("#txt1", aveDur, {alpha: hidden, delay: 1}) .to("#txt2", aveDur, {alpha: visible}) .to("#txt2", aveDur, {alpha: hidden, delay: 1}) .to("#txt3", aveDur, {alpha: visible}) .to("#txt3", aveDur, {alpha: hidden, delay: 1}) Any suggestions are welcome!
×