Search the Community
Showing results for tags 'css'.
-
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.
-
Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image). sample code below: var tl = new TimelineMax({ paused:true, autoRemoveChildren:true, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }); tl.add( TweenMax.to($("img"), 4, { css:{ transformOrigin:"left top", scale:1.5 }, clearProps: "transformOrigin,transform,scale", //clearProps: "all", ease: Linear.easeOut, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }) ); tl.play(); and here is my codepen example: http://codepen.io/jonathan/pen/rwFva as you can see using your browser code inspector/console.. you can see how after the animation completes the transform properties do not get cleared. You can see how i tried 3 ways that are commented out: the clearProps that is called in the onComplete callback of the Timeline using the set method the clearProps that is called in the onComplete callback of the added Tween using the set method and the clearProps property on the added tween. No matter which way i try to clear properties, i cant seem to have the element clear the properties GSAP has added. If you check my code pen example commenting out each way you can see how its not clearing the style attribute css properties: transform matrix3d, transform origin or any css that GSAP adds to the element (image). Any help will be highly appreciated!
- 15 replies
-
- 1
-
-
- css
- clearprops
- (and 3 more)
-
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
-
Hi guys, Coming back to this forum for some simple trouble ! I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together ! Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh). The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes. As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way : tl.set($('#myDiv'), {css:{"-webkit-flex":0}}); But how about setting prefixes in a CSS property VALUE ? I have tried things like : tl.set('#myDiv', {css:{display:'-webkit-flex', display:'flex'}}); As I feared, it seems to be considered a duplicate by browsers. Testing various situations, I think only the last instance of 'display' is applied, which seems only logical. Depending on the order, I get my tweens to work on webkit-based browsers, or the others So, the questions are : - is there a way to set display right cross-browser ? - is there a way to do it simply ? xD Cheers to all the GSAP team, you're awesome ! ================================================================================ EDIT : While looking for an answer, I got to : this stackoverflow topic Based on the answers there, I got some workarounds with no tweens : toggling an HTML "flexBox" class with jQuery for instance. .flexBox { display: -webkit-flex; display: -ms-flexbox; display: flex; } function addClassFlex(elem) { elem.addClass('flexBox'); } tl.set('#myDiv', {onComplete:addClassFlex, onCompleteParams:[$('#myDiv')]}); Since I need this to happen at a precise point of my timeline, I got nothing better than this callback yet. Does it sound ok to you guys ? Anything better to propose ? (awful use of callbacks, and I dislike messing with styles in the HTML...)
-
Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
-
I've been using clip property to create rectangular masks. TweenMax.to(element, 0.5, { // rect(top, right, bottom, left) clip:"rect(0px,150px,150px,0px)" }); I've read that the css clip property is deprecated. Will GSAP be able to poly-fill the clip property to make it compatible with browsers that have dropped support for clip?
-
Hello! I use GSAP to make infinite animation in the header of http://okcity.pro with TweenLite window.cloudsTween = TweenLite.to(clouds, 100, {'background-position-x': "-1739px", ease: Power0.easeNone, onComplete: window.animateClouds}) But i get 50% cpu usage when i view that page. It is better than with CSS animation and jquery, but still is a lot. Could you suggest a method to speed this infinite animation up?
-
..I would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads -
So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. website.zip
-
Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.
-
I've seen a lot of posts about media queries and running animations on screen size, but I haven't seen any that I can use for my problem. My problem is that between the mobile/tablet and desktop versions, the original logo is a different percentage size and is scaled down to a different size. Forgive my code. It's a little sloppy at the moment. But as you can see, on the desktop version, the original img width is 50%, and on mobile/tablet, it's 90%, so the post-animation sizes will be different as well. Can anyone help with this? Thank you.
-
Hi guys, I am having an odd issue. I am using the splitText plugin successfully and the animation works perfectly on all tested browsers and devices except the Samsung Galaxy Tab 2/3 (!?) The odd thing is that it only happens on the second text instance animating in ("txt2"). All other instances animate as expected... I can't figure out why the line break in the "txt2"instance is being ignored on Samsung Galaxy Tab2/3 only?? Any ideas? Thanks!
-
tl;dr: TweenMax + Safari can't read the value of perspectiveOrigin, can set it just fine. Hi, happy customer and big fan here. I'm working on a project where I'm trying to tween the perspective-origin CSS property. It works just fine as long as I TweenMax.set() it, but it breaks in Safari when I change it to TweenMax.to(). Both scenarios work in Chrome. It looks like TweenMax is unable to READ the property's current value when in Safari, which it needs for calculating the tween. It is able to WRITE the value though. If you take a look at my Codepen, switch the method to "to", move the mouse and then hold still for a bit you'll see that the value gets set to the tween's end value as soon as the tween ends. Which is also why TweenMax.set() works just fine, because it doesn't need to read a value, only set it. Any idea how I can get around this without manually checking for browsers and juggling with vendor prefixes? Thanks a bunch, Franz
-
I am trying out the gsap animation library. According to the basic docs the syntax for getting a tween up and running is: TweenLite.to( [target object], [duration in seconds], [destination values] ) So I have tried a really simple tween based on jQuery's hover event: $('.contact-item').hover(function(){ TweenLite.to(this,4,{background:'#671B4B'}); },function(){ TweenLite.to(this,4,{background:'#FFFFFF'}); }); Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument. I did check to make sure the default is seconds not milliseconds. It's in the docs I linked to. I did make sure I am using TweenLite and not TweenMax. I am using jQuery but see no conflicts or errors in the console. Any help is appreciated. I have linked to a codepen I have added the css plugin and it is added to the codepen as well.
-
Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
-
Hey all, I've got a lovely animation up and running for the site I'm working on, but I would like the mobile animation to run slightly differently. Specifically, I've got a Tween that looks something like this: TweenLite.to(target, 1, { "top": 0 }); Pretty basic stuff. What I'd really like to do is replace "top" with some variable, such as orientation, declared earlier in the code depending on what device and screen size the user is using. That way, I can change the animation slightly based on the users' device/screen size. I'd like to do this in one Tween if possible, because the actual tween itself is much longer, and I love keeping my code as simple and elegant as possible. So that super simple Tween becomes: TweenLite.to(target, 1, { orientation: 0 }); where orientation gets declared some time earlier. Is this possible? I've messed around with declaring it a few different ways, but none of them have worked. Apologies if this is an easy fix that I've been missing, but I've been messing around with this for a while now and haven't found a solution. Thanks in advance!
