[A few questions about ScrollTrigger with Timelines in REACT]

Thank you, that was very insightful!

[A few questions about ScrollTrigger with Timelines in REACT]

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!

[Can't make convertCoordinates() work on React]

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

[Can't make convertCoordinates() work on React]

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!

[ScrollTrigger plugin not registering?]

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

[ScrollTrigger plugin not registering?]

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!

[ScrollTrigger plugin not registering?]

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