Jump to content
Search Community

Search the Community

Showing results for tags 'css3'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. please some body help me I have an book flipping animation everything is working fine but the problem is i want to add gsap scrollTrigger in it and i can't do it my self i want that when this book section appear section stop pin : true type thing i guess and the pages flip on scroll
  2. Hello everyone, I would like to develop this kind of animation for my background. Anybody suggest me about this how can I develop this? Also how can I add liquid hover effect on images. https://s.muz.li/NzNjY2YzNGRi Thanks
  3. Hello I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update). It would also be nice if the Watering Can would rotate down when hovering over the grass. (Done, please see update) Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...) Would it be easier to use GSAP? (Setting it up, implenting it in my work? ) Thank you for any advice, Kind regards, Claude UPDATE: The codepen and the code below was updated but the Grass still doesn't grow. Any idea why? UPDATE 2: The grass grows The cursor still doesn't change to "grabbing" while grabbing the can. UPDATE 3: It seems to be a browser compatibility issue. Removed all the extra cursor code and it work fine in Firefox! CodePen: https://codepen.io/Shaman1975/pen/zYoEqzr HTML (Latest Update) <div class="can"> <svg width="15" height="100vh" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="droplets" width="15" height="21" viewBox="0 0 181 208" fill="url(#pattern)" patternUnits="userSpaceOnUse"> <path d="M94 160.7C94 186.65 72.97 207.68 47.02 207.68C21.07 207.68 0.0400085 186.65 0.0400085 160.7C0.0400085 134.75 28.04 116.44 47.02 84C61.82 112 94 134.76 94 160.7Z" fill="#00A3FF" /> <path d="M181 76.7C181 102.65 159.97 123.68 134.02 123.68C108.07 123.68 87.04 102.65 87.04 76.7C87.04 50.75 115.04 32.44 134.02 0C148.82 28 181 50.76 181 76.7Z" fill="#00A3FF" /> </pattern> </defs> <rect width="100%" height="100%" fill="url(#droplets)" /> </svg> <img id="gb03" class="gamebtn" alt="Watering Can" src="https://ga.chi.lu/wp-content/uploads/2021/02/watering-can.png" width="80" height="80"> </div> <img id="grass" class="grasspng" alt="Grass" src="https://ga.chi.lu/wp-content/uploads/2021/02/grass.png"> </img> CSS (Latest Update) * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { padding: 0; margin: 0; height: 100%; -ms-overflow-style: none; scrollbar-width: none; } body::-webkit-scrollbar, html::-webkit-scrollbar { display: none; } .can { position: relative; } #gb03 { position: absolute; } #droplets { visibility: hidden; } svg { top: 30px; left: -10px; position: absolute; z-index: 0; } .gamebtn { z-index: 2; width: 50px; height: 50px; margin-bottom: 5px; } .gamebtn:hover { filter: brightness(130%) drop-shadow(0 2px 5px black); } #grass { position: fixed; bottom: -40px; z-index: 7; transition: all 2s; transition-timing-function: linear; } JS (Latest Update) window.addEventListener("load", function () { console.clear(); tl = gsap .timeline({ paused: true }) .to(".gamebtn", { scale: 1.5, rotate: -25, duration: 0.25 }); var cur = 0; Draggable.create(".can", { onDragStart() { tl.timeScale(1).play(); gsap.to("#droplets", { repeat: -1, duration: 0.1, autoAlpha: 1, ease: "none", attr: { y: () => "+=" + 21 } }); }, onDragEnd(event) { var bottom = gsap.getProperty("#grass", "bottom"); if (bottom != "0") { gsap.to("#grass", { duration: 0.3, bottom: "+=10" }); } else { gsap.set("#grass", { bottom: 0 }); } tl.timeScale(2).reverse(); gsap.killTweensOf("#droplets"); gsap.set("#droplets", { autoAlpha: 0 }); } }); });
  4. Hi everyone. I try to do animation for svg elements. Here's what I did - jsfiddle The problem is that svg photos can be different (as small as 100-500 lines of code, or large as thousands of lines). For what we have now, we need to have svg directly in the DOM. And if the svg file consists of several thousand lines of code, the animation will load the system and will not work smoothly (jsfiddle) So I think we need svg, turn it into canvas and then work with it. If they were ordinary primitive figures (circle, triangle, square) and they would meet once on the page, I could draw them in canvas. But the problem is that these can be different forms of drawing. I thought it would be great if we could svg load a certain mask and display circles in it, which would be animated following mouse over. Such a mask could be made as a single path(mask). However, frankly speaking, I don't know how to do this or if it's possible to do it. I would be very grateful for any help and examples. Thank you.
  5. Hello friends !!! I'm a newbie on GSAP tweenMax and don't know how to make tweenMax object for animation like this CSS3 keyframes. @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } please help me about this !!!
  6. Hey all, This is my first time posting here, so let me know if i've given too much / too little detail! I'm having an issue with some css on safari, essentially I have a series of elements, positioned along the Z-axis with transform: translateZ, in order to achieve a parallax effect, however, I would also like to apply a mix blend mode to some of the elements on the page. This works fine on Chrome and FireFox, and displays as expected, however it completely breaks the site on Safari with the content appearing extremely zoomed in, i'm not sure what to try to rectify the issue, i've tried attaching prefixes to everything however this doesn't seem to make any difference, I have attached an image bellow of what the page looks like when viewed in Safari. Any help would be really appreciated thanks!
  7. CSS3 transitions have some significant limitations that make them unworkable for a serious animation platform. They don’t provide precise controls over the timing or easing. They’re great for simple effects but the GreenSock Animation Platform delivers extremely precise rendering, so you can do things like pause() and reverse() an animation anytime or skip to a specific time and play from there, etc. Try creating a CSS3 transition that uses an elastic.out or slow motion ease and then jump to 0.72494-seconds into a 2-second transition and pause() only to resume() later. It’s impossible from what I understand. So no, the platform doesn’t make use of CSS3 transitions. However, it is highly optimized for performance. See the detailed cage match where GSAP battles CSS3 transitions where there’s a detailed comparison in several categories.
  8. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let's see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript. Before we put the gloves on, we need to make it clear that we've got the utmost respect for jQuery, its authors, and its community of users (to which we belong). It's a fantastic tool that we highly recommend for non-animation tasks. This tongue-in-cheek "cage match" is solely focused on animation. Performance Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any animation platform worth its weight. This round wasn't even close. GSAP was up to 20 TIMES faster than jQuery under heavy stress. See a speed comparison for yourself or make your own. Performance winner: GSAP Controls With jQuery, you can stop an animation but that's about it. Some 3rd party plugins add resume capability, but jQuery takes a pounding in this round. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or jump to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, pause, adjust timeScale, etc. And you can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using jQuery. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the slider, click the buttons below, and see how easy it is to control the sequenced animation. See the Pen Impossible with jQuery: controls (used in jquery cagematch) by GreenSock (@GreenSock) on CodePen. Controls winner: GSAP Tweenable Properties jQuery.animate() works with basic numeric properties, but that's about it. If you want to do more, you'll need to rely on lots of 3rd party plugins which may have spotty support or unresolved bugs. GSAP's CSSPlugin handles almost anything you throw at it while protecting you from various browser bugs and prefix requirements. GSAP jQuery  = supported    = supported with 3rd party plugins    = partially supported with 3rd party plugins Basic numeric css properties like left, top, opacity, fontSize, etc. Supported Supported Colors like backgroundColor, borderColor, etc. Supported Supported with 3rd party plugins backgroundPosition Supported Supported with 3rd party plugins boxShadow Supported Supported with 3rd party plugins clip Supported Supported with 3rd party plugins textShadow (including multiple text shadows) Supported Partially supported with 3rd party plugins 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin and directional rotation functionality Supported Partially supported with 3rd party plugins 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin and directional rotation functionality Supported Partially supported wiht 3rd party plugins borderRadius (without the need to define each corner and use browser prefixes) Supported Partially supported with 3rd party plugins className allows you to define a className (or use "+=" or "-=" to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. Supported Partially supported with 3rd party plugins Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. You need to be able to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours wrestling with a limited tool set. jQuery has some nice simple convenience methods like show(), hide(), fadeIn(), and fadeOut(), but GSAP bloodies its nose in this round: GSAP jQuery  = supported    = unsupported Easily create sequences (even with overlapping animations) that can be controlled as a whole Supported Unupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unupported Create a staggered animation effect for an array of objects using one method call (like staggerTo(), staggerFrom(), or staggerFromTo()) Supported Unupported Easily repeat and/or yoyo a tween a specific number of times (or indefinitely) without resorting to callbacks or redundant code Supported Unupported Callbacks for when a tween or timeline starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unupported Place labels at specific times in a sequence so that you can seek() to them and/or insert animations there. Supported Unupported Animate any numeric property of any JavaScript object, not just DOM elements Supported Unupported Call a function whenever the entire platform finishes updating on each frame (like for a game loop) Supported Unupported Workflow winner: GSAP Compatibility Browser inconsistencies and bugs are the bane of our existence as developers. Whether it's the way Internet Explorer 8 implements opacity or Safari's transformOrigin bug that wreaks havok on 3D transforms or the fact that browser prefixes are required to enable many of the more modern browser features, you want your animations to "just work" without having to learn all the annoying hacks. jQuery does a great job of delivering cross-browser consistency overall, but when it comes to animation it falls a bit short mainly because it doesn't even attempt to handle the more modern CSS properties. No JavaScript framework can work miracles and suddenly make IE8 do fluid 3D transforms, for example, but GSAP implements a bunch of workarounds under the hood to solve problems wherever possible. It can do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin and directional rotation functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Compatibility winner: GSAP Popularity jQuery has been around for a long time and has gained incredible popularity because it does many things well. It's like the Swiss Army knife of JavaScript. There probably isn't a single JavaScript tool that's more popular than jQuery, and GSAP is no exception. As the new kid on the block, GSAP is gonna have to prove itself in the JavaScript community just like it did in the Flash community before it's crowned the undisputed champion. Popularity winner: jQuery Conflict management What happens if there's already a tween running that's controlling a particular object's property and a competing tween begins? jQuery does nothing to manage the conflict - the original tween keeps running. For example, let's say you're animating an element's "top" to 100px and that tween still has 2 seconds left before it's done, and another tween starts running that animates the same element's "top" to 0px over the course of 1 second. It would tween to 0px and then immediately jump to almost 100px and finish that [first] tween. Yuck. GSAP automatically senses these conflicts and handles them behind the scenes. In this case, it would kill the "top" portion of the first tween as soon as the second tween begins. Plus there are several other overwrite modes you can choose from if that's not the behavior you want. Conflict management winner: GSAP Support Both jQuery and GSAP have thriving support forums, but since right now jQuery has a massive user base, you're very likely to find someone with an answer to your question. Even though the GreenSock forums rarely have a question that remains unanswered for more than 24 hours, jQuery's pervasiveness gives it an edge here. On the other hand, GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than jQuery, so we'll call this round a tie. Support winner: tie Expandability jQuery and GSAP both offer a plugin architecture, but since jQuery has been out much longer and gained so much popularity, there are numerous plugins available. Some are good, some are not, but there is a thriving community of plugin developers out there. Even though technically they're both equally expandable, the sheer number of plugins currently available for jQuery give it the advantage in this round. Expandability winner: jQuery Learning resources Again, jQuery's popularity trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about jQuery whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but jQuery scores the win in this round. Learning resources winner: jQuery Price & license Both jQuery and GSAP are completely free for almost every type of usage and both allow you to edit the raw source code to fix bugs (if that's something you need to do). If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't need the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. jQuery employs an MIT license and is free for virtually all uses. As much as we all like "free" software, there's always a cost somewhere. jQuery has a few large corporate sponsors that have helped keep it viable. Both jQuery and GreenSock have long track records of delivering updates, bug fixes, and new features (GreenSock is newer to JavaScript, but served the Flash community since around 2006). Both count some of the largest companies in the world among their user base. Although there are some clear benefits of GreenSocks' license over jQuery's, we'll give this round to jQuery because it is technically "free" in more scenarios than GSAP. Price & license winner: jQuery File size jQuery weighs in at about 32kb gzipped and minified whereas GSAP's TweenLite and CSSPlugin are about half that combined. So in half the size, you're getting significantly more animation capabilities and speed. GSAP is built in a modular fashion that allows you to use just the parts that you need. Of course jQuery serves many other purposes beyond animation, but in this cage match we're focused on animation. Even if you add up TweenLite, TimelineLite, TimelineMax, TweenMax, EasePack, CSSPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and RoundPropsPlugin, it's still almost 20% less than jQuery. File size winner: GSAP Flexibility Let's face it: any tweening engine can handle the basics of animating one value to another, but it's really the details and advanced features that make a robust platform shine. GSAP crushes jQuery when it comes to delivering a refined, professional-grade tool set that's truly flexible. All these conveniences are baked into GSAP (no 3rd party plugins required): Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine. The default is 60fps. All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Use plugins like ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those [canvas or svg] libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. Flexibility winner: GSAP Conclusion jQuery eeked out a few decent rounds, but ultimately GSAP left it lying on the mat in a pool of its own blood. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels. If you only need simple fades or very basic animation, jQuery is probably just fine. In fact, its fadeIn() and fadeOut() methods are quite convenient. However, what happens when your client wants to do something more expressive? Or what if they start complaining that animation isn't smooth on mobile devices? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Update: there's now a jquery.gsap.js plugin that allows you to continue using jQuery.animate() but have GSAP drive the animations under the hood, thus delivering much better speed plus a bunch of new properties that you can tween (like colors, 2D and 3D transforms, boxShadow, textShadow, borderRadius, clip, etc.). Read more about the plugin here. Recommended reading: Main GSAP JS page jQuery.animate() with GSAP: get the jquery.gsap.js plugin! Why GSAP? A practical guide for developers Jump Start: GSAP JS CSS3 transitions vs GSAP: cage match Speed comparison 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  9. Hi, I want to create a line on top of the frame i.e. the line should start from the center and grow simultaneously towards the side. Have given the sample link (this is in TimeLineLite): I want to add the above code to the following banner (have attached the files as well): The problem that I am facing is how to add this to "TimeLineMax" and the line should start/grow along with the word that eases in the screen. Thanks sample.zip
  10. Hi everyone! I am working on a project at the moment, and I am using this code snippet: TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true }); *Note I have tried without the force3D too. And it is generating the following CSS: visibility: hidden; opacity: 0; transform: translate3d(0px, -30px, 0px); However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers. Many thanks in advance!
  11. Hi, I am new here and new to greensock as well. One of my friend referred me to this awesome kit. I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work). The second image will cover up/load circular motion. here is the demo I created http://codepen.io/bgthedev/pen/wzrGxJ/ In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper. Is there a way to create such animation? except clip-path because that does not work with firefox Thanks in advance! BG
  12. This code successfully brightens, then dims image brightness (via the css filter attribute): TweenLite.to($(this).children('img'), 0.1, { css: { '-webkit-filter': 'brightness(1.75)' }); TweenLite.to($(this).children('img'), 1.5, { css: { '-webkit-filter': 'brightness(1.21)' }, delay: 0.15 }); However, I'd like to tween the brightness level to get a smooth transition (rather than the current stepped/chunk method that this code produces). Is there a GreenSock solution/approach to tweening at this level?
  13. I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3: .loaded .main-menu .item:nth-child(1){ top:calc(50% - 25px); left:calc(50% - 25px); background-color:green; opacity:0; -webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); } @keyframes moveicon1{ 100%{-ms-transform:translate(0px,-160px) rotate(360deg); -o-transform:translate(0px,-160px) rotate(360deg); -moz-transform:translate(0px,-160px) rotate(360deg); -webkit-transform:translate(0px,-160px) rotate(360deg); transform:translate(0px,-160px) rotate(360deg); opacity:0.8;} } I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code: TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut}); An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap. if (!Modernizr.cssanimations){ // GSAP Codes } I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.
  14. Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
  15. Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) I was wondering if there was an equivelent to something like this http://codepen.io/anon/pen/yNpQEq But with GSAP? Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. I did see this http://codepen.io/MAW/pen/MYdwRP But TweenMax is HUGE. Halp? Thanks.
  16. Hello, I was trying to animate an inset boxShadow on an element and I saw something weird. If the element has an inset boxShadow and I tween to another inset boxShadow, the border goes outside the element. It works ok if I remove the inset on the Tween command. Example : http://plnkr.co/edit/x7OoyDcVdod2DQjB6HzP?p=preview Is this normal behaviour? Thank you
  17. Hi all, This is my first time posting on these forums. I'm a regular browser but have yet to post! First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome! My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it. I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div. I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful. Thanks, Oliver
  18. Hi all! I'm in last time interested TweenMax for performance. I'm using TweenLite/Max from 2013 June, but 2013 TweenLite/Max are slowly. The new 2014 August TweenLite/Max performance high, smooth 50+ fps (if H/W accelaration is disabled) and very-smooth without breaking frames 60 FPS and 60 Hz rendering (if H/W acc. enabled). In latest GSAP (TweenLite/Max and etc) have some issues in IE! 1. Dx and Dy in relative position cutting when transformating. 2. CSS3 rendering - borderRadius, boxShadow, backgroundGradient, textShadow doesn't work 3. CSS3 Transform - rotateX, rotateY, translateZ, scaleZ doesn't work. Have issue fixes! 1. Set position to absolute. 2. borderRadius, boxShadow and backgroundGradient pollyfil have (i'm now upload to GoogleDrive, see https://googledrive.com/host/0B7DKrzLvYDoOV1ZzZ3ZRMTdwbE0) in IE! 3. CSSMatrix uses advanced calculating and making 3D in IE (see https://github.com/arian/CSSMatrix ) Thanks!
  19. Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3? I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant. What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated). The shadows would respond to a central light point (perhaps the center of the screen) Something like this image — Thanks for any way forward —
  20. http://codepen.io/taqmaninw/pen/qLdcu i try to set initial position for element and move them but doesn't work
  21. DiscoStu

    Spinning images

    On GreenSock's home page, part of the animation at the top is the different browser logos (Safari/Chrome etc) spinning from one into another. I want to do exactly that with a set of photos. Does anyone have an example of the code to do this?
  22. Hi all, This is my first question as I am a long time lurker of this forum.. In CSS3 we can use multiple background as described in this CSS snippet: #some-image { background-image: url("img1.png"), url("img2.png"); background-position: 0px 0px, center; } However, after digging the documentation I cannot find anything to tween one of the multiple background. I can tween a background image if the HTML element only using single background. With multiple background, i have no luck.. Do I miss something here? Or does GSAP not support this feature yet? Many thanks for the effort..
  23. i need the tranformation shown in this tutorial .. the 2nd one in transformPerspective Vs perspective http://www.greensock.com/css3/ TweenMax.to(box2, 3, {rotationY:360, transformOrigin:"left 50% -200"}) please i am new to this , so if anyone can give me example done with that transformation using a image instead of the box...please help me out.. my email id - [email protected]
  24. Hi, Is possible this css3 animation with gsap? http://jsfiddle.net/nGsk3/1/ Regards.
  25. I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
×
×
  • Create New...