Carl last won the day on July 13

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,803
  • Joined

  • Last visited

  • Days Won

    518

Carl last won the day on July 13

Carl had the most liked content!

Community Reputation

8,074 Superhero

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Carl

    GSDevtools not Happening?

    Hi and welcome to the GreenSock forums and Club GreenSock! Sorry to hear you are having troubles. To load GSDevTools there are 2 steps. 1: Make sure you are loading GSDevTools into your page, most commonly via a script tag. In your example it would be like <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script> <script src="js/GSDevTools.js"></script> <script src="js/index.js"></script> It doesn't matter if you load TweenMax from the CDN or locally 2: Activate GSDevTools using GSDevTools.create(); I've updated the demo you created to load and activate GSDevTools CodePen has a feature that lets you export Pens as zips so you can download and run them locally. I will PM you a version that works locally in just a minute.
  2. Carl

    How to reset animated object to default state

    Hi and welcome to the GreenSock forums, Thanks for the demo. Does reversing the animation do what you want?
  3. Carl

    External SVG TweenMax.set rotate (on load)

    Please see discussion and solutions here
  4. Carl

    SplitText menu help

    Thanks for the demo. To answer the first question, the reason the staggerFromTo() animation on the text was happening too early was because you had the "complete" function in the place of the position parameter. bad: complete is in the wrong place so the position gets set to an absolute time of 0 tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, complete); good: using the position parameter of "+=0" means add this 0 seconds after the previous animation has ended. You normally don't need position of "+=0" because its the default value, hower since you are using the onCompleteAll parameter, you need to put something in for the position tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, "+=0", complete); I added a background color to the menu so that its easier to see what is happening
  5. Carl

    MorphSVGPlugin.pathDataToBezier() with external SVG file

    When you load an svg like that you can't access the internal paths and shapes of the SVG. If you want to keep your markup clean you will have to inject the SVG data into your document. Please see solutions offered here:
  6. Carl

    Site will not working in safari

    Sorry, I really don't know what your site is supposed to look like or what it is supposed to do. I looked at the homepage and didn't see any errors. We really have to keep our support focused on the GSAP API. Kind of tough to trouble-shoot why a live site isn't loading properly.
  7. Carl

    GSAP with mouseover JQuery

    looks like there's some action on this one. here is another demo. https://codepen.io/GreenSock/pen/YjXxrz?editors=0010
  8. Carl

    snap drag rotation issue

    Excellent. Thanks for letting us know you got it solved. Happy Tweening!
  9. @chiho this is the same question you asked here and Blake already invested time trying to help. It becomes incredibly difficult to offer assistance if we see posts being duplicated and deleted. Please keep your discussion in 1 thread.
  10. Carl

    Nested timeline remove pause automatically when nested

    The editor looks really cool. Nice work. Thanks for sharing.
  11. Hi Saroj, its very difficult to understand what you are having trouble with. Please stop replying to posts that are many years old with no new information.
  12. Hi Saroj, Welcome to the GreenSock forums. It isn't proper for everyone that has been part of this old conversation (resolved 2 years ago) to be bothered with new notifications. You may have a similar issue, but quoting the initial question doesn't really tell us what you need help with, or why the solution offered isn't working for you. Please start a new topic that contains a clear description of the problem you are facing. We'll be happy to help.
  13. Carl

    Performance Issues only using translate3d

    CSS filters like blur are huge performance killers (as you've seen). What you are doing is probably one of the most strenuous things for the browser to render (moving very large things with filters and variable transparency). If you remove the blur and gradients and use just a solid color you'll see things run much smoother on under-powered devices. GSAP can set the properties you need super fast, but the browser's rendering is a huge bottleneck. It might be worth experimenting with SVG like Mikel suggested or giant pngs. I think you'll find that each has their downsides and you'll probably get different results in different browsers. Unfortunately, I suspect it will take a considerable amount of testing and compromise.
  14. Carl

    Rotate and scale translation changed

    You already have a transform on that element so when you change the transform origin, it changes how those transforms are applied and you get a visual shift. Notice what happens in this demo without any GSAP when the transform origin changes: One suggestion would be to do your initial rotation with transform origin of "0 0" already set and use translateX, translateY to position it where it should be. Another option is to rotate the outer div as you are but apply the scale only to the image