Search the Community

Showing results for tags 'transforms'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 8 results

  1. Hi guys, for some reason I can't get the 3d transform perspective working on my splittext animation - see codepen... It only seems to be working in Chrome / Mac. Any ideas? Thanks!
  2. TeamHype

    Missing Vendor Prefixes - TweenMax.to

    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!
  3. rag

    Scaled draggable snapping

    Hi guys, I want to make an 'endless' list that is draggable. Each list element needs to snap in the center of the screen. I got those parts working with throwprops' snaps and a proxy element. Now the whole thing also needs to be zoomable. That works too, but the snapping stops working when zoomed out. I can't figure out what parts I have to scale myself and what parts TweenMax scales for me. I set up this pen, im sure you will get where I want this to go: http://codepen.io/mbuesing/pen/XNRrog I put a green line in the center so you can easily see when an element is centered. The center of the element in the middle should always line up with the green line. In zoomed out mode that doesn't work. The calculated offsets are shifted. I suspect it has to do with the update function, in line 60 i subtract the double list width, but that isn't updated to the new zoomed out size. If I do changed it to that, the list will be in a wrong position after the zooming animation. Any ideas? Thanks Moriz
  4. jesper.landberg

    x/y/z vs translate? Any difference?

    Hi, I just want to know if there is any difference in using say { x: "50px" } VS { css: { transform: "translateX(50px" }}, performance wise etc? Is x/y/z always better when it comes to positioning? thanks
  5. Hey, I am currently working on a project that requires full page transitions. As an example pages are div elements that are approximately 1024x600 in size and contain content. Pages slide in and out from left to right (emulating the ebook feel). At the moment the page change/transition process goes like this: * Page in view has visibility 'visible' and willChange '' set * set willChange 'transform' on outgoing page *Slide outgoing page out of view * set visibility 'hidden' and willChange '' on outgoing element after animation finished * set visibility 'visible' and willChange 'transform' on incoming element. *Inserted delay (~300ms) - to allow some breathing room for browser paint times and composition(layer creation) *Slide incoming page into view * set willChange '' on incoming page once animation is finished I have put in the delay to give the browser time to paint and promote the div to a composite layer before animating for smooth animations. However the delay required on different devices obviously varies. Is this something lagSmoothing can help with or does any one have any other/better techniques for this type of situation? Jack has already suggested: Don’t alter the will-change property at all. Take the layerization hit at a time that’s less critical. Maybe at startup (not sure how many things you may have to layerize, so you may have to stagger things). You can, for example do TweenLite.set(element, {force3D:true}) and it’ll get layerized right away. That way, when you actually go to animate its transforms, it’s already layerized and ready-to-go. My understanding was that setting will-change:'transform' on the element layerized when it is set, so is there any differences between using that or TweenLite.set(element, {force3D:true}) ? The other thing is deciding when to layerize the pages. Because the pages are quite large doing all the pages ahead of time floods the GPU memory and would probably kill the device so it seems the only option is too layerize pages as they are needed. Since that can take some time depending on the device I am currently inserting the delay during the animation sequence to help but I would much rather a more dynamic approach (no need delaying on devices that dont need too or might need longer). Any input or advice would be appreciated, thanks.
  6. Thatemil

    SVG, transforms and IE

    Hello people! I was wondering if anyone has experience using Greensock to tween elements in inline SVG and getting it to work in IE (9 and up)? I'm creating a site with a lot of animations going on, and the graphics are pretty much exclusively in SVG. Most of the time, I'm wrapping inline SVG in HTML elements and then animating those, but in some instances, I really need to animate elements within the inline SVG document (e.g. moving things inside of a clip-path). Specifically (so far), I've wanted to move stuff by animating x/y. This works great in Chrome, Firefox, Safari (iOS and desktop), but fails in IE. It's really hard to debug why it's not working, so I thought I'd ask around if anyone has faced the same issues, or had ideas on why this is. No code sample at this point, but will try to provide one if needed.
  7. bunnie

    GreenSock CSS 3D transformations

    Hello All, I am very new to GreenSock plugins. I want to implement animations in my code as shown in the video in the starting. http://www.greensock.com/css3/ In the starting of the video, how the CSS plugin and CSS Special properties animates, I want the exact same effect to my labels. I searched for the plugin and code for that animation but I couldn't find it. Could you please let me know the code for that effect? Thank you! Thanks, Bunnie
  8. 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