OSUblake last won the day on October 22

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,827
  • Joined

  • Last visited

  • Days Won

    383

Posts posted by OSUblake


  1. Yeah, sometimes it can be hard to come up with a good compromise for all the different devices and displays.

     

    You could also make the ratio conditional so regular displays won't use a higher resolution.

     

    var two = new Two({
      autostart: true,
      fullscreen:true,
      type: Two.Types.canvas,
      
      ratio: window.devicePixelRatio > 1 ? 1.5 : 1
    
    }).appendTo(document.body);

     

    • Like 4
    • Thanks 1

  2. I also saw some errors. You need to wrap your calls with a function.

     

    function changeStyleTo(style) {
      
      if(style == 'fill') {
        new TimelineMax()
          .to(prism.fill.stops[0], 0.3, {color: '#3850CF'}, 's1')
          .to(prism.fill.stops[1], 0.3, {color: '#00FFEE'}, 's1')
        
          // .call(prism.noStroke())
        
          .call(() => prism.noStroke())
      }
      
      if(style == 'stroke') {
        new TimelineMax()
          .to(prism.fill.stops[0], 0.3, {color: '#000'}, 's1')
          .to(prism.fill.stops[1], 0.3, {color: '#000'}, 's1')
        
          // .call(prism.stroke = linearGradient)
        
          .call(() => prism.stroke = linearGradient)
      } 
    }

     

    • Like 2

  3. I didn't notice any problems on my computer.

     

    If you're using a HiDPI monitor (retina, 4k, 5k, mobile), it's just a lot of pixels to draw. You can try lowering the resolution. It won't look as sharp, but it will run faster.

     

    var two = new Two({
      autostart: true,
      fullscreen:true,
      type: Two.Types.canvas,  
      
      ratio: 1 // devicePixelRatio
      
    }).appendTo(document.body);

     

     

     

    • Like 2

  4. 24 minutes ago, kbeats said:

    I'm not the best at math, but I thought by taking half the windows height and subtracting half the images height (then doing the same with the width), it would put the object being tweened at the center of the screen? 

     

    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.

     

     

     

     

     

     

    • Like 5

  5. 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>
        )
      }
    }

     

    • Like 5

  6. 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)
    }

     

    • Like 3

  7. 23 minutes ago, flowen said:

    I can fix it by replacing TimelineMax with TweenMax so I feel confident saying that somehow TimelineMax doesnt' have these methods. Though the doc's say they do.

     

    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

     

     

     

    • Like 3

  8. 4 hours ago, teejay_hh said:

    Is there a way around this (without adding a margin-bottom to the ul list). 

     

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

     

    • Like 3

  9. 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. 

     

     

     

    • Like 5

  10. 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.

     

     

     

    • Like 6

  11. 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.

     

     

     

     

     

     

     

     

     

    • Like 4

  12. 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.

     

     

     

     

     

    • Like 1

  13. 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.

    • Like 4

  14. 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

    • Like 4