Drymy Posted October 5, 2021 Share Posted October 5, 2021 Hello all! First off, here is the codesandbox for my testing : https://codesandbox.io/s/confident-tree-crcmt?file=/src/App.js I'm new to all this so i have a few questions if that's ok... First off, i'm trying to use both the timeline and scrolltrigger together and sadly i couldn't make it work. If i change the start value to "top center" and the timeline is already triggered on refresh, the animation plays perfectly, however well if i refresh the page and i'm outside of my trigger then get to it well...the animation just "pops in" and doesn't play out at all. I tried various things but couldn't make it work as intended : have the animation play once the scroll reaches the trigger. Second, i'm having a lot of trouble understanding how to set an element as the end point/destination. For exemple, if i want my animation in the codesandbox to land exactly at the edge of the gray div, right on top of the orange div, how could i determine that through the x & y coordinates without it being destroyed by viewport and responsive? I guess it's more practical vertically, but horizontally the x coordinates always become obsolete the moment the window is resized, and i don't know how to deal with that... And finally sorry, in my exemple you can see i'm using a rotation and bounce ease, however when the bounce happens the rotation goes backwards and it's jarring. I understand why it does that, but is there a way to keep the rotation linear instead of it rotating backwards on the bounce? Apologies for the long post, i hope it's not too much of an issue, have a good day! Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 5, 2021 Solution Share Posted October 5, 2021 Hi Drymy! Have you looked at our React Guide? One thing you should never do is create a timeline outside of a hook, especially with ScrollTrigger as the element won't be defined. Second, never put ScrollTrigger in the defaults object as that will make a ScrollTrigger for every child animation. See the most common ScrollTrigger mistakes, especially the one about nesting. Third, I wouldn't use ID's for elements. Check out the selector utility in that React Guide. If you're using ScrollTrigger, add invalidateOnRefresh: true to it, and use functions to calculate the values. Quote invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. This should help you get started. useLayoutEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: ".start", start: "top top", end: "+=500", markers: true, invalidateOnRefresh: true } }); tl.to("#fallingMoog", { opacity: 1, x: 30, y: () => 395, // calculate your value rotation: "+=720", duration: 2, ease: "bounce.out" }); tl.to("#bubble1", { opacity: 1, x: -60, duration: 0.5 }); return () => tl.scrollTrigger.kill() }, []); 3 Link to comment Share on other sites More sharing options...
Drymy Posted October 5, 2021 Author Share Posted October 5, 2021 Thank you, that was very insightful! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now