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

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

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. I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.
  2. I've made a small animation test, trying to mimic this simple effect My code is available here and this is a screen-capture recording the results. 4 browsers from left to right: IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance. I've used GSAP which uses a css plugin to animate the css properties via JS. Someone please tell me how this site is looking great even on IE11? It uses the same GSAP animation library as mentioned here... Any thoughts on techniques they may have used to improve the appearance of these animation? Footnote - I didn't add codepen since it didn't run my code correctly. I tried.
  3. Hi, GSAP is really impressive, but I'm searching for a tip to playing with visibility or display in svg. I make a 0s transition but it's look stupid tl.to('#el',0,{autoAlpha:0}); In my codepen I try to wink
  4. I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3: .loaded .main-menu .item:nth-child(1){ top:calc(50% - 25px); left:calc(50% - 25px); background-color:green; opacity:0; -webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); } @keyframes moveicon1{ 100%{-ms-transform:translate(0px,-160px) rotate(360deg); -o-transform:translate(0px,-160px) rotate(360deg); -moz-transform:translate(0px,-160px) rotate(360deg); -webkit-transform:translate(0px,-160px) rotate(360deg); transform:translate(0px,-160px) rotate(360deg); opacity:0.8;} } I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code: TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut}); An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap. if (!Modernizr.cssanimations){ // GSAP Codes } I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.
  5. Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){ timeline.play(offset); } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.
  6. Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
  7. Hi there, i love GSAP and use it in every project! I have a question, is there some "patterns" for common animations, like flip in x, or fade from bottom, fade and rotate In, bounce in left... you know, common animations to use right out of the box? For example, i know that this fade in from bottom: TweenMax.from(".element", 1, {autoAlpha:0, y:"50%", ease:Power2.easeOut}); Thanks guys, your are great!
  8. Hi folks, I am creating my prototype in Framer.js and using GSAP to animate the SVG in it. However the SVG inserted aren't detectable. Hence GSAP can't animate it? But I check the DOM, they are there. Weird? Framer.js spinner = new Layer({ width: 207, height: 207, backgroundColor: 'transparent' }); spinner.html = '<svg id="dots" xmlns="http://www.w3.org/2000/svg" width="207" height="207" viewBox="0 0 207 207">' + '<path id="top" d="M103,1A12,12,0,1,1,91,13,12,12,0,0,1,103,1Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="right" d="M193,91a12,12,0,1,1-12,12A12,12,0,0,1,193,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="bottom" d="M103,181a12,12,0,1,1-12,12A12,12,0,0,1,103,181Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="left" d="M13,91A12,12,0,1,1,1,103,12,12,0,0,1,13,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '</svg>'; GSAP function getSpinnerTimeline(){ var tl = new TimelineMax(); tl.to('#dots', 1, {rotation: 90}) .to('#top', 1, {y: 10, repeat: 1, yoyo: true}, 0) .to('#bottom', 1, {y: -10, repeat: 1, yoyo: true}, 0) .to('#left', 1, {x: 10, repeat: 1, yoyo: true}, 0) .to('#right', 1, {x: -10, repeat: 1, yoyo: true}, 0); return tl; } var mtl = new TimelineMax(); mtl.add(getSpinnerTimeline()); mtl.timeScale(2.5); mtl.play(); If I insert my SVG into HTML directly, it works like a charm. If I insert my SVG using jQuery, it works like a charm. But when I combine Framer.js + GSAP it doesn't work. Here I attach a screenshot of the generated DOM. The SVG with the id(s) are there.
  9. Hi everyone, I am new to using GSAP, but have used (the timeline) in Flash heavily. I've read the documentation and tried to follow it. For my first project using GSAP, I built a small banner ad to test some of the functionalities. It can be seen here: http://codepen.io/anon/pen/bEBxBB As for now, I have some questions about my code: 1. (How) can I chain the .set into one large string (so that they are all set at once)? For example: TweenLite.set("#box", {x:52, y:57}).set("#shadow", {x:127, y:52, autoAlpha:0}); Is this even possible? 2. I would like to move the #box, #shadow, #pack and #line simultaneously to the left, but in the code provided the animations start when the one before is finished... How can I fix this? Is it possible to be chained as well? tl.to("#box", .5, {x:-25, y: 62, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#shadow", .5, {x:55, y: 58, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#pack", .5, {x:70, y: 76, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); tl.to("#line", .5, {x:-10, y: 170, scale: 0.72, rotation:0.001, ease:Power2.easeInOut}); 3. If you have any other remarks, tips, optimisations or observations about my code, don't hesitate to give me a heads up! Thanks in advance for all your (kind) help!
  10. WANTED: An Experienced HTML5/JS Web Developer (who also specializes in using GSAP) Greetings GSAP Community, =D I am in the market for an experienced responsive, interactive, and/or animation web developer, who also considers themselves an expert in using GSAP? I am inexperienced in this field, but after researching to find exceptional information and reading many positive reviews holding GSAP in high regard, I am interested in hiring an experienced web developer to help bring an all-natural fully-layered vector map illustration to life on the web using GSAP? Basically, we have created an all-natural fully-layered vector map (perspective) illustration of an entire city/community/town/beach resort areas, but would love for it to have some constant moving elements and interactive elements to allow our target audience to become educated of how our business services operates? By chance, would anyone in the GSAP community forum have any recommendations on best way for us to find such a developer? Thank you very much for taking a few moments of your time to read my request for support in this matter and look forward to hearing from you. =) With Warmest Regards, Christopher
  11. Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
  12. I need some help with animating certain parts of my svg image when clicked on another part of the svg image. This is what I'm trying to do: When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. I think I'm on the right track but something isn't working.
  13. I have a question on the SplitText and ScrambleText plugins, which were briefly covered in Carl's (awesome) course last week. Is it possible to randomize the order of the animating type? For example, if I am using SplitText to spell "ANIMATE" character-by-character, is there a way to not have it animate 'A' then 'N' then 'I' etc?
  14. I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
  15. Hi there. I'm trying to call some code on an interaction, for example,on a close button click, but I want the code to execute only if certain conditions are met. I think I might have formatted that portion (the if statements) as AS3 (as that's what I'm more comfortable with). Can you take a look and tell me why my if statements aren't firing? It's a huge piece so a codepen would be tricky to recreate, but here is the code in question, hopefully it's enough to solve: function minimizeShoe() { //TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.to("#panel2_box1", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:0, delay:.2, transformOrigin:"left bottom", onComplete:layerShoe}); TweenMax.to("#panel2_info1", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus1", .35, {y:"+=386", delay:.2}); TweenMax.to("#plus1_2", .35, {rotation:"-=90", delay:.2}); scale1.removeEventListener('click', minimizeShoe, false); } function minimizeJacket() { //TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.to("#panel2_box2", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:167, delay:.2, transformOrigin:"left bottom", onComplete:layerJacket}); TweenMax.to("#panel2_info2", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus2", .35, {y:"+=386", x:"+=168", delay:.2}); TweenMax.to("#plus2_2", .35, {rotation:"-=90", delay:.2}); scale2.removeEventListener('click', minimizeJacket, false); } function minimizeFitbit() { //TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.to("#panel2_box3", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:333, transformOrigin:"left bottom", onComplete:layerFitbit}); TweenMax.to("#panel2_info3", .15, {y:"+=117", delay:.1, force3D:false}); TweenMax.to("#plus3", .35, {y:"+=386", x:"+=336"}); TweenMax.to("#plus3_2", .35, {rotation:"-=90"}); scale3.removeEventListener('click', minimizeFibit, false); } function layerShoe() { scaleText1.style.display = "none"; TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.set("#panel2_box1", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerJacket() { TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); scaleText2.style.display = "none"; TweenMax.set("#panel2_box2", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerFitbit() { TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus1", {css:{zIndex:501}}); scaleText3.style.display = "none"; TweenMax.set("#panel2_box3", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function ifStatements(){ if(scale1.position().y == 0) { minimizeShoe(); } if(scale2.position().y == 0) { minimizeJacket(); } if(scale3.position().y == 0) { minimizeFitbit(); } } function exitHandler(){ ifStatements(); } scale1, scale2, and scale3 are all variables of divs that get moved to the top - I want that checked with the if statement, and then it minimized using the minimize function I've created. It's all working great except the if statements they aren't executing properly. Hopefully this makes sense what I'm asking!
  16. Am using gsap inside createjs/canvas if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right. Is there a simple way to achieve that? Thanks
  17. mramsey

    GSAP in Celtra

    Hey all, I asked this question on an earlier thread, only to realize it was a poll. So here it goes again: I'm new to using the Celtra platform and know very little JS (more a designer but very familiar with GS for Flash). Is there anyway you can send me the code block that you inserted into the Execute JS event to get you up and running with GSAP In Celtra. Do you add it to the screen you're on, or on a Frame Div? I've tried many options, watched the Custom Development webinar and I still can't seem to get it to work. Thank you in advance! Marc
  18. It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!
  19. Hi, guys. I am quite new to GSAP. The system is really solid, however, I ran into a small problem. I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu. THE PROBLEM: The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here. Here is the code: Codepen: http://codepen.io/arthurleonov/pen/ZbPrLX var menu = $('.js-menu'), menuContainer = $('.menu-container'), menuItems = $('.js-menu-items h3 a'); var tl = new TimelineMax({ paused: true, reversed: true, }); // set new timelinemax // container animation tl.from(menuContainer, 3, { x: '-1000', autoAlpha: 0, force3D: true, ease: Power3.easeOut }) // text animation tl.from(menuItems, 2, { x: '-600', autoAlpha: 0, force3D: true, ease: Expo.easeOut }); // toggle animation $(menu).on('click', function() { tl.reversed() ? tl.play() : tl.reverse(); }); Thanks in advance!
  20. Hello all, I am new to GreenSock and the forum. I must say I am loving it! We are doing a Cordova mobile app with React. We started using GSAP for all the animations. This works great in Ripple and also physical Android devices. Even older Android devices, which we were sure were going to be a problem, everything is running super smooth. The problem is with iOS devices. We have tried iPhone 5S with both iOS 8.x.x and 9.x and also iPhone 6 and 6 Plus and on all of them performance is really bad. Animations are chopping up and stuttering all over the place. I tried adding the translate3d transform and also adding force3D to the options object and nothing helps. In the codepen the red div slides down more than one screen length and I know this is a lot of pixels to animate, but what works fine on an S3 I would expect to work better on an iPhone 6. Any tips for me? Thanks!
  21. Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }
  22. I have some troubles with progress and totalProgress methods. When you hover wave, penguin will go to your cursor position. I want: if cursor position to the left than penguin, penguin must follow by cursor, but now his animation continues. Also I need that penguin make backflip when his position and cursor's position are equal. Also when cursor leave wave picture, he must go on the top of the wave and drifting on the waves. But all of it after. Thank. Sorry for my English. http://codepen.io/anon/pen/gaeoEy
  23. Hi all, This is a basic question that I've yet to find answered... how do site administrator's implement GSAP banners? I've prepared a test banner file set, based on the example banners on Greensock's site, and the administrator is unsure how to use it. What are the best practices for serving GSAP banners? Thanks!
  24. I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB
  25. Hi there. I'm working on an ad (can't share the actual images for) The behavior is different in IE9 from all other browsers. (i don't have access to test on anything above IE9) I haven't encountered this issue before. In addition, these are transparent png with drop shadows, the drop shadows fill while it's animating. As you can see from the following code: var i = 0; var a = 1; var d = .5; var d2 = .55; var d3 = .56; var t = .5; var tt = .25; var e = Power2.easeOut; TweenMax.set("#container", {alpha:a, ease:e}); TweenMax.to("#jacket", t, {y:35, x:-20, delay:d, ease:e}); TweenMax.to("#helmet", t, {y:66, x:-14, delay:d3, ease:e}); TweenMax.to("#goggles", t, {x:-105, y:10, delay:d2, ease:e}); TweenMax.to("#boots", t, {y:-6, x:16, delay:d2, ease:e}); TweenMax.to("#shirt", t, {y:-5, x:98, delay:d, ease:e}); TweenMax.to("#shoes", t, {x:-40, y:2, delay:d2, ease:e}); //TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e}); TweenMax.to("#txt1", tt, {alpha:i, delay:2}); TweenMax.to("#txt2", tt, {alpha:i, delay:2.1}); TweenMax.to("#txt3", tt, {alpha:i, delay:2.2}); TweenMax.from("#txt2_1", tt, {y:25, alpha:i, delay:2.3}); TweenMax.from("#txt2_2", tt, {y:35, alpha:i, delay:2.4}); TweenMax.from("#bar", tt, {y:35, alpha:i, delay:2.5}); TweenMax.from("#txt2_3", tt, {y:35, alpha:i, delay:2.6}); TweenMax.from("#cta", tt, {y:35, alpha:i, delay:2.7}); I'm doing tweens on divs moving them based on their x and y positions. Looks great in everything but IE9 as I mentioned above. If you watch for example, the direction the #shirt div moves in any browser and then try in IE9. Moves in the opposite direction. Any suggestions? I tried switching the x and y to left/right top/bottom to no avail. I know MSFT is not supporting IE and I'm trying to guide my work off of 9, atleast, but in the meantime I could use some help. Thanks in advance for any tips.
×