Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation on 07/22/2019 in all areas

  1. The reason that worked by removing it, Is because the rotation: 0.01 was adding a new rendering layer. By removing it the browser didn't have to take a snapshot of the font and add its horrible anti-aliasing which is what you saw at the end of the tween transition. Sometimes adding/removing certain CSS properties or adding/removing CSS transform specific properties can resolve that, since the browsers require other properties in order to render font correctly. But glad you got it working. LOL.. i just like making as many browsers render the same, especially if your selling products or services so you can reach the broadest audience (customers) possible. Knowing is half the battle, yo joe :)
    5 points
  2. Hi @Jiri Welcome to the forum and thanks for joining Club GreenSock. Using a different animation for reverse can sometimes be a bit tricky. Here are a couple threads that may be helpful. That being said, I think a simple toggle would work well in your case. Here's a fork of your pen. https://codepen.io/PointC/pen/wVKRbw Another option is to use one timeline with a pause in the middle. Here are a couple demos I made for different thread answer but they show the general idea. https://codepen.io/PointC/pen/oPELMe https://codepen.io/PointC/pen/GXQWJw Hopefully that info helps. Happy tweening and welcome aboard.
    3 points
  3. Honestly I'm out of my element with the intersection observer API here so I won't be able to help you with that, sorry The one thing that gets my attention is the fact that the animation's target is the same element. If we're not talking about a dynamic element why not create the animation in the same component and trigger it with the intersection observer (if that is even possible). By playing a bit with your code and adding some callbacks I can see that the animation is actually starting, updating and completing, so the issue lays on the DOM node passed to it not being affected by the GSAP instance which is odd. Unfortunately the only advice I can give you is try to create your animation inside the component and just control that instance instead of creating it over and over again and use that in the component's hook.
    3 points
  4. Hi @OSUblake, Great and so easy ... https://codepen.io/mikeK/pen/BXNOgN Happy scrolling ... Mikel
    3 points
  5. Hi @Jiri It's because your code is using the conditional `menuAnimation.reversed() ? menuAnimation.play() : menuAnimationBack.reverse()` Which plays fine the first time, because `menuAnimation.reversed()` is true, and when that animation is run it sets to false, which, then, isn't reset back to true by your `menuAnimationBack.reverse()`.
    2 points
  6. Hello and welcome to the forums! Please check out this thread for a very useful slider implementation by our very own Craig (PointC): If you have a particular error that you'd like us to help you solve, please make a minimal demo using something like CodePen so that we can see your code and be able to help you more easily. For more information about that, check out this thread: Happy tweening!
    2 points
  7. So trying to work around an issue/bug in Chrome (latest version only as far as I can tell) where it only looks at an initial value of SVG Blur Filters (specifically, in this case, the stdDeviation attr). I understand that animating defs can cause some very mixed results, but I can't think of a good alternative (aside from Canvas/GL) I have a solution that works, but it seems really hacky (un-comment lines 8-15). Can anyone think of a better solution ? https://codepen.io/elegantseagulls/pen/XvmYwy
    1 point
  8. How about something like this? https://codepen.io/PointC/pen/bXVPWY Does that help?
    1 point
  9. There's more good information on `.reversed()` here:
    1 point
  10. Thanks! As I was researching the best ways to do scroll animations... that's when I learned about intersection observer. And for performance reasons, "they" said to stay away from scroll events because the window is constantly listening even when the element is out of the viewport. My needs are pretty small... I think. The most animations I have are on a page where I have small benefit paragraphs with a SVG icon. I wanted to animate these icons on scroll. Some of them just for user experience (something cool)... some of them because they help show what the benefit paragraph is talking about... a little demo. I've used scroll magic in the past and it seems to work fine, but I feel like I always need to be on the bleeding of performance and page speed. Thanks for the demos. I'll have to dig into the moon landing one for sure.
    1 point
  11. Hi @puneetsakhuja, As I mentioned, you need For the 'braked scroll effect' the objects #scroll / #scrollDistance and its css plus the js code ... https://codepen.io/mikeK/pen/LwpLZV Happy tweening ... Mikel
    1 point
  12. Hi @Rodrigo, And my element is not REACT ... Your hint is super: https://codepen.io/mikeK/pen/GVpojX Happy tweening ... Mikel
    1 point
  13. Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?
    1 point
  14. Hi @OSUblake, Fascinating logic. As always very instructive. I like it: Thanks Mikel
    1 point
  15. Hi @Willyakabi I would have an SVG cover the entire area, figure out where your words are located using getBoundingClientRect or getClientRects, and draw stuff based on those coordinates.
    1 point
  16. Shhhh...don't tell anybody...we discovered how to inject magical browser pixie dust that turns JavaScript into native machine code and offloads everything to the GPU to make quick work of animations. Kidding. The real answer is...well...somewhat complex. Here's a quick (but not complete) list of our techniques: Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.) Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly. Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary. Cache some important values internally for faster updates. For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster. In short, we've spent a LOT of time focusing on performance. The platform has been in development for many years, and we've learned a lot. jQuery wasn't built for high-performance animation. It's an all-purpose utility library (and a very good one at that). GSAP, on the other hand, is highly-tuned animation engine that rendering-layer-agnostic, meaning you can use it to animate canvas stuff, DOM elements, WebGL, or almost anything that JavaScript can touch. The underlying JavaScript is made to be very fast, and very flexible. It scales well, plain-and-simple. I can't really speak to why CSS Animations/Transitions aren't as fast as you might expect, but I did write an article that addresses many of the myths out there, and performance is one of the biggies: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ I'm really glad to hear that you're noticing a difference with GSAP and it's serving you well. Happy tweening!
    1 point
×