Search the Community
Showing results for tags 'css'.
-
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!
-
HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!
-
Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
-
Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!
-
Hello everybody I am getting frustrated a lot. How to get this boxshadow look without darker lines/ stripes? The box shadow looks darker than the rest of the background or the inner picture rectangle while having the same colors. I don't understand this. In Photoshop this looks good. Using CSS it is so ugly! =( Please help me! Kind regards, Matt -
Hey guys, I have a dynamic template, where you can input css into the XML feed, and the banner will read that on run time and adjust the banner overwrite the styles using set: TweenMax.set(element, newValuesObject); And I've managed to cobble together bits of string replaces and RegEx: var myDynamicCSS = "color:#ffffff; background-color: #00ffbb; text-align: left; border: 1px solid green"; String.prototype.toCamelCase = function() { return this.replace(/^([A-Z])|[\s-](\w)/g, function(match, p1, p2, offset) { if (p2) return p2.toUpperCase(); return p1.toLowerCase(); }); }; const convertCSS2JS = (css) => { let frameCSS = css.replace(/([\w-.]+)\s*[^;]+);?/g, '$1:$2,'); frameCSS = frameCSS.replace(/,+$/, ''); let properties = frameCSS.split(', '); let frameCSSObj = {}; properties.forEach(function(property) { let cssProp = property.split(':'); let cssKey = cssProp[0].toCamelCase(); let cssValue = cssProp[1].trim(); frameCSSObj[cssKey] = cssValue; }); return frameCSSObj }; TweenMax.set(myDynamicElement, convertCSS2JS(myDynamicCSS])); But I'm unsure of how easily breakable this is? Codepen: http://codepen.io/joemidi/pen/GZVedX
- 4 replies
-
- 2
-
-
- gsap
- javascript
- (and 2 more)
-
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)
-
Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.to(cortana_blurb, .15, {width:204, ease:Linear.easeNone, delay:1.6 }); } What I want is to minimize it to one line code like: MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, 64, 111, 144, 204, ease:Linear.easeNone}), .4; } I know it's a trick one, but if there is a way to do it and you guy could help me it will be great. Kind regards, Fernando Fas
-
I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!
-
Here is another question How come that I can tween CSS properties directly without using the CSSPlugin. The below works. var $frame1 = document.getElementById('frame1') tl.add( TweenLite.to($frame1, 3, {backgroundColor:"#ff6a6a"}) ); tl.play() Am I missing something obvious here? If so, when should the CSS plugin be used since the above works in any case? Thanks in advance .S -
Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!
-
Is there a way to use GSAP TweenMax for basic CSS transforms on a movie clip instance in Adobe Animate when you are publishing to Canvas? For example: this.p1thumb.addEventListener("click", myFunctionp1.bind(this)); function myFunctionp1() { TweenMax.to(this.box, .25, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); } It does not seem to work. I'm also interested in how you might change stroke widths, colors, etc. dynamically. Any ideas?
-
Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.
-
I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for this and where should I be investigating? - - - *Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too? https://css-tricks.com/reverse-text-color-mix-blend-mode/ -
Hi, i am having an issue that i just cant solve. The demo Codepen illustrates the problem best. I would really appreciate if someone could help me. Basically, I have a <div> with position: fixed property. Inside this <div> i have an image that is cloned when it is dragged. The problem i have is that i don't want the clone to have position: fixed. Thanks. -
Hello how could I control (animate) the brightness of an image through GS? something like filter: brightness(2) fadein on hover. thanks
-
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, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!
-
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!
-
Here is a fun idea: use GSAP to generate CSS Code. It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames. I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3). There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere. A plugin that allows you to export your animation to CSS animation will certainly help a lot.
-
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.
-
If anyone has any insight here, a MILLION thanks in advance. There is probably a simple way to to this, but I've been struggling to figure this out for days and I'm literally about to lose my mind. I am dragging a placeholder item (GSAP Draggable) from a sidebar and dropping it onto a pannable/zoomable "stage" which uses CSS transforms (jquery.panzoom). When dropped, the draggable element is removed and should be replaced by a new element with absolute positioning inside the panned/zoomed "stage" in the exact same position, visually speaking, regardless of how the stage has been panned/zoomed. I am close, but the calculated position is only correct when the scale is at 1, and I can't figure out how to account for the scale programmatically. I have tried a million things but I just can't wrap my head around it. Codepen here: http://codepen.io/anon/pen/meYWvL You can see that when you zoom (using the mousewheel) to Scale 1 it works they way I want, but at other scales I can't figure out how to account for the difference. The maths I am using now (only works when scale is 1): $(theNewItem).css({ 'top': dropPosition.top + (currentY - (currentY * 2)), 'left': dropPosition.left + (currentX - (currentX * 2)) });` Notes on the code: dropPosition is the $.offset() of the dragged element (relative to the window) at the moment it is "dropped", and currentY and currentX is the transformed x,y values of the container element I am trying to add the new element to, which at scale(1) could be considered 0,0 relative to the window. Side note: (currentY - (currentY * 2) is my derpy way to convert the negative number used in the transform matrix to a positive number since I don't know of any other way to convert +/- off the top of my head. -
I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
-
Hi one and all - I have a small test that has produced nothing on my site but I just loaded it to Codepen (from "Morphing Countdown" by Chris Gannon) and I get nearly what I was after Is there something else I need to load apart from MorphSVG & TweenMax? Perhaps I should load these some other way? Internet Explorer is showing "Cannot load a null target" TweenMax.min.js (16,27469). I have it loaded on my site at: www.ezpc.eu/anitalouise.html Thanks to anyone who has time to look at this - Trev
-
I am trying to integrate CSS animation with GSAP. @keyframes animation1 { from { transform: translateX(0); } to { transform: translateX(30px); } } @keyframes animation2 { from { transform: translateY(0); } to { transform: translateY(30px); } } @keyframes animation3 { from { transform: translateY(0); } to { transform: translateY(50px); } } Above code can be achieved directly through Tweenmax, but what I need is to integrate the animation keyframes with the Tweenmax methods. In CSS, the animation3 will overwrite the translate() of animation1 and animation2 which is undesirable. I hope the properties are sequenced when combined with GSAP methods. Something like tweenmax.to { animation1, delay1, animation2, delay2, animation3, delay3 } The behaviour in CSS can also be seen here: http://jsfiddle.net/Manojkr/0z2ehwhd/1/
