Jump to content


  • Posts

  • Joined

  • Last visited

Drymy's Achievements

  1. 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!
  2. OH my god i'm so stupid, sorry about that and thank you so much, it works perfectly!!
  3. 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!
  4. You're right thank you i ditched the package and everything works now, thank you and sorry for the trouble!
  5. 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!
  6. 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