Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/28/2018 in all areas

  1. An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)
    6 points
  2. Thank you guys, @OSUblake, you saved the day as usual translateZ fixed the clipping of the card in Safari. Btw, the Firefox version that I see the issue is the old Firefox51. In the newer versions this clipping does not happen.
    4 points
  3. 3 points
  4. Hello @Anya and welcome to the GreenSock Forum! Keep in mind that you should be able to just use translateZ(0px) instead of translateZ(100px). Using the translateZ() CSS function on the parent just triggers it to be on its own rendering layer. Which changes the stacking context by the mere presence of that CSS property on the element. Which also sometimes negates the use of having to use CSS perspective on the same element with translateZ() values other than 0px, to prevent artifacts. Happy Tweening!
    3 points
  5. Haha! I didn't even think about that. "You Might Not Need ScrollMagic if..." I've been throwing that saying around for like the past year or so, but I got the idea from You Might Not Need jQuery. Later on I found out that there are several sites like that. https://youmightnotneed.com/
    3 points
  6. Hi @lisartur I'm not sure if you meant preventing additional clicks during the active tween or you wanted it to count each click and continue? If it's the former, I'd add an isTweening() check like this: More info: https://greensock.com/docs/TweenMax/static.isTweening() If it's the latter, I'd probably just increment/decrement a rotation variable and feed that into the tween. That way if you click 10 times, you'd end up at -900 degrees. Maybe something like this: Hopefully that helps. Happy tweening.
    3 points
  7. I don't see a problem in Firefox. For Safari, translateZ can fix clipping issues.
    3 points
  8. @Shaun Gorneau - That's known as GreenShock.
    2 points
  9. Why don't you want to kill it? Is it causing a jump when you create a new one? Or are you trying to keep the duration the same? Do you think you can make a simple demo of what you're trying to do? There might be some other approaches if I can see what's going on. You can use the physics plugins on CodePen by using the url from here.
    2 points
  10. You're correct. unshift adds an item to the front of an array. First he created the boxes array, and then loops through the node list, adding each node to the boxes array using unshift. Because he's using unshift instead of push, it reverses the order.
    2 points
  11. Absolutely! You'll want to reverse the collection of ".box". With vanilla Javascript you can do the following
    2 points
  12. My mind totally read that in the voice of Jeff Foxworthy
    2 points
  13. You can draw a circle in 1 line of code using canvas or SVG. With CSS, you have to use multiple elements, like here, or a clip-path, which doesn't have good CSS support. The easiest option seems like SVG, then canvas, followed by CSS in a distant last.
    2 points
  14. I don't suggest. Just answering. It's not easier, it's more flexible. We do different things.
    2 points
  15. Hi @nmarketti You can, but I'd then ask why do you want to do that? I've seen some CodePen demos creating this effect, but they seem a bit over-complicated for the end result. DrawSVG does it with one line of code and SVG scales perfectly with window resizes. I would think SVG would be the easier choice, but that's just my two cents worth. Others may drop by with different thoughts or an easy solution. Happy tweening.
    2 points
  16. Hi @TRIPLESENSE REPLY I'm not aware of any callback that includes onDrag and onThrowUpdate - so - yes, use both with the same function. Happy tweening.
    1 point
  17. Ah, I think I see what you want. Here's a codepen: The concept is borrowed from this one (which is actually more complex because it needed to be implemented onPress so that you could continue dragging from that spot, but your demo doesn't require that)... Does that help?
    1 point
  18. One suggestion though. Array methods like forEach won't work on a NodeList in older browsers like IE. So I would do it like this. var boxes = Array.prototype.slice.call(document.querySelectorAll(".box")).reverse();
    1 point
  19. @jesper.landberg .. When I use that progress trick i don't count on it for smooth 60fps, it just helps with initial cost up front. In my above replies, I also mention that it depends on getting all the correct CSS properties to play nice cross browser, so it is just one cog in the wheel. With browsers like webkit browsers like Chrome, Safari, and MS Edge constantly changing how CSS properties render, its not written in stone. Sometimes you have to do the opposite to get smoothness, so it is like Blake said you will have to play around and see.
    1 point
  20. Unfortunately, that was the last gold badge I had in stock. They are custom made in a monastery in the Himalayas and transported on the Silk Road to Istanbul where they are put on carrier pigeons that island hop across the Atlantic. It takes several months. I'm going to try and source a local supplier, I'll let you know when yours comes in.
    1 point
  21. Hi @DevSaver, It's hard to troubleshoot with just an image. Could you put that into a demo for us? It doesn't have to be your actual project assets. Just enough to demonstrate the issue would be great. If you could do that, I'm confident we can point you in the right direction. Thanks and happy tweening.
    1 point
  22. Are there T-Shirts? Follow up question: where do we get these gold badges that Shaun has now? My Moderator Badge is still green. Is there a Gold Level and does that lead to a Platinum Level?
    1 point
  23. I'm glad to see Blake and Jonathan still love each other and all is right in the world again. Each time you guys mentioned FLIP, all I could think of was this scene from The IT Crowd.
    1 point
  24. Many thanks Carl, this will solve a lot of my problems, again GSAP saving our lives. I love this Lib
    1 point
  25. OSUblake, Sir your work saved me from sleepless nights. Thank you master!
    1 point
  26. I get what you're asking, but I'm just not sure how you could do that without modifying the scroll behavior. To make it seem like the scroll is getting harder, you would have to add a bunch of extra space to the bottom, and then start translating all the content down once you reach a certain scroll position, but with some friction. I think coding something like that would be pretty difficult.
    1 point
  27. Yep. That should give you an idea on how to get started, but it's not a perfect solution. For example, if the mouse is equal distance between two or more points on a path, which point should it use? That's something you'll need to figure out.
    1 point
  28. That's usually not a issue. You've just come across a tricky situation. If you tried to convert your CSS over to three.js it would probably transform it the same way GSAP is doing it. While not ideal, sometimes using a wrapper can help alleviate some of those problems. For example, I converted this animation over to GSAP... well, it originally had the rotateX at 70deg. http://jsbin.com/xolacasiyu/edit?js,output But doing a straight conversion to GSAP didn't work as expected, so I just applied the rotateX transform to a wrapper element. Just an idea. I don't know if that will work for everything you are trying to do.
    1 point
  29. Not sure what the issue is, it looks same on Firebox and Chrome on windows. Maybe you are missing something from your production code. You can confirm that by opening your demo in debug mode, which will prevent codepen from messing your code. You can read following thread about stacking context, see if that helps.
    1 point
  30. Yes, I think we worked it out. Sometimes it's very hard to see the point of a FLIP animation, and it shouldn't be used for every animation. It's really only useful for when the DOM has changed, and you don't know what the end values are. Once you figure out what the end values are, you could do a regular .to() tween, but if the DOM changes during the animation, then it might jump at the end. TweenLite.to(element, 1, { x: 300, y: 200, scale: 2 }); The invert step helps fix that problem, so you end up with an animation that looks more like this. TweenLite.fromTo(element, 1, { x: -300, y: -200, scale: 0.5 }, { x: 0, y: 0, scale: 1 });
    1 point
  31. For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration. Here is a quick codepen taking ScrollMagic out of the equation and using the users scroll position to progress a Timeline. I didn't spend to much time on making sure the timings match up, but it should give you the idea.
    1 point
  32. You guys crack me up. Ha! Brightened my Sunday, that's for sure. Craig, you're definitely developing a style with those clever images with overlaid witty captions.
    1 point
  33. GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
    1 point
  34. I'm gonna go ahead and post this again.
    1 point
  35. No problem. A lot of people don't think about using loops to build timelines, but that is what GSAP is doing behind the scenes for doing stuff like staggering tweens. That's why I said it really didn't matter if it was sequenced or staggered. Here's my example again with an overlap of the parent containers fading in and out. The only thing I added was label. http://codepen.io/osublake/pen/ZWeVVZ?editors=0010
    1 point
  36. Check out onThrowUpdate http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/ Draggable.create("#foo", { throwProps: true, onThrowUpdate: function() { console.log("X: %s Y: %s", this.x, this.y); } });
    1 point
  37. 1 point
×
×
  • Create New...