[Morph onClick and then Morph back onClick React]

32 minutes ago, blumaa@gmail.com said:

Also.. still having trouble setting up MorphSVGPlugin via Codesandbox using the script tag. I think I'm doing it right but idk. Got any example for me? @OSUblake

 

That's strange. I see the problem, but that's something @GreenSock will have to fix for the next release. Try using stackblitz instead.

 

@GreenSock When creating a React project on CodeSandox, it uses a different url than other projects. I think you need to whitelist the csb.app domain.

 

The url for a Vue project

 

 

 

The url for a React project 🤷‍♂️

 

 

 

 

[Morph onClick and then Morph back onClick React]

2 hours ago, Rodrigo said:

Well right now the "official" React way is to use hooks, which is something Blake and I have ranted about a few times. The best approach GSAP-wise is to use class components and life-cycle methods, but it feels like is just Blake and Me against the entire React community on this one

 

My official recommendation is to use Vue. 

[SVG logo animation w/ DrawSVG + Stagger]

7 minutes ago, ZachSaucier said:

Besides that the only complaint I have are stylistic things related to your code formatting  

 

What would you suggest?

 

[Gsap center absolute item isn't working for Firefox/Edge]

You really shouldn't use transform.

Do this once.

gsap.set(innerCursor, {
  xPercent: -50,
  yPercent: -50
});

 

You can move it like this.

gsap.to(innerCursor, {
  duration: 0.1,
  ease: "power1.inOut",
  x: clientX,
  y: clientY
});

 

Or like this.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

 

[Morph onClick and then Morph back onClick React]

10 minutes ago, blumaa@gmail.com said:

By the way.. how do I add Morph Dependencies to CodeSandBox?

 

You can use the codepen links. Just put those in script tags instead of importing.

https://greensock.com/docs/v3/Installation?checked=core,morphSVG#codepen

 

 

 

[Morph onClick and then Morph back onClick React]

14 minutes ago, ZachSaucier said:

Would you or @Rodrigo be interested in writing an article on using React Hooks with GSAP? Like our https://greensock.com/react page.

 

Hm... how do you find that page.

 

But I'm not going to have enough free time to do that anytime soon, but it def needs to be updated to use React Hooks. My prediction is that 99% of all new React questions will be about React Hooks.

 

[Morph onClick and then Morph back onClick React]

1 minute ago, ZachSaucier said:

And is "official" the React way or the way that we should recommend doing it as GSAP people?

 

Both.

 

1 minute ago, ZachSaucier said:

Thoughts on where?

 

Not sure. Maybe create a usage section somewhere that shows how to use gsap with different frameworks and libraries (React, React Hooks, Vue, Angular, canvas, Pixi, Three, etc).

 

 

[Morph onClick and then Morph back onClick React]

There really needs to be some official documentation on React Hooks, because I see everyone doing it wrong.

 

When using Hooks, you should define your animations inside the first useEffect.

 

// GOOD
const MyComponent = () => {

  let timeline = useRef(null);
  
  useEffect(() => {
  
    timeline.current = gsap.timeline();
    
    // Return function to kill animation on unmount
    return () => {
      timeline.current.kill();
    };
    
  }, []); // !!! NOTICE THE EMPTY ARRAY
  
  return (<div>Foo</div>);
};

 

NEVER set it as variable.

 

// BAD
const MyComponent = () => {

  let timeline = gsap.timeline();
  
  return (<div>Foo</div>);
};

 

[Morph onClick and then Morph back onClick React]

Here's the "official" way to reverse an animation using React Hooks.

 

https://codesandbox.io/s/cold-http-40fl1?file=/src/App.js

 

@ZachSaucier Please post that somewhere.

 

 

 

 

 

 

 

 

[Transition of 3d cube]

29 minutes ago, Rodrigo said:

Finally perhaps @OSUblake (the forums' PIXI wizard) could have more info regarding this.

 

I'd echo everything Ivan said in that pixi forum post. You can do 3d in pixi, but it's not going to be easy. If you just need a cube, then make it with divs. There is no point in loading a huge WebGL library to make a cube.

 

 

[Animating different Elements on hover]

2 hours ago, Tony TAB said:

In the past, if I haven't done that, Gatsby build often fails even though development works.  See this thread

 

That's because you were importing from "gsap/all", and you weren't importing gsap. You also need to make sure you have the latest version.

 

 

[Animating different Elements on hover]

30 minutes ago, Tony TAB said:

Suggestions or improvements welcome.

 

There is no need for this. 

import { gsap, CSSPlugin } from 'gsap/all';
//need this to avoid tree shake of CSSPlugin
gsap.registerPlugin(CSSPlugin)

 

Just follow the installation docs.

https://greensock.com/docs/v3/Installation

 

All you need to do is import gsap.

import { gsap } from "gsap";

 

For hover, you should use mouseenter and mouseleave events.

 

Do not use new when creating a timeline. And there is no need to pause a timeline and play it. 

// BAD
const myTween = new gsap.timeline({paused: true, repeat:0});
myTween
  .to (el, {
  scale: 1.1,
})
  .play()
})

// GOOD
gsap.timeline()
  .to(el, { scale: 1.1 })

 

You're only animating one thing, so a tween is more appropiate.

gsap.to(el, { scale: 1.1 });

 

You're using React. You should be using what React DOM provides, not vanilla JS.

 

See the Pen 726d292638779b216881263f4d8be4a1 by osublake (@osublake) on CodePen

 

 

[How to use useRAF with gsap.timeline()]

