Search the Community
Showing results for tags 'html'.
Found 60 results
-
Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you
-
Hi, I'm making an html page with GWD with an animated header using GSAP. When I run my Preview on GWD everything loads fine. But when I upload to the server, the animation jumps to the final frame or sometimes executes part of the animation. When uploading to the server tried both Inline and not Inline the local files (.js, .css) on the html. And loading the GSAP from the cloud <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script> I'm a flash developer, not an expert on HMTL. Would like to learn GWD for banners ads and eventually for my own html files, trying some tools of the GS club but I'm not sure how compatible is GSAP with GWD. *I loved to use GSAP in my Flash banners. Any thoughts will be greatly appreciated. Thank you! Lujan
-
I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath. I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room? If not, what's the best way to achieve this? How does one make it hide again? Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. Or perhaps one should simply keep the place occupied, have visible:hidden? — but then there are a lot of blank spaces, no? Any help appreciated, sorry if at all vague. -
Hello, First of all "GREENSOCK ROCKS !!!" I want to make character animation just like flash, in HTML5. I don't know from where i can start with this. Following are my options 1) Making a continuous film strip and somehow controlling the shifting the background of a div to make an animation. 2) Making an animation in an encoder or something (haven't thought of) and converting into an html5. Also i want to control the animation with slider and want to synch it with an audio. I know GREENSOCK can make it easier, but don't know how??
-
Might be a Flash question, but still, since all the animations are done with TweenLite (fabulous library, btw), I'm asking here. When I publish my animation (swf and html) and open it in IE, the animation doesn't start. I can see only the first frame, but if I open .swf in Windows Explorer, everything works fine. I have three layers in Flash - one with actionscript and two with symbols. Only one frame exists, since everything is done in AS. Thanx to anyone for answering...
-
Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
-
Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J -
I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
-
I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work. I'm trying to use the old 'make a UL inline for a horizontal menu' trick -- I ran through all of these options but couldn't get any to work 1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other. 2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline' The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful. Thanks!
-
Hey! First of all, this isn't an animation or tween problem but as there is no other Javascript section, I'm posting it here. Also I'm not entirely sure that it is caused by TweenLite but it is happening in my TweenLite line of code. I have an image and I want to generate a reflection effect for it so I duplicated the image, mirrored it and reduced the opacity through TweenLite (makes it so much easier!). In all browsers I have tested it so far it works fine (including IE7) but in Chrome it's behaving weird. The reflecting image is at the bottom of my page and should partially exceed the bottom border of the DIV it is in. What Chrome does is that the image itself does not go further down than the border of the content div but the canvas or area of the image does go down. This results in clipping the image. This could be an issue with the css I'm applying with the TweenLite line or it could be the way TweenLite handles it. If I comment out the line with where the TweenLite css is set, it gets positioned over the border just fine, but obviously without the right css attributes. Here is the Jsfiddle: http://jsfiddle.net/qTE2m/ here are screenshots of what I mean: Chrome: http://puu.sh/1xI15 FireFox: http://puu.sh/1xI24 The black line at the bottom is the border of the div the image is in.
