Search the Community
Showing results for tags 'animation'.
-
Hello, I noticed that when I chain animations with .to , sometimes if two animations start at the same time, there can be a slight jerk in the animation, even if I do the rotate:0.01 trick for Firefox, etc. Question, is it perhaps 'smoother' or 'faster' rendering wise, to in those cases create multiple instances of TimelineLite, for example two instances, to ease the stress that one instance carries when starting two animations at a simultaneous time index. I'm not including any code since I trust the question is a simple one, since it is simple to start to animations the same time by just giving them that time index at the end of the to. (object, time, {property: value}, 'timeindex') Snoop out -
I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert
-
Hi, I saw a tutorial where the tutor animates elements from inside a mask definition to make his desired effects, so I thought that I could use that technique to make a similar animation for a different effect, but somehow it doesn't work for me. In my picture there is a circle that is defined inside the mask definition and it is meant to be animated but it doesn't move, however, if the circle is outside of the mask tags it can be animated. So the question is that is there a way to animate that circle defined inside the mask and if it is possible, what do I need to do to make it work?
-
Help, help, help.... I'm new to GSAP, i need to create a one page website whereby the main section is an animated carousel via slider that look like this: http://assets.wwf.org.uk/custom/foodstory/ its a carousel with slider bar, that user can drag the slider to view the animation. the slider some more is need design as per example. OMG but i really no idea how/where to start with it. can i have an example to refer with? ( Please & TQVM T.T -
HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
-
Hi, I have an question, how to rotation object with origin? i need my object rotate stick at the left and middle of the object. same as the left 2 images Please Help~ Thanks alot.......
-
I would like to do "complex" animation with gsap and svgs, but I don't know what is the best approach to this. it is better to create and to import an unique svg with inside all the elements or maybe it is better 4 different svgs? I have 4 different characters: a tree, a lamp, a desk and a man. basically my animation is move the objects on the x, and appearing and to disappearing stuff. any help, suggestion or advice? I started to study gsap a few days ago, and i am still new to this many thanks
-
Hi there. I am new user, and i don't know why my picture is jerks when picture zoom in and zoom out. Could you halp me please? I recorded screen video. You can see it. Jerk.zip
-
Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!
-
Hello, I am about to start doing a landing page with a 10 second video. But the thing is, they wanna add 3d elements to the video so i have to do it with stepped ease or something and make it move by mouse scroll. On the video, a guy jumps off the cliff with a snowy enviroment and when his fall ends he drops in to a cave and landing page itself fadein/scale up. So, I have few ideas but i wonder, how would you make this ? Simply: How to play video frames by mouse scroll with highest performance & quality ? Just wanna see how would you do, thanks.
-
Hello everybody! I'm not very comfortable with the notion of beginning from which the animation starts when an element is visible in the page while scrolling. How to handle this easily? When starts exactly the animation of an element once it appears on the screen by scrolling down the page? Going further, I have done some tests with animations where the duration is expressed in seconds once started, but what if I want that the animation of my element be based on the scrolling of the page, in both way, normal and reverse? I try to find answers from http://johnpolacek.github.io/superscrollorama/ and http://www.greensock.com/timelinelite/ but without success... I'm a graphic designer, so be gentle - please - animate through code is pretty lethal to me Oh, and by the way -> GreenSock technology rocks!
-
I'm trying to make a behaviour that feels kind of elastic, that when the user moves is mouse (and in the future, his phone), the cards behind the current one move away with a delay between each other. The problem is that for it to be as I visioned it, it would need to move away, based on the centred card, with the exact same values for top/left and bottom/right (confusing, I know, but I hope you understand what I meant). Can you give a little help? PS: For some reason, the demo on codepen isn't adding the transform: translate(-50%, -50%) when the element loads. On my localhost it works as intended... If need be, I can post a sample of what I have locally working. Thank you
-
Hi there guys! can you please help me I am struggling how to code the animation for it properly with my 4 separated frames images. I want to animate it smoothly and nicely like normal cyclist. Here's my code for animating 4 framed images. JavaScript: window.onload = init; function init() { TweenMax.set("#two, #three, #four", {alpha: 0}); animationOne(); } function animationOne() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); TweenMax.set("#one", {alpha: 1, delay: 1.3}); TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo}); } function animationTwo() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); } HTML: <div id="cyclist"> <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/> <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/> <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/> <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/> </div> CSS: img { position: absolute; left: 10px; top: 10px; bottom: 0; right: 0; } For full editing please go here: http://codepen.io/Waren_Gonzaga/pen/PzEzag Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation. -
Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
-
Hi guys! I want to share my work on how to make a venetian effect using GSAP I hope it will help other guys on their animation! You can freely fork this project on codepen! thanks! Any feedback and improvements are welcome! Codepen Link: http://codepen.io/Waren_Gonzaga/pen/akywzY Big thanks to Jonathan and Jack of GreenSock for guiding me here! Pretty new here!
-
Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks! The animation look like this but using GSAP! Reference of animation: https://codepen.io/dudleystorey/pen/HrFBx
-
Hello friends of gsap! This is my first post here but i suspect i will return since gsap is awsome! I'm trying to make a rotating circle with arrows pointing at each word. Here is an image that shows what I'm trying to do. http://boxesandarrows.com/files/banda/prototyping-with/iterative_prototyping-small.gif How can i achieve this? I tried using css border and images but I don't know how to apply it the correct way so the arrows rotate with the boxes as seen in the codepen. I want the arrows to basically point on each box. Thank you for your time and keep up the good work!
-
Hi everyone! I was wondering if someone could help me with a scaling problem I'm having. I have five sections inside a div and every section is the width of the window. The div is the width * 5. When pressing the next buttons inside a section the div translates X the width of the page to show the next section (see codepen URL). I have this function in a window.resize but I don't know how to change the position of the current section so that it always fits and centers the window width. Any help would be much appreciated! - Helle
-
When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge. How do I get rid of the blur when viewing with Chrome. Thank you, Kv2
-
Hi , I'm looking for a table row animation. In code pen for each regular interval row is added. Here, can a sort of bounce animation can be achieved from left to right. Kindly help me out!! Thanks Phaneendra
-
1st post and it's a little rough... - I've been trying to create some hover animations on an SVG lately. Take a look at the codepen link (hover on x) to see where I'm at... My goal is to hover on the "X" and have the "A" flip/rotateY(180deg) to reveal. And when the mouse is off, have the "X" flip back. I will also mention/ask for further help having the diamond animate up and then back down relating directly to the hover of the "X". notes: - I know the "X" and "A" svg <path d=> are what is causing the width to be so far apart on rotation. This is to have the "X" in the correct placement within the file. (I have tried 'cropping' the SVG of "X" and "A" but the position/location is off. Question: - can I set a rotation orgin point manually? or do you think I should even be using more JS/GSAP to accomplish these effects? *There are actually even more interactions I have thought up - however they can wait until this problem is resolved, Thanks for ANY & ALL help! (I haven't found many examples of SVG hover animations)
-
I am trying to create a basic "floating" slideshow like the floating style screensaver that ships with all Macs. If you don't have access to a Mac the effect looks close to this: Key features: Multiple layers of posts. Barrel roll effect — every time I try this it looks like a flat screen being stretched in and out. Callback function for loading in a new tile every time one is animated out. Apologies, I'm a newbie here. While this should be pretty darn simple I can't get started on it. Can someone point me in the right direction here? Thanks much.
-
Please help us gauge if it would be worthwhile to get more involved with creating some products / services for banner developers. Perhaps that would be templates, videos, podcast new tools for fancy effects…we're not sure. Our goal is to better understand the needs out there and see if we can address the pain points, perhaps with a partner of ours who has a ton of knowledge in the banner ad space. http://goo.gl/forms/2ZZ3c3vzRt Please take a few minutes and fill it out; be as brutally honest as possible. If you want to chime in with other ideas that aren't mentioned, that's totally fine too (drop them in this thread below or in the survey itself). Thanks! -
Is it better to animate images or divs? What is the best practice? When I use doubled retina ready images it is easiest for me to style images than div background images. Example of my HTML/CSS/GSAP code for e.g. banner ad 300x250 retina ready: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <!-- layout --> <style> body { margin:0px; } #stage { position: absolute; width: 300px; height: 250px; top: 0; left: 0; overflow: hidden; cursor: pointer; } #photo1 { position: absolute; width:100px; height: 100px; top: 10; left: 10px; z-index: 1; } #photo2 { position: absolute; width:100px; height: 100px; top: 50; left: 50px; z-index: 2; } </style> <!-- animation --> <script> window.onload = function() { var photo1 = document.getElementById("photo1"); var photo2 = document.getElementById("photo2"); tl = new TimelineMax(); tl.from(photo1, .5, {x:"+=30", ease:Power1.easeOut}); tl.from(photo2, .5, {x:"+=30", ease:Power1.easeOut}, "-=.5"); } </script> </head> <body> <div id="stage"> <img id="photo1" src="photo1.png"/> <img id="photo2" src="photo2.png"/> </div> <body> </html> photo1.png and photo1.png are doubled 200x200
-
Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? My SVG looks like this: <svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px" viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve"> <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1 s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166 s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166 c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166 c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166 c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166 S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166 c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166 c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166 c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166 s5.4-166,15.5-166s1.1,166,17.7,166"/> </svg>
