OSUblake last won the day on November 10

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. OSUblake

    Tween image to center of window

    Close. You need to find the center of your images. I put position: relative; on the container so the image left and top values will be relative to it.
  2. I can see where you're trying to go with this, so maybe something like this. Just play the timeline on show. export default class TitleInnerRef extends Component { constructor(props) { super(props) this.el = React.createRef() this.st = null this.tl = new TimelineMax({ paused: true }) } componentDidMount() { this.st = new SplitText(this.el, { type: 'lines', linesClass: 'overflow' }) TimelineMax.set(this.st.lines, { yPercent: 150 }) this.tl.staggerTo(this.st.lines, .5, { yPercent: 0 }, .05) } title = () => this.props.title show = () => { return this.tl.play(); } render() { return ( <RefTitle regular = {this.props.regular} _ref={node => (this.el = node)} dangerouslySetInnerHTML={{ __html: this.title() }}> </RefTitle> ) } }
  3. It's a JavaScript error. Look at the console here. You need to fix the errors. Use TweenMax... componentDidMount() { this.st = new SplitText(this.el, { type: 'lines', linesClass: 'overflow' }) TweenMax.set(this.st.lines, { yPercent: 150 }) } show = () => { TweenMax.staggerTo(this.st.lines, .5, { yPercent: 0 }, .05) } Or use timeline instances... componentDidMount() { this.st = new SplitText(this.el, { type: 'lines', linesClass: 'overflow' }) const tl = new TimelineMax() tl.set(this.st.lines, { yPercent: 150 }) } show = () => { const tl = new TimelineMax() tl.staggerTo(this.st.lines, .5, { yPercent: 0 }, .05) }
  4. It looks like you're getting confused by "static" and "instance" methods. In the docs, a static method will include the class name, like TweenMax.set(). An instance method will look like .set(). Every method for a timeline is an instance method except for one, TimelineMax.exportRoot(). An instance method means it's only available on an instance, so you have to create one. const tl = new TimelineMax() tl.staggerTo(this.st.lines, .5, { yPercent: 0 }, .05) That's really just a convenience method for this. const tl = new TimelineMax() tl.add(TweenMax.staggerTo(this.st.lines, .5, { yPercent: 0 }, .05)) Timelines are good for sequencing. Check out this page and video. https://greensock.com/sequence-video
  5. 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.
  6. OSUblake

    Callback function in a timeline fires before complete

    This is what happens when you tell CSS and JavaScript to animate the same thing.
  7. 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.
  8. 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.
  9. 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.
  10. OSUblake

    Simultaneous transform tweens on an object

    Yeah, just rotate the text.
  11. 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.
  12. OSUblake

    media query resize

    Stop setting transforms in your CSS for stuff that you plan to animate. That includes dragging.
  13. 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.
  14. 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.
  15. 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.
  16. 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
  17. 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.
  18. 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" } });
  19. 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
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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
  25. 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