OSUblake last won the day on November 10

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    3,871
  • Joined

  • Last visited

  • Days Won

    390

OSUblake last won the day on November 10

OSUblake had the most liked content!

Community Reputation

8,735 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

16,650 profile views
  1. OSUblake

    How to see if there are animations running?

    If don't want to wait for animations, set the globalTimeScale to a really high value. https://greensock.com/docs/TweenMax/static.globalTimeScale()
  2. OSUblake

    Using a keypress to animate the next element

    Hi @bennyboy1978 Here's a demo I made for this thread. You may find it useful as it deals with blur events.
  3. OSUblake

    Angular 6 --build-optimizer fails to find TweenMax

    TweenLite is the base file that all the other files import from, and it seems to be working correctly. You can check what's installed by logging this out. console.log((window as any).com.greensock); Everything else like the CSSPlugin, TweenMax, TimelineLite, TimelineMax, etc ends up being undefined in the build. I have no idea what the build optimizer is doing to cause those problems. My guess is that Angular doesn't like the way TweenLite works with the Window object. I think your best bet is to add GSAP files to scripts in your angular.json file if you want to use the build optimizer. I didn't check, but you may need to use the umd versions for that.
  4. OSUblake

    Animating grid items on click

    Animating to a smaller image height is causing the modal to recenter, moving the image's position down. You could add an another element to maintain the height so it won't shrink. Another option is to clone the image, and animate the clone instead.
  5. OSUblake

    Animating grid items on click

    Habit mostly. It's also faster. And with FLIP animations, sometimes I don't want my props to permanently removed. If an animation is interrupted, getBoundingClientRect() can give you unexpected results because it takes transforms into account. Coordinates can be confusing. From this post. https://greensock.com/forums/topic/17406-is-there-a-default-x-y-of-element/?tab=comments#comment-78419 Sometimes I need to temporarily clear the cssText in order to do some calculation. // save and clear cssText var cssText = myElement.style.cssText; myElement.style.cssText = ""; // some calculation // put cssText back myElement.style.cssText = cssText; And sometimes I need to get a transform value inside a calculation. clearProps will remove the _gsTransform object from the element, which could throw an error if you're not careful. // Error TweenLite.to(element, 1, { x: 100, clearProps: "all", onComplete: function() { console.log(element._gsTransform.x); } }); // All Good 😀 TweenLite.to(element, 1, { x: 100, onComplete: function() { element.style.cssText = ""; console.log(element._gsTransform.x); } });
  6. OSUblake

    Animating svg drop shadow

    Are you using a HiDPI monitor, like retina, 4k, 5k. Those can kill performance, particularly with something that is costly to render like a drop shadow.
  7. OSUblake

    Calculate post-transform bounding box

    I'm pretty sure getBoundingClientRect works in all cases. The circle looks weird because it doesn't have corners, but it's correct.
  8. OSUblake

    Animating grid items on click

    Your DOM code is pretty verbose, so I made another version with lit-html. I didn't do a reverse a animation, but you could do it the just like the open animation. You don't have to reuse or reverse the same timeline.
  9. OSUblake

    Animating grid items on click

    I think @Carl did a good job pointing out the main issues you are having. It looks like you are trying to do a FLIP animation. This is a good place to start.
  10. OSUblake

    Set an element at a position along SVG path

    Are you asking how to move your element to the start of a path? If so, you're looking at the answer. A motion path is an array of points, with the first item being the start position. var start = motionPath[0]; TweenLite.set("#markerStart", { x: start.x, y: start.y });
  11. OSUblake

    Animations pause when browser tab is not visible

    @MSCAU Funny, I was just talking about that. It's going to be years before transform-origin is consistent in every browser. https://greensock.com/forums/topic/19333-troubles-with-svg-animation-and-mastertimeline/?tab=comments#comment-89856 GSAP solved that problem well over 4 years ago. https://css-tricks.com/svg-animation-on-css-transforms/
  12. OSUblake

    For all BANKSY fans

    I just quickly looked at your code, but that's probably the problem. You're calculating the position at the very start for all the walk calls. By referencing a function without parentheses, it will be called later. // called immediately .add(walk(1.1), "-=0.5") // called later .call(walk, [1.1], null, "-=0.5")
  13. OSUblake

    Save previous shape, MorphSVG

    If this is what you're trying to do, then ridiculous seems like a good option.
  14. OSUblake

    Troubles with SVG animation and masterTimeline

    If anyone is wondering why setting the transform origin in CSS for SVG elements is a bad idea - besides not being consistent in every browser, there's a new property that you may need to use in order to specify where the origin relates to. Spoiler alert: IE/Edge doesn't support it. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box view-box is kind of like setting svgOrigin with GSAP.
  15. OSUblake

    Troubles with SVG animation and masterTimeline

    Don't set transform and transform-origin in your CSS for SVG. It will not work in every browser, especially transform-origin. By default, GSAP uses the transform attribute for SVG elements. CSS > attributes. GSAP is correctly setting the transform, but your CSS is overriding it.