Search the Community
Showing results for tags 'keyframe'.
Found 5 results
-
I want to create the wave effect shown on the right side. I made several divs in a single line and moved them back and forth from top to bottom. I tried using gsap.fromTo(), which starts from the top and goes to the bottom, creating a perfect wave. However, the issue is that it starts from the top, but I want it to start from the center and animate outward. You can see the demo here: Codepen Demo To fix this issue, I used keyframes, but the stagger is not applying correctly. If we put `repeat` inside the stagger object, each div's movement should be individual and not wait for the entire animation to complete. However, it seems like it's waiting for the whole animation to finish before continuing.
-
Hey! I have a custom timeline UI (similar to the timeline in adobe after effects) where you can set keyframes for different properties like position, opacity, scale etc. I want to save those keyframes in a format like this { time: 1, value: { x: 100, y: 0 }} for the position and add them to the timeline animation. `time` is the position in the timeline where the element should have the x and y in `value`. I just can't figure out how I would set up the code without any additional calculations for the duration. Currently I have a timeline which should be always 3 seconds long and keyframes should be added to that timeline. This code just doesn't feel correct in my opinion because I would need to set the duration manually for each keyframe by checking if there is a keyframe before the current one and then using that time to calculate the duration. const timeline = gsap.timeline({ repeat: -1, duration: 3, paused: true, onUpdate: () => { // update UI } }) const prop = { x: 0, y: 0 } timeline.add( gsap.to(prop, { keyframes: [ { x: 100, y: 100, duration: 1 }, { x: 0, y: 0, duration: 1 } ] }) ) I hope it's understandable because I don't know how I should explain it well. Sorry for that! Can you please give me a hint how I would do this with gsap? I appreciate any help and advice! For reference: I want to "translate" a view like this into "gsap code".
-
Hello all I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems. The first is how to set keyframes, see the below css code: .element{ animation: ball 2s ease-in-out } @keyframes ball{ 25%{ background:red; } 50%{ background:yellow; } 75%{ background:green; } 100%{ background:black; } } //or a more complex one .Shake { animation: Shake 3s ease 0s forwards; } @keyframes Shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } I use TimelineLite.to() with accurate time setting to create a similar animation: var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}, 0.5) .to(element, 0.5s, {backgroundColor:green}, 1) .to(element, 0.5s, {backgroundColor:black}, 1.5) Is there any better way to create such a animation? And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens? For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes. .element{ animation: ball 2s ease-in-out } But in gsap, it just works on one of the tweens , not the whole timeline. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut}) .to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5); Any help very much appreciated!
-
Hello everyone, I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP. @keyframes elliptical-anim { 0% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1); } 20% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1); } 96% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1); } 100% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1); } } I'm using the 3D version of the animations in order to force the hardware acceleration. Thanks in advance for your help !
-
Hi, Is possible this css3 animation with gsap? http://jsfiddle.net/nGsk3/1/ Regards.
