Jump to content
GreenSock

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

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    4,260
  • Joined

  • Last visited

  • Days Won

    439

Posts posted by OSUblake

  1. 1 hour ago, Roddy said:

    I guess it was the way he posed the question - "Why are you even using a table?" that seemed a  bit off-putting. It also seemed a bit off topic (especially after we had solved the issue). 

     

    Sorry if it came off that way. I brought up CSS grid because animating tables can be very problematic. Tables were not designed with animations in mind, which is why you still have to use attributes to get some table elements to display correctly. 

     

    And there is usually more than one way to solve a problem. Using CSS grid was part 1 of my recommendation. You called me a troll before I got to part 2 below.

     

    1 hour ago, Roddy said:

    I was much more interested in the reason those lines would even show up.

     

    The gaps are caused because of rounding. An 81px wide element at a scale of 0.786 is 63.666000000000004 pixels. Not exactly a whole number, so you might see artifacts bleeding through. To get rid of those gaps, you can use will-change: transform; in your css. The browser can rasterize (take a snapshot) of the layout before scaling gets involved. 

    https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

     

     

     

    • Like 4
    • Thanks 1
  2. 4 minutes ago, Dipscom said:

    AMP is Google taking a leaf out from Facebbok's book and trying to create its own walled garden.

     

    Not really. Google has its own walled planet sans China. I'm not saying that's a good thing... but that's the reality of the internet right now.

     

    6 minutes ago, Dipscom said:

    But I will conced it is groundbreaking technology.

     

    I agree. Web components are awesome. No React. No Vue. No frameworks. Just good old fashioned HTML. 

  3. 58 minutes ago, qqignatqq said:

    With jquery, the problem was solved and I showed the code to solve the problem from the first post. How to do the same for tweenmax?

     

    Then do the same thing. GSAP classes will be on the parent from inside an iframe.

     

    var box = document.querySelector("#box");
    
    window.parent.TweenMax.to(box, 1, { x: 100 });

     Depending on how deep your iframe is, you may need to something like window.parent.parent...

     

    • Like 3
  4. 3 hours ago, mrTowers said:

    So, if I wanted to make another element animate similar to the one done previously do I have to make a separate JS file?

     

    Why would you need to make another file? The only reason to ever create another file is for organization of your code.

     

    Make sure you proofread the file you're already working on. 'hook' can't be right. That's looking for a <hook></hook> element. Did you mean '#hook'?

     

    const scene2 = new ScrollMagic.Scene({
        triggerElement: 'hook',
        duration: 395,
        triggerHook: 0.9
    })

     

     

    • Like 3
  5. Hey @Luckyde

     

    I'm still out of town... applying for a new job, but that's not important. I could have sworn that you replied to my last post, but I don't see it anymore. I just wanted to make sure that something didn't go wrong on GSAP's end. We are in the middle of upgrading the forum software here, so it's possible that your last post might have deleted by accident.

     

     

    • Like 2
  6. 1 hour ago, GreenSock said:

    Or if that doesn't work, can you just link to the files (perhaps on a CDN like cloudflare) instead of trying to run it all through an NPM-based build system that doesn't expose the document properly? 

     

    Again, this is going back to what I said earlier. Just load your GSAP files through normal script tags. Nuxt is going to try and run stuff as server side code.

     

     

     

     

    • Like 2
  7. Before you start digging into source code, you should at least try troubleshooting your SVG code first. You have have a pointless m0 0 at the end here.

     

    <path id="source" style="" d="m256 421h30l60-135h-150zm0 0"/>

     

    Remove it, and it seems to work fine.

     

    <path id="source" style="" d="m256 421h30l60-135h-150z"/>

     

     

    • Like 3
  8. Don't know about swapping things out. What I do know is that when you change something in the data object, Vue runs those changes asynchronously. It uses a Promise to make that change in the next event loop tick. Using a fromTo(), from(), or set() tween might be causing problems because those changes are supposed to be synchronous.

     

    But again, I think the main issue here is that timelines don't belong in the data object. Just like in React, Timelines don't belong in the state object.

    • Like 2
  9. Wasn't try to steer the original question. My main point is that your data should be simple. Something that can be converted into json. 

     

    And the more I looked into this, it appears to only happen with attributes, but I don't know why. I checked, and the startAt and end values are correct for the animation.

  10. 19 hours ago, InfamousRocket said:

    Though i wonder, can canvas (or any other tool for that matter) do the SVG scale without performance issues?

     

    That's why I was suggesting checking out three.js, which uses a 3D renderer (WebGL). Moving and scaling objects in 3D space is pretty fast. Just think of how smoothly 3D video games are. You can still make 2D looking objects in 3D. The only problem for what you're doing is that you would need to convert most of your graphics into geometric objects/models, which might take a little work. 

    • Like 3
×