Drymy

Thank you, that was very insightful!

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!

OH my god i'm so stupid, sorry about that and thank you so much, it works perfectly!!

Hello! I'm trying to use convertCoordinates from the MotionPathPlugin but sadly i can't manage to make it work despite my tries. I cannot make a CodePen but i made a CodeSandbox rather here : https://codesandbox.io/s/solitary-morning-0v5l8?file=/src/App.js The goal was to move the green bloc to the blue bloc by giving it its coordinates. If i input a manual value on x such as 300 then the green bloc moves but using convertCoordinates never works whatever i try. My best guess was a weird interaction with useRef or useEffect since i can't use variables like in the documentation, but i don't know how to solve it.. Any ideas please? Thank you!

You're right thank you i ditched the package and everything works now, thank you and sorry for the trouble!

Hello and thank you! Despite my attempts i cannot manage to make a react codepen for some reason... I am trying to use this, not in any particular way just the base thing : https://bitworking.github.io/react-gsap/src-components-scroll-trigger But nothing i tried works sadly for ScrollTrigger. Sorry i cannot put more details, i'll delete / archive the thread if it's not enough. Have a good day!

import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); Hello, i want to try and use ScrollTrigger with React but despite my imports and tries, i keep getting an undefined error : TypeError: this is undefined 790 | var ScrollTrigger = function () { 791 | function ScrollTrigger(vars, animation) { 792 | _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)"); > 793 | this.init(vars, animation); | ^ 794 | } 795 | 796 | var _proto = ScrollTrigger.prototype; Can someone explain what i'm doing wrong please? I did install the npm gsap as well