Jump to content

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


Popular Content

Showing content with the highest reputation on 11/08/2019 in all areas

  1. 2 points
    Hi Andrew, Just to clarify, you just need an object to update one or more values in it, and that is not related to the component's state? I'm a little lost in what exactly you want to achieve here. Keep in mind that using a functional component and the Hooks API you're kind of forced to use the useState() hook as well in order to update the number in the DOM view. Also keep in mind that React has become more and more efficient in terms of what is actually updated and re-rendered with time. While manipulating the DOM in the useEffect hook certainly works is not the react-way of doing things (actually Dan Abramov could suffer a stroke if He sees that part of your code ). If I was you I'd stick with using useState and useEffect to update the value and perhaps create a specific component just for showing the value so the only element that is actually re-rendered is the one being affected by that value, but again I'm not entirely clear of what you're doing. Happy Tweening!!!
  2. 2 points
    Hey @MugenFTW Keep in mind that force3d: true, z, and rotationZ won't really work on SVG, since those CSS hacks wont work on SVG. This is because SVG does not fully support 3D transforms, only 2D transforms. You also might want to run your SVG through an online optimizer to make sure it is optimized and cleaned up of any shenanigans. https://jakearchibald.github.io/svgomg/ (Don't forget to un-toggle Clean ID's) Also you might want to reduce the amount of <paths>, or like @ZachSaucier advised use layered image, or even maybe a mix of SVG and images. This way you don't have so many SVG elements to animate. But regular non SVG elements, like <div> tags or <img> tags can take advantage of 3D transforms so you can animate on a sub-pixel level for silky smoothness.
  3. 2 points
    I would like to say that I started a partnership with warkentien2. Thanks to everyone who answered me, here or in private. I found many excellent professionals! Also many thanks to greensock.com for make these interactions possible. Until the next.
  4. 2 points
    Video export ignores the first frame, so make sure all code / animations start on the second frame. If your animation starts on the first frame, Animate will ignore the first frame and render from the second onward.
  5. 2 points
    I see no lag or stutter on the first run here in Safari and Firefox on MacOS 10.15. I do see a stutter on the first run here in Chrome on MacOS 10.15, although I'm not sure why. It does have something to do wit the image in the right column. Removing that image removes the stutter. EDIT: Whoops! I submitted this hours ago, but it just went through (probably an issue on my side). The amazing @ZachSaucier has got you covered though!
  6. 2 points
    Hey Daniel. Most likely this has to do with the browser trying to optimize. That's often times the case when something (especially related to images/masking/etc.) isn't working the first time but is after the first time. Since you have autoAlpha: 0 on your image (that's set by GSAP) the browser is probably waiting to get ready to rending this. But when you open it it gets a little stuck trying to render it. You can test this by commenting out the .set() that gives it autoAlpha: 0. That seemed to fix it to me. A work around is to use a really small value instead. Like autoAlpha: 0.01. That way there'e no risk of people noticing the difference but the browser has a reason to consider it a little more initially. https://codepen.io/GreenSock/pen/xxxjoXK?editors=0010 Make sense?
  7. 1 point
    Thank you Your GSAP code looks fine to me. So it must be something with the ScrollMagic part. ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members. Maybe this post by our very own Craig can help you: If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
  8. 1 point
    Thanks Zach. Please found the recreated pen as you suggested https://codepen.io/parinagp/pen/vYYrWQy
  9. 1 point
    Yep, still asks for a password for me. I'm guessing there's some sort of security check based on IP address or something. Please RECREATE the effect, not just copy code from your project.
  10. 1 point
    Hey caio1985, What you're trying to do will be very easy using a new plugin that's introduced in GSAP 3. We're hoping to release GSAP 3 within the next week! If I were you I might just hang on and try using that.
  11. 1 point
    Hey Mugen and welcome to the GreenSock forums. This is unrelated to GSAP, but we'll help where we can. Partially opaque elements and filters are very performance intensive, especially to animate. You are using a lot of those things, so you can't really expect your animation to work great I'd try to rethink through how you're setting things up to avoid those things. Maybe even use layered images (not SVGs) or something.
  12. 1 point
    Hi @Parina and Welcome to the GreenSock Forum! That link you provided is behind an htaccess password. So we cant see anything But in order for us to better help you please create a limited reduced Codepen demo example. This way we can test your code in a live editable environment. Happy Tweening
  13. 1 point
    Hey Bakke and welcome to the GreenSock forums. This is actually a fairly common question. The trick is to .set() the element's height to "auto" (so that you can get the real height) and then immediately after that use a .from() tween with a height of 0. That way it will animate from 0 to that height of "auto" In your demo it would look like this: https://codepen.io/GreenSock/pen/yLLEgeK?editors=0010 Check out this thread or others on the forum for more implementation ideas: https://codepen.io/GreenSock/pen/Bzhji
  14. 1 point
    What have you tried? What issues did you run into? Did you check your browser's console (F12) and try to resolve any errors that appeared?
  15. 1 point
    Reply. Yes. Just frame labels in a Movieclip. The CTA is a nested movieclip with a label called cta. I initially had buttons that grew a bit on rollover, but color tweens I think are more noticeable, so I started doing shape tweens from one color to the rollover color. It is Animate, so no Codepen. In this example both the button and the button copy change color on rollover, and then back on roll off.
  16. 1 point
    @Shaun Gorneau I kept waiting for you to post, but then I decided it had been long enough waiting
  17. 1 point
    Hi Sam, I've sent you a direct message. Best, Philip
  18. 1 point
    Thanks, for the help. I think i have fixed it. I had to change the location of the svg and added extra css.
  19. 1 point
    I def wouldn't use rAF like this, especially with scroll. You could be building up a huge queue, which will hurt performance. window.addEventListener('scroll', () => requestAnimationFrame(checkSectionPos)); You can make sure there is only 1 rAF call per frame like this. // can use for cancelAnimationFrame(requestId); var requestId = null; window.addEventListener("scroll", requestUpdate); function requestUpdate() { // ignore any requests if rAF has already been called if (!requestId) { requestId = requestAnimationFrame(checkSectionPos); } } function checkSectionPos() { ... // clear id to allow more requests requestId = null; } For scrolling, I like to use the Intersection Observer. https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97 Simple media queries. https://codepen.io/osublake/pen/WKpmxN