OSUblake last won the day on October 16

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    ScrollTo and position Sticky

    Probably not. If you can't change the markup, then you're going to have to manually calculate the scroll amount.
  2. OSUblake

    Callback function in a timeline fires before complete

    This is what happens when you tell CSS and JavaScript to animate the same thing.
  3. OSUblake

    List Animating Oddity

    I got the same result using vanilla JS, but I don't know if it is a bug. @GreenSock will have to verify that one. I wouldn't expect it to work because you're trying to animate objects with different types in the same tween. Elements will use the CSSPlugin to set x, while a regular JavaScript object doesn't need any plugins. I've accidentally done that a few times in the past, and I've learned that it's best not to mix different object types.
  4. OSUblake

    Tracking / privacy / Cloudflare

    Hi @greentoe GreenSock's JavaScript files do not track users, nor do they employ any type of cookies. Cloudfare hosts the most popular JavaScript libraries, on a free, public CDN. GreenSock has nothing to do with that, other than being popular. Does Cloudfare use cookies? Yes. Are all cookies bad? No. Cloudfare uses cookies for security purposes and they cannot be disabled. Privacy Badger is complaining about the cfduid cookie. https://support.cloudflare.com/hc/en-us/articles/200170156-What-does-the-Cloudflare-cfduid-cookie-do- https://support.cloudflare.com/hc/en-us/articles/200169506-Can-I-disable-Cloudflare-cookies- If that's still issue for you, you can use your own self hosted GreenSock files instead of Cloudfare. I would ask whoever created your theme on how to do that. It shouldn't be too hard. I'm not familiar with Wordpress, so I really can't advise on that.
  5. OSUblake

    Canvas animation in Vue.js

    Hi @svyar Your coordinates were out of bounds, but it looks like you were able to figure it out. Not sure what type of effect you were going for, but you might be able to learn from this.
  6. OSUblake

    Simultaneous transform tweens on an object

    Yeah, just rotate the text.
  7. OSUblake

    Simultaneous transform tweens on an object

    Hi @Em Karimifar You should always let GSAP handle transformations you plan to animate. When you change the transform attribute, it's going to conflict with the matrix GSAP is going to set with the blinking. It's also going to mess up the transform origin. Is there a particular reason you're using text for circles? The alignment is a little funky. I would use regular circles, and wrap them in a <g> element. There's a problem with that animation. Depending on the screen dimensions, the eyes might move only a little bit, or too much. Assuming your SVG maintains the same aspect ratio, this version will clamp the eye movement on the x-axis to the width of the SVG, and the movement on the y-axis from 10% to 50% of the SVG height. And here's a good thread that shows how to work with mouse coordinates inside an SVG.
  8. OSUblake

    media query resize

    Stop setting transforms in your CSS for stuff that you plan to animate. That includes dragging.
  9. OSUblake

    Smooth Page Scroll

    Everything is based on linear interpolation (lerp) being used like an exponential ease. Explaining dt and deltaTime can be hard to explain, so I'm just going to link to this. https://gamedev.stackexchange.com/a/149106/109260 I had one line of code commented out. Use one or the other. Frame dependent animations can slow down during high CPU usage. if (Math.abs(item.endOffset - item.currentOffset < this.endThreshold)) { item.currentOffset = item.endOffset; } else { // FRAME DEPENDENT // item.currentOffset += (item.endOffset - item.currentOffset) * this.scrollEase; // FRAME INDEPENDENT // item.currentOffset += (item.endOffset - item.currentOffset) * dt; } That gamedev answer also mentioned Zeno, which is like a paradox. You can never arrive at a destination because the steps just get smaller and smaller. The threshold stops calculating stuff after a certain limit, i.e. changes you won't see because they are too small.
  10. OSUblake

    Smooth Page Scroll

    I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.
  11. OSUblake

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

    It's a waste of time to worry about such things because they probably won't matter. At least, not for the scenario you described. Go for the solution that is the easiest to read, understand, and update, C. If you notice a performance problem, investigate it, but there's a 99.99% chance that it will be related to what you're animating, i.e. SVG.
  12. OSUblake

    Canvas animation in Vue.js

    Nah. I don't have a lot of experience with frameworks like Vue, Angular, React, etc. They're really just JavaScript questions.
  13. OSUblake

    Canvas animation in Vue.js

    You can't say it doesn't work if there isn't any animation code. Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to. https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524 And I'm pretty sure you can make a canvas animation reactive. These examples use state. https://vuejs.org/v2/guide/transitioning-state.html
  14. OSUblake

    DrawSVG starting at 50% 50% with stroke-linecap="round"

    Have you tried calling SVG technical support? That's just the nature of how strokes are drawn. The way I've dealt with that in the past it to animate the scale or stroke width from 0.
  15. OSUblake

    TweenMax rotationX with Canvas and EaselJS

    You're thinking of the DirectionalRotationPlugin, which is baked into the CSSPlugin. Try using it explicitly. https://greensock.com/docs/Plugins/DirectionalRotationPlugin TweenLite.to(obj, 1, { directionalRotation: { rotX: "20_ccw" } });
  16. OSUblake

    GSAP poor frame rate of Safari

    That wouldn't surprise me because Chrome and Safari don't work the same way. Safari doesn't seem to optimize a lot of stuff, as seen here. Safari is webkit, and Chrome is blink. Layout and paint can hurt performance, and Safari has to do a layout and paint for pretty much everything. Also, try adding will-change: transform; to your CSS. Just be aware that it can cause other issues, particularly if scale is involved. https://greensock.com/will-change
  17. OSUblake

    Smooth Page Scroll

    What are you trying to change? That loop is based on the demos and videos in this threads. Instead of moving elements towards the mouse, I'm moving elements towards their original starting position.
  18. OSUblake

    GSAP poor frame rate of Safari

    GSAP doesn't do any rendering, so it's probably not related to GSAP. Does it perform better if you reduce the size of the window? A retina display has A LOT of pixels to render. That's like 4k or 5k, and requires good hardware to run at a good framerate.
  19. OSUblake

    Perspective on SVG transform

    Firefox is the only browser that supports 3d for SVG, but it's very limited. You can wrap your SVG in a div, and animate the div instead.
  20. OSUblake

    Tweenmax scale to performance issues (jumpy, intermittent)

    Which div are you referring to? I looked at the site, and everything is jumping around and flickering when I scroll. One problem is that the overflow on the body keeps changing, but I don't know if that's the problem you're talking about.
  21. OSUblake

    Tweenmax scale to performance issues (jumpy, intermittent)

    I can't access your site, so I can't see what's going on. GSAP doesn't do any rendering, so I don't see how this could be related to GSAP. Does your div contain SVG or complex fonts/text? That can be slow. Scrolling can be a bottleneck, and ScrollMagic isn't a GSAP product. https://github.com/janpaepke/ScrollMagic If you need something to be pinned, consider using CSS sticky positioning instead. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
  22. OSUblake

    Controlling Timelines within Functions

    It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here. If you need play/pause, you can do this. function pause() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].pause(); } } function play() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].play(); } } Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6). https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca https://greensock.com/learning-gems MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  23. OSUblake

    Controlling Timelines within Functions

    Hi @TradingBo You don't have a master timeline, at least not in the sense that you think you do. Your functions are only returning the very last timeline created in a loop. You would need to add every timeline created in a loop to an array, and return that array. But don't be like this dude when it comes to master timelines. I see far too many people waste far too much time building master timelines that serve no actual purpose. See if this helps out.
  24. It's hard to advise without a demo, but you should use callbacks e.g. onComplete. There should be no reason to ever poll an animation to see if it's complete.
  25. OSUblake

    Rotating around a poin

    When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.