Damian Hutter

Awesome! Thanks a lot. I also tried around targeting the gatsby wrapper directly but it might cause some other issues down the road. So happy to include the beta file into the project. I've sent you a message. React.useLayoutEffect(() => { ScrollSmoother.create({ wrapper: '#gatsby-focus-wrapper', content: '#smooth-content', smooth: 1 }); }, []);

Hi there! Encountered the same issue and just wanted to ask when the workaround will be rolled out. For me it's only happening on a right mouse click tho. Best,

Hi @GreenSock, @OSUblake, @nicofonseca First of all - thanks a lot for all the ideas and insides so far. That really helped a lot. I got back to my code and tried to come up with a cleaner version which might showcase some aspects of my explorations. Within the codesandbox (https://codesandbox.io/s/suspicious-swanson-54075?file=/src/App.js) you can now see 3 boxes falling from the sky and bouncing back up on the ground. I've put a description of each box within the code and hopefully this underlines the idea behind everything. Thanks to @nicofonseca I was actually able to get the timeline to work by pausing and resuming the timeline from the framer onCompleteAnimation function. However, I need to specify at least a default duration of 0.1 for the overall timeline as a 0 is not working. That's where my initial idea comes into play if there would a way to tell the GSAP timeline - hey please await this function before moving on. Without the need to manually stop and resume the timeline itself. @GreenSock You're right in terms of the difficult implementation when it comes to timing. However, framer-motion and others have the option to define a restSpeed or restDelta to tell the next animation to start. Which feels pretty natural. In my experiment I was just looking for the possibility to combine these animations with GreenSocks MorphSVGplugin which is just unmatched by anyone else. Also the ScrollTrigger is so much better than the one which framer-motion offers. Thanks again so far - I've learned a lot already! ?

Hi @nicofonseca - Thanks a lot for your response! Yea, I thought about something similar but it has one major flaw - A spring animation doesn't have a duration. The animation is based on physics and therefore calculated on the fly. That being said, it would be an option to time the animation and provide the duration to GSAP. But it feels very 'hacky'. That's why I thought there might be a possibility to tell GSAP on your own when the animation should be completed. Basically an await function or something like that. Anyway - good thinking ?

Hi there, Currently I'm playing around with framer-motion and GSAP. I really love GSAP, however, framer-motion has some need tricks like spring animations, page transitions and works just so well with react. So in a perfect world I would be able to combine the power of both to control great spring animations with GSAPs powerful timeline and morphing capabilities. But, in order to do so I would need to tell framer motion when to start an animation. Easy - just using framer-motions start() function within GSAPs onStart() callback. However, the issue is, that GSAP calls an animation 'complete' way before it's really done. Which makes total sense as GSAP is not controlling the animation but messes up the timeline. Therefore my question is - can I call an animation 'complete' on my own? As framer has the option to call a function onEnd(). Thanks in advance! Here's a little codesandbox outlining the overall idea... https://codesandbox.io/s/suspicious-swanson-54075?file=/src/App.js

Thanks a lot man, really made my day! ?

@OSUblake ? omg that really solved it... That's amazing. Thanks a lot for this. Also for the guidance about what attributes to use so GSAP is doing the heavy lifting. Need to look into all of this in more detail for sure. Just out of curiosity - would you say this approach is a good way to achieve the desired effect or is there a more elegant way in GSAP to do something like this? Also the onUpdate function will have an impact on the performance or? Thanks again for this quick help!

Hi @Cassie thanks a lot for your reply. Yes, I've tested webkit before and it wasn't working either. I even found a discussion on stackoverflow suggesting to delete webkit all together as it breaks in some cases : https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari But for me no luck so far. With or without webkit. ?

Hello there, I was playing around with GSAP for the first time and for the most part I love it. However, one bug lets me bang my hand against the wall for the past couple of days. What I want to do: Text in the middle of the screen which gets 'eaten' up by an svg which scales towards 0. In my understanding I need to create an SVG clip-path for this. Apply it to a <div> surrounding the text and animate the path within the SVG so I don't scale the container with the text. As this would also scale the text itself. So far so good. Firefox and Chrome work as intended. However, Safari is not updating the animation visually. Even though you can see the animation running in the dev tools. (see attached screenshot) Every idea would be really appreciated. Thanks a lot in advance! Link to a codesandbox - https://udep9.csb.app/