Search the Community
Showing results for tags 'gsap'.
-
I'm trying to make a parallax elements/background like here http://www.samsung.com/global/galaxy/wearables/gear-vr/ Is that use GSAP?
-
Hello all, I am new to GreenSock and the forum. It's really amazing. I love it so much. I am trying to use TimelineLite in my new project, but I have encountered a problem about getting the calculated styles of function progress. For example, I have set 'x' from '0' to '200', and when I use the function progress(0.5),I want to get the data '100' of 'x'. I know maybe I can just get the data from inline styles of DOM, but some properties such as 'transform',which has transferred to matrix, can not be gotten independently.So I want to know if there is a better way to get the accurate styles data object. Any tips for me? I am sincerely looking forward to your reply. Thank you very much.
-
I am unable to get the callback functionality to work while using Meteor framework. I have copied functions straight from the GSAP docs and i still get type error: this._callback is not a function. I have tried everything and looked everywhere for a solution but no dice. Please, any help would be greatly appreciated. If callbacks don't work with Meteor or i am just flat out doing something wrong please let me know. I would add a codepen but i don't believe they have a Meteor framework to use. Template.home.rendered = function(){ TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5, myCompleteAll ); function myCompleteAll() { console.log("all tweens complete"); } }
-
Hi all. Quick question. I'd like to tween the kerning/letter spacing on a line of text. Got it working but have a couple specific inquiries. I wasn't able to locate the exact documentation for the letterspacing tween effect. My line of code is: TweenMax.fromTo("#text1", 1, {letterSpacing:20, alpha:0}, {letterSpacing:10, alpha:1}); I'd like to add a delay and also I want the text to tween from the center rather than from the left - how do I do that as well? Here is the CSS: #text1 { font-family: 'Anderson 1938', 'anderson_1938regular', 'Helvetica', sans-serif; font-size:28px; font-weight:400; letter-spacing: 10px; color:#fff; position:absolute; top:38px; left:121px; text-align:center; z-index:10; } I thought maybe the text-align:center; would get it to animate from the center but no such luck. Thanks in advance for any direction!
-
Hi everyone, When animating a div to move up from the bottom, there is a large blank space left at the bottom where the div that was animated was. Does anyone know how to fix this or get rid of the space? Thanks!
-
I created a simple timeline following a tutorial, but the animation doesn't run and I keep seeing this in the console: Uncaught ReferenceError: TimeLineLite is not defined Here's my pen: http://codepen.io/omarel/pen/mPEmpe
-
Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam
-
hello everyone, i got another trouble and i hope anyone of you can help me. i get one svg, there are six circle inside of it and i want to move the pink to the right with left property but i doesn't work. it worked when i changed the left with x. so what is the trouble?
-
Hi Does anyone know how the spinning browser icon was made on the GreenSock homepage. I've done a number of tutorials, but haven't come across it yet. Thanks!
-
hello everyone, i'm wondering how can i centering my svg object exactly in the center of the screen. I give a style for my svg like position: absolute, top:0,left:50%, transform: translate(0,-50%). how can i move it to the center of the screen with gsap?
-
Hey guys! I am working up a new animated banner for my boss's site. I have 4 banners. Each one animated in to view and animated out of view. I just finished all their animations. I commented out the js and html for each individual banner while I worked on the animation. They are strung together as once leangthy animation due to my lack of knowledge with JS and Gsap but think it should work okay. However when I removed all my commented out JS and HTML to string all the animations together to play in "sequence" Every animation except the first example will lag into place and not show the whole animation. I am not really equipt to figure this out. I have no idea why it would act this way. The animations play smoothly when not linked together. You can see an example preview of my project here: http://portalpacific.net/Al/PennyGrab2.1/ And I have also included a zip file here for anyone willing to take a look at help me. http://portalpacific.net/Al/PennyGrab2.1/PennyGrab2.1.zip Thanks so much for your time! Any help at this point is beyond appreciated!
-
Hey guys, first of all i wanna say thanky you very much @ the GS Team, for this awesome libary. Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine, a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go. As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.) So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it). Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use? regards houseshow Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.
-
i need to make an animation frame by frame, basically after pressing the mouse the animation starts by changing background image like some kind of stop motion by using this code: document.addEventListener('click', function() { if(counter<1){ audioElement.play(); var cancello=document.getElementById("cancello1"); //var cancello2=document.getElementById("cancello2"); TweenMax.to(cancello, 3, {rotationY:125, transformOrigin:"left top",opacity:0}) TweenMax.to(cancello2, 3, {opacity:0}) contatore++; } else if(counter<2){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche29.png)'}}); <--this one audioElement.setAttribute('src', '235.wav'); audioElement.play(); //var porta = document.getElementById("porta"); //TweenLite.to(porta,5,{opacity:1,scaleX:2,scaleY:2}); contatore++; } else if(counter<3){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche212.png)'}}); <-- second frame var titolo = document.getElementById("titolo"); TweenLite.to(titolo,2,{opacity:1}); contatore++; } else if (counter<4){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche220.png)'}}); <-- third frame } } the problem is that the image flash for second before appearing, also... how can i impost an automatic cycle in which the images appear one by one, since the actual cycle only increases at every click. or there's a better way to do this without using tweenlite.set()?
-
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.
-
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.
-
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
-
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.
-
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.
-
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.
-
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! -
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.
-
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!
-
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 -
Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
-
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.
