Search the Community
Showing results for tags 'html5'.
Found 108 results
-
I'm getting an actionscript error on the console but i'm doing an HTML5 simple javascript tween.to. screenshot of error attached. see all files in action here-> http://polklein.com/gs
-
Hello everyone, I have just launched a new website: http://html5maker.com It exports frame-based animations using TweenMax library. Currently only Move and Fade effects are supported but I plan to add more effects in future. Here are some templates that were done using html5maker. Waiting for your feedback and feature requests! Thanks!
- 6 replies
-
- 2
-
-
- html5maker.com
- animation
- (and 3 more)
-
Animating Container smaller, but have Child same size not moving with Container
AND Factory posted a topic in GSAP
Hello, I'm starting to go nuts about this little animation I got going on with your very cool platform. This is what I want to happen (storyboard): #color_circle_1 (fadein) -> #color_circle_2 (fadein) -> #color_circle_3 (fadein) -> #color_circle_4 (fadein) -> Menu (slide down) -> #color_container (moves down and gets a smaller height). And then comes my problem. The #color_container does as wanted to, but the #color_circle_(1-4) moves down with it, but I want them to stay in the same position and not move with the Container. Does anyone have any ideas of how I could fix this tiny problem? I tried out several things, but I keep up getting the same animation. That the #color_circle_(1-4) keeps moving down with the Container moving down. So in basics I want colored circles to stay at their position while the Container animates smaller. HTML: <body> <header> <nav> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Process</a></li> <li><a href="#">Cases</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="white_circle_1" class="white"></div> <div id="white_circle_2" class="white"></div> <div id="white_circle_3" class="white"></div> <div id="white_circle_4" class="white"></div> <div id="color_container"> <div id="color_circle_1"></div> <div id="color_circle_2"></div> <div id="color_circle_3"></div> <div id="color_circle_4"></div> </div> CSS: * { margin:0; padding:0; border:0; } body { background: #edf4fa url(images/head_bg.png) no-repeat top center fixed; background-size: 100%; width: 100%; height: 100%; } li { list-style: none; } #color_container { width: 550px; position: absolute; left: 50%; ; overflow: hidden; } #color_circle_1, #color_circle_2, #color_circle_3, #color_circle_4 { position: absolute; left: 50%; border-radius: 400px; } #color_circle_1 { width: 250px; height: 250px; ; background: rgba(228,37,140,.7); top: 150px; z-index: 1; } #color_circle_2 { width: 350px; height: 350px; ; background: rgba(105,59,255,.5); top: 100px; z-index: 2; } #color_circle_3 { width: 450px; height: 450px; ; background: rgba(167,20,72,.5); top: 50px; z-index: 1; } #color_circle_4 { width: 550px; height: 550px; ; background: rgba(22,144,195,.5); top: 0px; z-index: 3; } #white_circle_1 { width: 250px; height: 250px; position: absolute; top: 300px; left: 50%; ; border-radius: 200px; } #white_circle_2 { width: 350px; height: 350px; position: absolute; top: 250px; left: 50%; ; border-radius: 200px; } #white_circle_3 { width: 450px; height: 450px; position: absolute; top: 200px; left: 50%; ; border-radius: 300px; } #white_circle_4 { width: 550px; height: 550px; position: absolute; top: 150px; left: 50%; ; border-radius: 400px; } .white { background: rgba(255,255,255,.5); } header { width: 100%; height: 120px; background: rgba(255,255,255,.8); display: block; position: absolute; top: 20px; } nav { left: 30%; } nav ul#menu { display: block; } nav ul#menu li { display: inline-block; } nav ul#menu li a { font-family: 'NexaBold'; } Script: <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.lettering-0.6.1.min.js"></script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { $('body').css('visibility','visible'); // TimelineLite for title animation, then start up superscrollorama when complete (new TimelineLite({onComplete:initScrollAnimations})) .from( $('#white_circle_1'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_2'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_3'), 0, {css:{opacity:'0'}}) .from( $('#white_circle_4'), 0, {css:{opacity:'0'}}) .from( $('#color_circle_1'), 1, {delay: .8, css:{opacity:'0'}}) .from( $('#color_circle_2'), 1, {css:{opacity:'0'}}) .from( $('#color_circle_3'), 1, {css:{opacity:'0'}}) .from( $('#color_circle_4'), 1, {css:{opacity:'0'}}) .from( $('header'), 1, {css:{top: '-300px'}, ease:Sine.easeIn}) .fromTo( $('#color_container'), 1, {css:{top:'150px', height: '550px'}, collapsible: true, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '250px', height: '240px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_1'), 0, {css:{top: '150px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_2'), 0, {css:{top: '100px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '0px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_3'), 0, {css:{top: '50px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_4'), 0, {css:{top: '0px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-100px'}, ease:Sine.easeInOut}) function initScrollAnimations() { $('#content-wrapper').css('display','block'); var controller = $.superscrollorama(); } }); </script> As you can see I also tried out where I wanted to run the animation at the same time, but I simply don't know how to do that (I'm still a bit new to it all). Otherwise if I could run these 5 lines to animate at the same time then I think it could fix the problem, but only a noobish idea of mine: .fromTo( $('#color_container'), 1, {css:{top:'150px', height: '550px'}, collapsible: true, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '250px', height: '240px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_1'), 0, {css:{top: '150px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_2'), 0, {css:{top: '100px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '0px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_3'), 0, {css:{top: '50px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-50px'}, ease:Sine.easeInOut}) //.fromTo( $('#color_circle_4'), 0, {css:{top: '0px'}, immediateRender:true, ease:Sine.easeInOut}, {css:{top: '-100px'}, ease:Sine.easeInOut}) Any suggestions because I could really use some, thanks. //Morten -
How to setup the menu to auto scroll to section and addClass=("active")? [SOLVED]
AND Factory posted a topic in GSAP
Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed? -
A simple yet fun game made with TweenMax as an animation engine. Developed under 8 hours due to GSAP fast coding techniques. Feel free to post high-scores and bugs here or in my blog! Happy egg-hunting!
-
I've been looking for a better way to code and animate Accordian's to unleash some creativity. I've been playing around with GSAP a lot lately trying to do some of the cool animation effects I have liked in flash using GS), and making them browser compatible. I thought of a cool way to do accordians that you have total visual control over. All of the other JavaScript one's or the SPRY assets that I have used in the past, have been very confusing and not very graphically customizable -as well as not very browser friendly. This is my start of one that I feel can go just about anywhere, in any direction (including diagonal) thanks to Mr. Green. I used super simple CSS. I added in an alpha change because the objects inside of the div would stay visible and cover stuff, but there is probably a much better way to do it. Here is the start of the simple code I came up with so far, let me know what you think: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .containers { /* [disabled]margin: 10px; */ /* [disabled]float: left; */ height: 507px; width: 421px; position: absolute; background-color: #0F0; display: inline-table; white-space: normal; } .boxes { background-color: #FFF; float: left; height: 50px; width: 400px; position: relative; margin-right: auto; margin-left: 10px; } </style> </head> <body> <div class="containers"> <div class="boxes" id="a"> <div align="center">a</div> </div> <div class="boxes" id="a1"> <div align="center">a-1</div> </div> <div class="boxes" id="b"> <div align="center">b</div> </div> <div class="boxes" id="b1"> <div align="center">b-1</div> </div> <div class="boxes" id="c"> <div align="center">c</div> </div> <div class="boxes" id="c1"> <div align="center">c-1</div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/greensock/minified/TweenLite.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/minified/plugins/CSSRulePlugin.min.js"></script> <!--start events--> <script> $(document).ready(function () { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#a").click(function() { TweenLite.to(a1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#b").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); }); $("#c").click(function() { TweenLite.to(a1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(b1, 1, {css:{height:0, alpha:0}, ease:Cubic.easeOut}); TweenLite.to(c1, 1, {css:{height:50, alpha:1}, ease:Cubic.easeOut}); }); </script> </body> </html>
-
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
-
Hi Jack, For years I looked at this in .as and never dove in, but now in just signed up corporate just so I can use .js version (not interested in flash no more). I need help w/ cubic css3 transform, possibly some consulting for the ticket. When I say cubic, here is an example: <click cubic> http://moobilejs.com/demos/latest/moobile-simulator/index.html He does this w/ very complex css3 and I can't follow, and he does it for the entire page and I just need the form to 'cubic'. Here is his css3: https://github.com/jpdery/moobile-core/tree/master/Styles Can I get some help to get a simple version that just does a 'cubic' of a form? So I can go next, next, next for 15 steps on mobile. thx, Vic