Something like this.

 

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        gsap.ticker.lagSmoothing(false);
    } else {
        gsap.ticker.lagSmoothing(500, 33);
    }
});

 

[Destroy animation if dynamic class exists]

55 minutes ago, PointC said:

That's the key to finding out if I'm clicking the currently active tab:

if(this.index != activeTab)

If they don't match, I go ahead with creating a timeline, animating the chosen article and changing the values for old and activeTab.

    old = activeTab;
    activeTab = this.index;

So, to answer your question about using my slider, I think you'd just need to make a slight modification to how you're approaching it. I did just convert that demo to GSAP 3 so that should help.

 

Looks like you're doing what I described above. 😉

 

Like I said before, if you're adding an active class to an element, then you already know the active element. There is no need to search for class names.

 

[Possible bug with transformOrigin in SVG when using gsap.from()]

Nah, I think you just need to do...

tl.set(items, { transformOrigin: '50% 100%', immediateRender: true });

// OR SET IT BEFORE CREATING YOUR TIMELINE
gsap.set(items, { transformOrigin: "50% 100%"})

About immediate render.

 

Also, you're using a deprecated ease syntax. Just lowercase and the type. 

https://greensock.com/docs/v3/Eases

 

"power3" // same as power3.out
"power3.in"
"power3.out"
"power3.inOut"

 

[How to do soft bezier with MotionPath]

37 minutes ago, GreenSock said:

Oh, sorry about the confusion there - it doesn't allow 0. I figured nobody would ever want that, and the internal code is like vars.resolution || 12, so since 0 is "falsy" it jumps to the default. Try setting it to 1 and you'll see the speeding up and slowing down a lot more. 

 

I've used 0 in the past. I think I was doing a thru type with a curviness of 0 to do some linear animations.

 

24 minutes ago, GreenSock said:

I think this is the first time this kind of request has come up since GSAP 3 was launched which is an indicator of how pervasive the need is.

 

It was brought up recently. 

 

 

 

 

[How to do soft bezier with MotionPath]

32 minutes ago, GreenSock said:

It's not a simple task to force z into that calculation (it'd be costly kb-wise and I can't imagine even 0.0001% of our users would ever actually tap into that so I feel bad making everyone pay the kb price).

 

I dunno. Who's more like likely to use the MotionPathPlugin, your typical user who is doing UI animations, or someone who is using a WebGl library like three.js? Seems like it's excluding a large segment.

 

[How to do soft bezier with MotionPath]

27 minutes ago, GreenSock said:

Does that clear things up? 

 

I understand how it works, but it doesn't seem to have any effect. With a resolution of 0, I would expect it to go fast on long straight segments, and slow down on short curvy segments. 

[How to use useRAF with gsap.timeline()]

What do you mean? You want animations to continue running when you switch tabs?

 

[How to do soft bezier with MotionPath]

4 hours ago, GreenSock said:

Alright, here's a function that'll convert points into the cubic bezier equivalent "soft" version: 

 

Nice code. Much simpler and compact than what I came up with. 😉

 

I'm still wondering about resolution.

 

Quote

resolution

Number - Only applies when path is an Array. Due to the nature of bezier curves, plotting the progression of an object on the path over time can make it appear to speed up or slow down based on the placement of the control points and the length of each successive segment on the path. So MotionPathPlugin implements a technique that reduces or eliminates that variance, but it involves breaking the segments down into a certain number of pieces which is what resolution controls. The greater the number, the more accurate the time remapping. But there is a processing price to pay for greater precision. The default value of 12 is typically perfect, but if you notice slight pace changes on the path you can increase the resolution value. Or, if you want to prioritize speed you could reduce the number.

 

Does that only apply to the thru type? It looks like it doesn't work with cubic. However, it looks like cubic has a pretty uniform speed, so you must be doing something internally to normalize it, right?

 

I'm more wondering what's going on under the hood, and getting clarification.

 

[GSAP V3 Alternative to MorphSVGPlugin.pathDataToBezier]

5 hours ago, qweq3 said:

I use Firefox, my laptop has core i5 3230M 2.6 Ghz so it's not hardware issue.

 

Hardware is always an issue when it comes to svg. 😉

 

I don't have to time to look, but something is definitely wrong with the v3 version. The line and floating bubble go crazy on my computer.

 

 

[Destroy animation if dynamic class exists]

If you're adding a class to the active element, then you already know the active element. Just use some simple logic to keep track of stuff and compare.

 

if (lastActiveElement !== activeElement) {
  lastActiveElement = activeElement;
  animate();
}

 

 

 

 

[Sync image and text scale effect]

1 hour ago, ZachSaucier said:

Have you tried making the timeline with linear (or maybe exposcale ease) and then animating the timeline's progress using a tween? Something like this:

gsap.to(tl, {progress: 1, ease: "power1.inOut"});

 

 

That's what I'm doing in here.

 

See the Pen 56cf49e22c4c5c061f4eac389956cf45 by osublake (@osublake) on CodePen

 

And here, but understanding the code might be a little hard.

 

See the Pen pLoVXQ by osublake (@osublake) on CodePen

 

 

[Sync image and text scale effect]

24 minutes ago, Alibiy said:

Yes, I use it, and looked at examples, they work only with linear ease, but I need ease inOut.

 

They'd work the same with any ease.

 

 

[Sync image and text scale effect]

But ExpoScaleEase is not going to fix your issue. It solves issues with the speed of scaling. Both your items are being scaled at the same time, so it makes no difference what ease you use.