Carl last won the day on July 31

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,007
  • Joined

  • Last visited

  • Days Won

    487

Carl last won the day on July 31

Carl had the most liked content!

Community Reputation

6,224 Superhero

7 Followers

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling
  1. Yeah, I'm in the same boat as PointC. I looked at this earlier and had a tough time putting it all together. Perhaps we can just focus on one of the issues first in a pen that only has enough assets and code to illustrate that issue. Then we can build from there if other issue persist.
  2. Great job, Craig. Yup, the target doesn't need to be in the SVG but it does make it easier. SLSCoder, welcome to the forums. Let us know if you need more help getting started. As Craig AKA PointC mentioned its best to provide a CodePen, plunkr or jsFiddle demo so we can easily see all the moving parts, edit and provide solutions. Happy Tweening!
  3. Just jumping in. Saw PointC's pen working embedded and linked versions. - make sure you hit the "run pen" button on the embedded ones.
  4. That pen uses jQueryUI for the slider which isn't touch-enabled. I haven't used it in awhile but this touch-punch utility used to solve the problem: http://touchpunch.furf.com/ Check out this demo that uses a native HTML5 input control. It should be touch-enabled by default:
  5. The solution here is to create a function that creates a random shake timelime that you can place in your main timeline. This seems very similar to Mikel's situation where he needed different sequences of random lip movement. Please see my post and demo here to see how the random animations were nested into a parent timeline:
  6. Great. The CodePen demo is helpful. Not sure I'm understanding the "rotate freely". Are you talking about the way it snaps to 10 degree increments because of the liveSnap code? liveSnap:{ rotation: function(value) { //snap to the closest increment of 10. return Math.round(value / 10) * 10; } } remove that code and it will animate smoothly when you drag. I may be mis-understanding so feel free to clarify
  7. Glad to hear you are making progress on your project. Please take a few moments to learn how to use CodePen, Plunkr, jsFiddle or any other free online html editor. It doesn't require much more than copying and pasting your html, css and js into the appropriate panel and saving. The demo below already loads TweenMax and Draggable. Just "edit on CodePen", fork, add your code and save: Trust us, it is soooo much easier than saving html files uploading them and making us download, look, edit, upload etc. From your demo it looks like the divs spin freely and fine when you drag. ThrowProps is responsible for the movement that occurs after you release – that super smooth flick and spin action. You are probably still getting re-directed to the GreenSock site because you are still loading the ThrowProps script. Remove this code <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script> In order to detect which card should have it's z-index changed you could maybe use an onDrag callback to get the rotation of the Draggable. Based on the rotation of the Draggable you should be able to determine which card is facing up. So if you had 4 cards spaced at 90 degree intervals (0, 90, 180, 270) and you rotated 180 degress you would change the index of the third card. You would probably want to build in some sort of padding so that you can detect whether or not a card is within a 5-10 degree range of each interval as the rotation will probably never exactly equal 0, 90, 180, or 270 (unless you are using snapping). And then once you set the z-index to 1 I suspect you will need to turn it off when they spin again. Draggable can generate the values you need and has a wide array of callbacks but there is still a decent amount of custom code involved to get it to work. There is a ton that goes into building a site like you referenced. It was ground-breaking when it came out years ago and still is. There may be an expert around here who can whip something up but it isn't the type of use that is built into Draggable. We really do our best around here to help where we can with questions related directly to features provided in the GSAP API, but unfortunately we just don't have the resources (time) to be able to try to re-create these types of cutting-edge effects. A project like this would easily take me hours to set up and try to build the right way.
  8. Mikel's example works great, but it also appears that switching the from() tween to a to() tween will do the trick as well var tl = new TimelineMax({ repeat: -1, repeatDelay: 3, delay:3 }); tl.add("begin"); tl.to("#text",1,{opacity:1}); In your css you gave #text and opacity of 0 so you need to tween to an opacity of 1 for it to appear.
  9. It's Plugin Plursday! hmm... maybe not.
  10. Sorry, it's a bit unclear what you are referring to or trying to do. The first code snippet is valid, the second would only work if there was a position plugin that could parse objects.
  11. Oh, sorry, I misunderstood what you needed, I thought you just wanted the knob to control scrolling. When you scroll the div, do you want the knob to spin also? If so, the tween-method I suggested goes out the window. There will need to be a bit more wiring between the scrollbar and the knob (as in the original demo). I'd suggest looking into the demos Blake provided in the link above and see if you can get a scrollbar on a div to generate a value between 0-360. You can then use that number to update the knob.
  12. Wonderful explanation, Blake!
  13. Good news, @GreenSock took a peek at the clip-path issue and made some tweeks so the complex strings should work now. No need for generic object stuff. Give this a look: It loads a beta version of TweenMax with CSSPlugin: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js As Blake noted earlier its important that the values you are tweening from and to have the same number of numbers.
  14. Ha. Thanks, Blake. That's definitely a quicker way to get things done! I never think of BezierPlugin for things other than position. Doh!
  15. Ha, don't worry. I kind of stole this from Jack recently. Overheard it while I was re-doing the bathroom tile